React: Sélectionner plusieurs - ne fait pas défiler jusqu'à l'élément sélectionné (éléments)

Intrigant! Je me demande s'il y a eu un changement dans la façon dont l'élément sélectionné a été attribué dans React 16.0.

J'ai essayé de jeter un œil à ces fichiers:

- https://github.com/facebook/react/blob/v15.6.2/src/renderers/dom/client/wrappers/ReactDOMSelect.js

- https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberSelect.js

Malheureusement, je n'ai pas pu trouver autant de différence. (Désolé pour mon manque d'aide mais je suis intéressé à voir comment cela sera résolu ou si je regardais au mauvais endroit).

Pas de soucis! Ce sont aussi les premiers endroits que je chercherais. Une différence que je vois est que React 16.x assigne defaultSelected après selected :

https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberSelect.js#L95

Je me demande si cela perturbe React. Je ne suis pas en mesure de tester moi-même pour le moment, mais je me demande si vous verriez un changement de défilement si vous définissez un point d'arrêt et parcourez cette boucle.

Bonjour Nathan, j'explore ce problème depuis quelques heures, j'ai installé react 15.6.2 et 16.3.2, j'ai pu suivre l'exécution du programme avec quelques points d'arrêt, il semble que la fonction:

updateOptions

définira l'un de ses attributs d'option avec "select" sur true (bon) également selectedIndex est défini sur 4 (également bon), mais à partir de là, je ne suis pas en mesure de voir pourquoi l'élément n'est pas imprimé comme il le devrait, car ses paramètres semble aller bien. De plus, je n'ai vu aucune différence entre l'affectation de defaultSelected avant selected .

Lorsque j'ai exécuté cela via un débogueur, selected et defaultSelected (selon ce que vous utilisez) sont tous deux correctement définis comme attributs true sur l'élément <option> DOM approprié .

Dans l'exemple 16.3.2, il sélectionne toujours la valeur passée, il ne fait tout simplement pas défiler jusqu'à elle. Y aurait-il un autre endroit où regarder dans le moteur de rendu où cet attribut de valeur est évalué / vérifié et le comportement y est en train de changer? J'ai fouillé mais il y a beaucoup de code à analyser.

Je ne sais pas à quel point cela aide, mais j'ai fait un petit test en utilisant le lien @ kre0n fourni pour trouver la version de React où le problème a commencé à se produire. Pour tester, j'ai désinstallé et réinstallé chaque version de React en utilisant l'interface sur codesandbox.

D'après ce que j'ai observé, tout depuis et après la sortie de 16.0.0 a provoqué ce problème. Sachant que 15.6.2 fonctionnait, j'ai décidé d'examiner toutes les versions de pré-version menant à partir de 16.0.0-alpha jusqu'à ce que le problème commence à se produire.

J'ai trouvé que la sélection arrêtait de défiler jusqu'à la «valeur» fournie à l'élément de sélection dans la construction 16.0.0-alpha.3 .

Je n'ai pas testé si cela avait été corrigé dans une version ultérieure, mais j'ai pensé que le premier point de défaillance pourrait aider d'une certaine manière.

Bonne après-midi. Je pense avoir identifié les causes d'un tel comportement indésirable, mais j'ai besoin de plus de temps pour rechercher une solution appropriée. Donc, si cela ne me dérange pas, je voudrais prendre cette question et faire mon premier engagement dans le projet.

Mettre à jour. Il semble que la question soit un peu plus compliquée que je ne le pensais. Je suis sûr que ce comportement introduit avec l'architecture de fibre de réaction. Je vais continuer d'essayer de le réparer même si je ne sais pas combien de temps cela peut prendre. Comme je ne suis pas entré dans les détails de la mise en œuvre auparavant, cela peut prendre un certain temps

Désolé. J'ai beaucoup voyagé :) On dirait que c'est un problème vraiment difficile.

@segoddnja Je vais vous attribuer cela, mais pas de pression pour brûler beaucoup de temps sur ce sujet par vous-même. Essayons de trouver une hypothèse et peut-être pourrons-nous travailler ensemble pour la résoudre.

Je suis curieux de savoir si quelque chose arrive à la sélection à l'avance qui pourrait entraîner l'arrêt du défilement. Je me demande s'il existe un ordre d'attribution de propriété / attribut qui aurait pu changer, ce qui entraînerait l'arrêt du défilement.

Voici un phénomène intéressant, disons que les étapes suivantes se produisent:

https://codepen.io/nhunzaker/pen/vaZxvE

1. Étant donné 6 options
2. Vous sélectionnez la première option
3. Vous sélectionnez la 6ème option
4. Vous désélectionnez la première option

Le défilement se concentre toujours sur la première option, même si la 6e option est la seule sélectionnée.

Il semble que, de toute façon Chrome, ne défile jusqu'à la première valeur sélectionnée que lorsque _assigned_, pas _unassigned.

Peut-être que c'est lié.

@nhunzaker Oui, merci, vous pensez dans la bonne direction. Le navigateur fait défiler jusqu'à la première option qui a obtenu la propriété sélectionnée true. Tout autre changement ne provoque pas de défilement.

Alors, ce que j'ai découvert maintenant. React crée selest nœud select a multipe=false , la première option ajoutée obtient automatiquement selected=true . Ainsi, le passage en mode multiple et la mise à jour de la sélection des options ne le font pas défiler.

Je pense qu'il est nécessaire de définir la valeur d'attribut multiple avant d'ajouter des options.