Bug 235891 – Native keyboard, select list and file selector not displaying in iPad PWA

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: UI Events

[Yogster]

We have a PWA we use to fill HTML forms offline. When we run our PWA in an iPad (iOS 15.2) it all works correctly at first; but then if we then stop using the PWA for a few hours, then use it again:

- The native keyboard is not shown when tapping on a text field
- The native list of options is not shown when tapping on a select field
- The native file selector (Photo library / take photo or video / choose files) is not shown when tapping on a file field

If we then remove the app from the app switcher and open it again, the behaviour disappears and the app works correctly again.

I can confirm the controls are getting tap events as they show focus and I can handle their events in javascript. It's just the native UI not showing.

[Alexey Proskuryakov]

Thank you for the report! This seems like something that would be difficult to address without seeing a reproducible case, can you share one?

[igutech]

This one is easy to reproduce. It's already documented in "Bug 235243 - Switching between PWAs causes the keyboard to not appear on input". Just install Starbucks PWA twice and try to login. It's the same BUG, but in this case it occurs with only one PWA! Currently PWAs are not useable on IOS (15.1 up)

[Alexey Proskuryakov]

To clarify, are these two claims accurate?

- This is a duplicate of bug 235243?
- Is this a regression in iOS 15.1 (not happening in iOS 15 or before)?

I want to get the background right before getting this over to someone who would investigate more deeply.

[igutech]

When i open my PWA (from Homescreen) for the first time, tapping on inputs (text) brings up the keyboard correctly. After moving the App in the background and bringing it up again, then from time to time the keyboard fails. I don't know why. 
Opening two PWAs side by side the keyboard always fails. Closing both Apps and restarting only one App does not help. Switching the device off and back on again helps from time to time. Right now i had to restart the device.

I can confirm this issue on iOS 15.2 and 15.3.

[Radar WebKit Bug Importer]

<rdar://problem/88570261>

[Yogster]

I've created a minimal PWA that can be used to reproduce this issue:

https://yogster.github.io/pwa-ui-tester/

Here's a screen capture showing the bug in action on an iPad running iOS 15.2:

https://share.getcloudapp.com/L1uW1YeO

It happens when the PWA has been inactive for a few hours, then we use it again - But not always.

I hope this helps!

PS - I saw the fix for bug 235243 - Great work, thanks!

[Mark de Jong]

I've also run into this issue with pulldown dropdowns not appearing. (in a PWA for two universities to register interest of visitors on an iPad)
There are also other mentions only about this issue on developer.apple.com and StackOverflow.

How to reproduce it:
- Have a html file with <meta name="apple-mobile-web-app-capable" content="yes" /> and a select element
- Use an iPhone/iPad/simulator on a device with home button and with any iOS 15 version (tested up till 15.4)
- Visit the html page in Safari and use the share button to add it to the home screen
- Open the app from the home screen
- Activate (tap) a pulldown
- Click on the home button on the bottom of the iPhone or iPad
- Now click on the icon on the home screen again
- What often happens: the options popup isn't closed or no pulldown on the page can open the options popup. If the options popup stays open you'll at first still be able to scroll it but you cannot get it to close.
- If it doesn't happen you can try to restart the device and retry above steps (starting from opening the homescreen app)

Some interesting points I notices:
- This bug seems to be triggered on devices with a home button. My guess is that this is because using a gesture on the screen to switch apps cause the pulldown to be closed and so prevents the bug from being triggered)
- switching to another web-capable page added to the homescreen and then switching back makes the pulldowns respond again(!)
- one report also noted the date input control also has this issue
- it seems dropdowns may be there but invisible because you sometimes select an option when clicking somewhere on the page where the dropdown could be (I also have seen this happen)

Other mentions online about this issue:
- https://developer.apple.com/forums/thread/689901 (issue with ios 15 beta 8)
- https://developer.apple.com/forums/thread/691863 (issue with select reported on the final ios 15)
- https://developer.apple.com/forums/thread/699982m (mention of someone reporting it for iOS 15.1)
- https://stackoverflow.com/questions/70292301/ios-native-controls-invisible-hidden-in-pwa
- https://developer.apple.com/forums/thread/696346
- https://githubhot.com/repo/babybuddy/babybuddy/issues/381
- https://stackoverflow.com/questions/70834688/intermittent-html-select-freezes-on-safari-in-ios-15-onwards/71035270

[Mark de Jong]

Created attachment 455348 [details]
Video demonstrating the <select> dropdown failing

In the video you see the dropdown staying visible after switching away from the PWA and then returning. It won't go away. After switching the second time it does go away but won't reappear (though it seems I could select an item even though the dropdown wasn't visible?). At 0:25 I start to use the keyboard to navigate through the options in the focussed select element) which works.

[Mark de Jong]

Comment on attachment 455348 [details]
Video demonstrating the <select> dropdown failing

Video shows the simulator with iOS 15.4. When switching away from the PWA and returning the select dropdown stays visible but won't disappear when selecting an item. After switching a second time the dropdown has disappeared but won't reappear. I also seem to have selected an item from a invisible dropdown. At 0:25 I use the keyboard to navigate through the select options which works.

[Alexey Proskuryakov]

The issue as originally reported is believed to have been fixed in iOS 15.4, in a system framework other than WebKit. Maybe it's because there were multiple separate issues here, which actually needed to be fixed separately - looks like it's the "software keyboard doesn't appear" case that got fixed.

Anyway, the best course of action would be to file new bug reports for issues in iOS 15.4. Please provide steps to reproduce and regression information if at all possible (i.e. when it was last known to work, and when it stopped working). This will make the issues easier to work on than trying to iterate on this report.

[Mark de Jong]

The issue as originally reported was (according to the title) "Native keyboard, select list and file selector not displaying in iPad PWA".
I rather argue that the "virtual keyboard" might have been a seperate issue, meaning the "select list and file selected" part are relevant here.

Some more testing leads me to conclude that any component with a dropdown can  trigger this bug. When the bug is triggered ALL components with a dropdown will fail....
The weird thing is switching to another PWA and back fixes the dropdown issue.

In the simulator I've verified these can trigger the bug:

- <select>
- <input type="file" />
- <input type="date" />
- <input type="month" />

[Mark de Jong]

Created attachment 455474 [details]
testcase for the iOS PWA dropdowns problem (Yogsters testcase with some changes/additions)

[Alexey Proskuryakov]

I'm not debating whether the right thing happened with regards to what this bug ended up tracking. But for more fixes, the next step is to have new bugs filed.

[Mark de Jong]

I've created a new issue (https://bugs.webkit.org/show_bug.cgi?id=238318) in which I added all info from my posts in this issue and some additional observations which point to what may be happening.