Keyboard does not show if I click on a liveselect that has a populated value

[silviurosu]

I am having an issue with my live production app.
When I click inside a liveselect that already has a value, it does not show the keyboard to be able to type another value.
Since most of the visitors this days are on mobile phones this is a nasty bug.
See below a recroding of showcase app (https://live-select.fly.dev/) that shows this problem

RPReplay_Final1718048942.MP4

As more details I am using an Iphone and Safari browser

[maxmarcon]

Hi. I've tested live select extensively on my mobile phone (Android) and it works fine there.
I don't have access to an iPhone. However, I downloaded the iOS simulator for XCode and opened the showcase app there.
Indeed, the keyboard is not showing when you focus on the liveselect with the selected value.

I tried to connect Safari to the simulator to take a look at the JS console as explained here, but it didn't work for me.

Do you have access to an iPhone or are you able to debug this problem on XCode Simulator?

[silviurosu]

I tested on my daughter android phone and the same thing happens.See the recording attached. As you can see I had to click twice in the input to be able to see the keyboard although the input seems to have cursor after first click
I guess is something related to focus event and the fact that the input already has a value. I will try to investigate myself also.

WhatsApp.Video.2024-06-15.at.10.21.51.mp4

[maxmarcon]

Thanks. I was able to replicate this on my phone using Chrome as browser. The issue doesn't appear with Firefox (the browser I normally use). I will have a look soon.

[carlgleisner]

I'm running into this now and I'm about to take a look at it.

From what I've gathered regarding WebKit quirks, Apple seems to have elected a rather non-standard way of handling focus that (among other things) creates issues with showing the virtual keyboard when expected.

Maybe this is of interest:

• https://gist.github.com/cathyxz/73739c1bdea7d7011abb236541dc9aaa
• Allow autofocus to work inside <amp-lightbox> on iOS ampproject/amphtml#14676

[carlgleisner]

There is a recent thread on the Elixir Forum regarding the iOS keyboard issue:

https://elixirforum.com/t/triggering-focus-on-mobile-via-js-module/67915

It also links to an issue with the WebAuthn component library.