web-dev-qa-db-fra.com

Bogue de sélection multiple de Safari mobile

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

Si vous utilisez des champs de sélection multiple sur un 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 il ne vous la montrera pas avec la sélection bleue "cocher".

Donc, si vous sélectionnez maintenant la deuxième option, la sélection vous dira que deux options sont sélectionnées (mais en ne mettant en évidence qu'une seule comme sélectionnée) ...

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.

C'est un bug système vraiment ennuyeux, qui brise l'expérience utilisateur!

htmliosselectmobile-safarimulti-select
25
Laurenz Glück

Solution pour le bug de sélection multiple de safari et Vide et Désactivé problème lié à l'option tick:

<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 optgroup désactivé et masqué avant les vraies options.

24
Tejal Raval

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

L'astuce consiste à ajouter une option 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 gardera les valeurs de sélection correctes et propres!

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

14
Laurenz Glück