Vuetify: [Bug Report] Toolbar icon highlight getting stuck after routing on mobile

[mcfarljw]

Versions

Vue 2.5.2
Vuetify 0.16.6

What is expected ?

I'm expecting to be able to navigate between routes using icon links without the icon remaining selected or highlighted after the route has changed on mobile devices.

What is actually happening ?

When switching between routes or using button on mobile they seem to be getting stuck in a highlighted state until the user clicks focus somewhere else on the screen.

If you load the fiddle up below in Chrome using the mobile device viewer and click the back arrow the issue reveals itself.

Reproduction Link

https://jsfiddle.net/mcfarljw/83r0bhmh/1/

[johnleider]

For whatever reason, on mobile, https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VBtn/VBtn.js#L111 gets called but never blurs properly.

[mcfarljw]

I spent a bit of time looking into this and it seems to be 100% caused by the :hover rule in the stylesheet. Just calling blur doesn't dispose of that property on mobile. Might be other solutions, but it seems most places recommend binding to the mouseover and mouseout events to toggle a custom hover class. Something like this could be implemented:

routable.js

mouseover: this.mouseover,
mouseout: this.mouseout,

VBtn.js

mouseover (e) {
  // add hover class
},
mouseout (e) {
  // remove hover class
},

@johnleider I could start working on this, but want to get your feedback first. Is this something that seems reasonable?

[jacekkarczmarczyk]

Alternatively :hover rule could be applied only for @media (hover: hover) (not supported by IE, but who cares, and by Firefox, but the latter could be detected with @supports query)

[afuentes90]

I have the same problem with v-tootltip component with a button inside, any idea to solve this? Thanks!

[mcfarljw]

I have stumbled across a temporary fix that I've been using in my code that might also work as a more permanent fix. It could be combined with the touch detection class .application--touch-support to just globally disable :hover:before background colors.

:hover:before
  background-color: transparent !important

[rkoval]

I have the same issue with v-hover on Vuetify 1.2.4. Touching any element with a wrapping v-hover will cause any styles to persist until any other interaction with the page happens.

[185driver]

From @jacekkarczmarczyk :

Alternatively :hover rule could be applied only for @media (hover: hover) (not supported by IE, but who cares, and by Firefox, but the latter could be detected with @supports query)

As of Firefox 64 (see MDN or CanIUse), this feature is fully implemented, meaning all major browsers now support it. It would be awesome if Vuetify could implement something like this in v2.0 and remove this niggle on touch devices.