[Bug Report][2.4.11] cursor does not appear in form components on mobile

Environment

Vuetify Version: 2.4.11 Vue Version: 2.6.0 Browsers: Mobile Safari, Chrome OS: iOS 14.5.1

Steps to reproduce

On mobile, when first loading the page and tapping into a form field (e.g. Name) no cursor appears. Only upon tapping into another field does it show a cursor.

Codepen link below shows it, as does the Vuetify docs page itself: https://vuetifyjs.com/en/components/forms/

Works properly on desktop - this only seems to happen on mobile (tested on iPhone 12 in Safari and mobile Chrome browsers)

Expected Behavior

Cursor should appear upon tapping into field, and upon typing within that field

Actual Behavior

No cursor appears until tapping into a second field and then back again

Reproduction Link

https://codepen.io/t17/pen/jOBPgVG?editors=1010

[mcfarljw]

We’ve had a fair number of frustrated users who’ve reported this issue over the past several months. I would also like to add that it seems to happen on Chrome for iOS as well. I checked out a recent referenced duplicate issue (https://github.com/vuetifyjs/vuetify/issues/13933) and that fix seems to solve the issue in my testing. I’m not sure why though. Here is a copy of the fix:

.v-text-field > .v-input__control > .v-input__slot {
  transition: background 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

The negative of this approach is that on iOS the border doesn’t match the specific theme/cursor color, but at least the cursor doesn’t become invisible.

[elwyos]

This happened with my textbox on iOS too, and I checked to see if the forms page on vuetifyjs’ website also exhibited this issue – and it did ( https://vuetifyjs.com/en/components/forms/ )

I think it might be a vuetifyjs specific issue - doesn’t seem to happen on the other vue toolkits.

I have noticed the cursor appears again when you touch-hold the textbox. Refreshing the forms page will cause the “cursor not appearing” issue to remanifest, and only solved when changing textboxes (i.e the cursor appears after switching from the first textbox).

I’ve also noticed that when switching around on that form, the textbox goes red (because of failed validation), but when typing on iOS on the red form, the cursor stays red while the underline turns blue. This is unlike the behavior on desktop where the cursor color should follow the underline’s color.

At any rate, I hope there can be a solution or a workaround for this. Text cursor not appearing in iOS consistently feels like it’d be a big problem, and I’ve been spending some time trying to see if I could incorporate textboxes from other frameworks just to workaround this issue, but of course I would rather use the sexy, stylish vuetify textfields instead.