html - www - Bug multi Safari mobile




www w3 org html (2)

Si trouvé un bug vraiment ennuyeux sur le safari mobile actuel (iOS 9.2) (apparaissant pour la première fois depuis iOS 7!)

Si vous utilisez plusieurs champs sur Safari Mobile - comme ceci:

<select multiple>
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

Vous aurez des problèmes avec la sélection automatique!

iOS sélectionne automatiquement la première option après avoir ouvert la sélection (sans aucune interaction de l'utilisateur) - mais elle ne vous l'affichera pas avec la sélection bleue "check".

Donc, si vous sélectionnez maintenant la deuxième option, le sélecteur vous indiquera que deux options sont sélectionnées (mais en mettant seulement une en surbrillance) ...

Si vous fermez et ouvrez à nouveau la sélection, iOS désélectionnera automatiquement la première valeur - si vous répétez, elle sera à nouveau sélectionnée sans aucune intervention de l'utilisateur.

Thats un bogue de système vraiment ennuyeux, qui brise l'expérience de l'utilisateur!


Après une longue recherche, j'ai trouvé la solution suivante (pas la plus belle) mais efficace:

L'astuce consiste à ajouter une option de sélection vide et désactivée à la première position:

<select multiple>
    <option disabled></option>

    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

Cela empêchera iOS de sélectionner automatiquement la première option et de garder les valeurs de sélection correctes et propres!

L'option vide n'est pas visible et le nombre de sélections est correct.


Solution pour le bug de safari multi select et option vide et désactivée

<select multiple>
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>

Ajoutez un groupe optionnel désactivé et masqué avant les options réelles.







multi-select