Vuetify: [Bug Report] v-select shows blinking keyboard cursor on mobile screen when using "outline" or "solo" props

Created on 6 Jul 2018  路  3Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.1.1
Vue: 2.5.2
Browsers: Google Chrome, Safari
OS: iOS

Steps to reproduce

Using your mobile device (iPhone X in my case), go to a page with a v-select in use with the "outline" or "solo" prop, or open Codepen from the Vuetify doc for Select (this one has all 4 styles): https://vuetifyjs.com/en/components/selects#usage

Tap on the select element to see its dropdown options.

You'll notice that a blinking keyboard cursor appears on "outline" or "solo" style selects, but not on standard or "box" selects.

Expected Behavior

Blinking keyboard cursor should not appear on a select element.

Actual Behavior

Blinking keyboard cursor appears on the select element, like it's a text input.

Reproduction Link

https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/selects/usage.vue

Other comments

Reproducible on both Safari and Chrome.

VSelect low regression platform specific

Most helpful comment

.v-select:not(.v-autocomplete) .v-select__slot input { visibility: hidden } seems to fix it

All 3 comments

Doesn't happen in android chrome, but does in IE11.

I think this just confirms that safari is the new IE.

The blinking cursor also overlaps the drop down on IE. The issue is visible on the vuetify site also. In the select doc page, try any example given there. The cursor will appear before the select pop up

.v-select:not(.v-autocomplete) .v-select__slot input { visibility: hidden } seems to fix it

Was this page helpful?
0 / 5 - 0 ratings

Related issues

smousa picture smousa  路  3Comments

chriswa picture chriswa  路  3Comments

dohomi picture dohomi  路  3Comments

paladin2005 picture paladin2005  路  3Comments

Antway picture Antway  路  3Comments