Bug 211987

OS: iOS 13.4.1
Safari version: Not sure. The one that ships with iOS 13.4.1 

Severity: High (in my opinion)

Background:

By default, select elements only allow one option to be selected. The optgroup element allows you to visually group the options in a select. 

The problem:

In Safari on iOS, it is possible to find yourself in a state where more than one options appear to be selected.

To reproduce:

Example CodeSandbox here (open on your phone): https://mfu9l.csb.app
CodeSandBox source here (open on your laptop): https://codesandbox.io/s/snowy-thunder-mfu9l?file=/index.html

1. Create a select with several options and several optgroups
2. Open the select and choose one of the options near the top
3. Without closing the select, scroll to the options near the bottom and choose one
4. Again without closing the select, scroll back to the top and observe that the first option that you chose is still selected

If you keep clicking around, you can observe a number of strange behaviors with selected options that you scroll offscreen. They appear to break in some way after they are scrolled offscreen.

Theory:

I believe two facts are combining to create this bug:

1. This select is virtualized, so that items that are offscreen are not rendered
2. Items that are offscreen persist whatever their state is (i.e.; if they are unchecked, they remain unchecked, and if they are checked, then they remain checked)

If this is true, then fixing # 2 is the solution. Items that aren't rendered still need to have their checked state updated.

---

I believe this is high priority because selects and optgroups are basic building blocks for the web. Users may be confused if they think they're selecting one thing in a dropdown when they have actually selected something else. Consider, say, a bank's website that may be using a dropdown with optgroups to choose where to transfer money to/from. A user may unintentionally send money to the wrong place.