Select on iPad doesn't refresh dropdown UI after an option is removed

• Component: Forms
• Status: RESOLVED FIXED

[Michał Gołębiowski-Owczarek]

This is an issue reported as happening in the wild on a project using AngularJS. AngularJS is EOL now and will not see a new release. Unless iPad Safari is fixed, this will forever stay broken in the official AngularJS.

On an iPad with the latest iPadOS 15.3, if you have a `<select>` element on the page and you perform the following steps:
1. Open the select dropdown by clicking on it (then optionally close it, it doesn't matter)
2. Programmatically remove an option by invoking `select.remove(0)`
3. Open the select dropdown again
you'll see that the dropdown still shows all the original options despite the select DOM being properly updated.

When that issue happens, it's sometimes very hard to force Safari to update the UI state properly. Opening the same select dropdown repeatedly doesn't update it. Some CSS actions like setting the select height help but only if the dropdown is opened after this height update so programmatic workarounds like "set select height to 10px, force style recalc, reset select height" don't work. If you have multiple select elements on the page and you open another one, the UI state cache is apparently cleared and opening the first select now shows the correct options. Again, this is not something that can be done programmatically by a library.

Weirdly, this only happens on iPad. It works fine on macOS & on an iPhone. On an iPad, it happens both on a real device (tested on iPad 9th generation) on iPadOS 15.3 and on an iPad Pro (11-inch) simulator with iPadOS 15.2. I was also able to reproduce on an iPadOS 14.5 simulator but not on the iPadOS 13.5 one.


A live test case: Test case showing the issue: https://output.jsbin.com/fihujuq/8.

The AngularJS issue: https://github.com/angular/angular.js/issues/17168

[Michał Gołębiowski-Owczarek]

There's an older related issue:
https://bugs.webkit.org/show_bug.cgi?id=128721
However, that one is quite old and it affected both iPhone & iPad. Plus, as I mentioned, I cannot reproduce the issue I now reported on iPad 13.5 so it seems to be a new issue.

[Radar WebKit Bug Importer]

<rdar://problem/88292987>

[Michał Gołębiowski-Owczarek]

I'll add that when the outdated UI appears with the first option still present, clicking on the second visible option will activate the second real option in the select - which is a different one.

For example, if you have options:
* empty
* A
* B

and you remove the first empty option, hitting the issue and then open the dropdown & choose "A", it will actually select "B" as that's what's under index 1 at the moment. It's not just a visual quirk, it creates a really broken behavior.

[Aditya Keerthi]

I think this issue is due to the fact that, specifically on iPad, <select> elements are not blurred when the dropdown is dismissed. The options themselves are populated when the element is focused, so the state is inconsistent. 

A workaround would be to blur the element before/after changing the options (via select.blur()).

To fix in WebKit, I think we'll need to trigger a FocusedElementInformation update when options are changed.

[Michał Gołębiowski-Owczarek]

Blurring is quite invasive and I imagine it may have accessibility consequences. Is there a workaround that's less user hostile?

[Michał Gołębiowski-Owczarek]

Any additional info? Any workarounds that are not as invasive? This is a pretty serious issue for any AngularJS app using selects...

[Michał Gołębiowski-Owczarek]

Any updates? This continues to be an issue in the latest stable iPad OS 15.x and there's no good workaround.

[Aditya Keerthi]

Pull request: https://github.com/WebKit/WebKit/pull/21504

[EWS]

Committed 271805@main (cb12141f93d1): <https://commits.webkit.org/271805@main>

Reviewed commits have been landed. Closing PR #21504 and removing active labels.