React: Mehrere auswählen - scrollt nicht zum ausgewählten Element (Elemente)

Faszinierend! Ich frage mich, ob sich die Zuordnung des ausgewählten Elements in React 16.0 geändert hat.

Ich habe versucht, mir diese Dateien anzusehen:

- 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

Leider konnte ich nicht so viel Unterschied feststellen. (Entschuldigung für meinen Mangel an Hilfe, aber ich bin interessiert zu sehen, wie dies gelöst wird oder ob ich am falschen Ort gesucht habe).

Keine Sorgen! Das sind die ersten Orte, an denen ich auch suchen würde. Ein Unterschied, den ich sehe, ist, dass React 16.x defaultSelected nach selected zuweist:

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

Ich frage mich, ob dies React abwirft. Ich kann im Moment selbst nicht testen, aber ich frage mich, ob sich der Bildlauf ändern würde, wenn Sie einen Haltepunkt setzen und diese Schleife durchlaufen.

Hallo Nathan, ich habe dieses Problem einige Stunden lang untersucht. Ich habe React 15.6.2 und 16.3.2 installiert. Ich konnte die Programmausführung mit einigen Haltepunkten verfolgen. Es scheint wie die Funktion:

updateOptions

wird eines seiner Optionsattribute mit "select" auf true (gut) setzen, auch selectedIndex ist auf 4 (ebenfalls gut) gesetzt, aber von hier aus kann ich nicht sehen, warum das Element nicht so gedruckt wird, wie es sollte, weil seine Parameter scheinen in Ordnung zu sein. Außerdem sah ich keinen Unterschied zwischen der Zuweisung von defaultSelected vor selected .

Wenn ich dies durch einen Debugger lief, wurden selected und defaultSelected (je nachdem, welche Sie verwenden) beide korrekt als true -Attribute für das entsprechende <option> DOM-Element festgelegt .

Im Beispiel 16.3.2 wird immer noch der übergebene Wert ausgewählt, es wird nur kein Bildlauf durchgeführt. Gibt es irgendwo anders im Renderer nachzuschauen, wo dieses Wertattribut bewertet / überprüft wird und sich das Verhalten dort ändert? Ich stöberte herum, aber es gibt viel Code zum Parsen.

Ich bin mir nicht sicher, wie viel dies hilft, aber ich habe einen kleinen Test mit dem angegebenen Link @ kre0n durchgeführt , um den Build von React zu finden, bei dem das Problem zum ersten Mal aufgetreten ist. Zum Testen habe ich jede Version von React über die Schnittstelle auf Codesandbox deinstalliert und neu installiert.

Nach allem, was ich beobachtet habe, hat alles ab und nach der Veröffentlichung von 16.0.0 dazu geführt, dass dieses Problem 15.6.2 funktioniert, habe ich mich entschlossen, alle Pre-Release-Builds von 16.0.0-alpha bis zum ersten Auftreten des Problems zu untersuchen.

Ich habe festgestellt, dass die Auswahl nicht mehr zu dem Wert gescrollt hat , der dem Auswahlelement in Build

Ich habe nicht getestet, ob es in einem späteren Build behoben wurde, aber ich dachte, der erste Fehlerpunkt könnte irgendwie helfen.

Guten Tag. Ich glaube, ich habe herausgefunden, was solch unerwünschtes Verhalten verursacht, aber ich brauche etwas mehr Zeit, um eine ordnungsgemäße Lösung zu finden. Wenn es niemandem etwas ausmacht, würde ich dieses Thema gerne aufgreifen und mein erstes Engagement für das Projekt machen.

Aktualisieren. Es scheint, dass das Problem etwas komplizierter ist, als ich gedacht habe. Ich bin sicher, dass dieses Verhalten mit der Reaktionsfaserarchitektur eingeführt wurde. Ich werde weiter versuchen, das Problem zu beheben, obwohl ich nicht weiß, wie viel Zeit es dauern kann. Da ich vorher nicht auf die Implementierungsdetails eingegangen bin, kann es einige Zeit dauern

Es tut uns leid. Ich bin viel gereist :) Klingt so, als wäre das ein wirklich schwieriges Thema.

@segoddnja Ich werde dir das zuweisen, aber keinen Druck, viel Zeit dafür alleine zu verbrennen. Versuchen wir, eine Hypothese herauszufinden, und vielleicht können wir zusammenarbeiten, um sie zu lösen.

Ich bin gespannt, ob mit der Auswahl im Voraus etwas passiert, das dazu führen kann, dass das Scrollen gestoppt wird. Ich frage mich, ob es eine Reihenfolge von Eigenschafts- / Attributzuweisungen gibt, die sich hätte ändern können, was zum Stoppen des Bildlaufs führen würde.

Hier ist ein interessantes Phänomen, sagen wir, die folgenden Schritte passieren:

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

1. 6 Optionen gegeben
2. Sie wählen die erste Option
3. Sie wählen die 6. Option
4. Sie deaktivieren die erste Option

Das Scrollen konzentriert sich immer noch auf die erste Option, obwohl nur die sechste Option ausgewählt ist.

Es scheint, dass Chrome ohnehin nur dann zum ersten ausgewählten Wert scrollt, wenn _assigned_, nicht _unassigned.

Vielleicht hängt das damit zusammen.

@nhunzaker Ja , danke, du denkst in die richtige Richtung. Der Browser blättert zur ersten Option, für die die Eigenschaft true ausgewählt wurde. Weitere Änderungen verursachen keinen Bildlauf.

Also, was ich jetzt entdeckt habe. React erstellt einen nackten selest -Knoten und hängt Optionen daran an. Da nacktes select multipe=false , erhält die erste angehängte Option automatisch selected=true . Wenn Sie also weiter in den Mehrfachmodus wechseln und die Auswahl der Optionen aktualisieren, wird kein Bildlauf durchgeführt.

Ich denke, es ist notwendig, den Attributwert multiple festzulegen, bevor Optionen angehängt werden.