A UI bug on iOS devices: iOS native window is shown after focusing on a multiple choices select element #6321

vitalii-work · 2024-06-23T12:13:26Z

Steps to reproduce:

Open the following page from an iPhone:
https://select2.org/appearance#labels
Focus on the multiple select element field.

You'll see that the 2nd iOS native window saying "No Options" is temporarily shown (just for a second):

RPReplay_Final1719132459.MOV

I've tested on 2 iPhone devices with different iOS versions. The bug persists.

EzeGmnz · 2024-11-11T18:46:22Z

Hey! any luck on this one?

vitalii-work · 2024-11-11T19:52:20Z

@kevin-brown or @jayaddison, please, take a look at this.

kevin-brown · 2024-11-11T20:50:59Z

Unfortunately this one is going to be hard to debug and correct since I don't have ready access to iOS devices anymore and this doesn't appear in my emulator.

jayaddison · 2024-11-11T22:06:49Z

@vitalii-work is the relevent select control loading data from AJAX, or are the options baked-in to the webpage content?

jayaddison · 2024-11-12T00:58:49Z

Self-quoting:

@vitalii-work is the relevent select control loading data from AJAX, or are the options baked-in to the webpage content?

I can answer that myself, because the question is about the select2 documentation.

The answer is: it's not AJAX, but it's also not pure HTML.

From 'most static' to 'most dynamic', the options we generally have are:

Embed options into the HTML.
Dynamically add options using JavaScript and data within the page.
Dynamically add options using JavaScript from a remote resource (either same-origin or otherwise).

In this case the geoselection options are configured from a static set of states in this file: https://github.com/select2/select2/blob/595494a72fee67b0a61c64701cbb72e3121f97b9/docs/themes/site/templates/partials/js/source-states.html.twig

Why is all that relevant?
We can't inspect the source code of iOS itself - that's closed. But something I would infer is that the No options prompt shows up because at the time-of-calculation, it finds the select element has.. no options listed.

When does that time-of-calculation occur? Perhaps it is during the parsing of the raw HTML itself? (that would, in some ways, be quite fast and efficient - preparing as much of the UI/dialogs as possible based on known-static data)

What are you saying???
My guess would be that to avoid this in a production application, you should, if possible, use HTML to declare the <option> values statically. I can't initially think of any drawbacks to that as compared to using JavaScript to dynamically insert options based on.. a static initial list of values, declared as HTML.

Edit: remove accidental line-number from source file reference.

jayaddison · 2024-11-12T01:01:06Z

(I could be mistaken about much of the above; it's best-guess based on some mental models I have about how iOS might work, and why that dialog might appear in a dialog that is displaying the given web content)

jayaddison · 2024-11-12T11:29:11Z

It might be possible to confirm/reject the theory that this occurs when <option>s are created by JavaScript (either local or AJAX) by comparing the behaviour of this multi-select select2 example, also in the documentation, where the options are declared using HTML: https://select2.org/tagging#tagging-with-multi-value-select-boxes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A UI bug on iOS devices: iOS native window is shown after focusing on a multiple choices select element #6321

A UI bug on iOS devices: iOS native window is shown after focusing on a multiple choices select element #6321

A UI bug on iOS devices: iOS native window is shown after focusing on a multiple choices select element #6321

A UI bug on iOS devices: iOS native window is shown after focusing on a multiple choices select element #6321

Comments