React: 複数選択-選択したアイテムにスクロールしません（アイテム）

興味をそそる！ React16.0で選択したアイテムの割り当て方法に変更があったのではないかと思います。

私はこれらのファイルを見てみました：

-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

悲しいことに、私はそれほど多くの違いを見つけることができませんでした。 （助けがないことをお詫びしますが、これがどのように解決されるか、または間違った場所を見ていたかどうかに興味があります）。

心配ない！ それらは私も最初に見る場所です。 私が見る1つの違いは、React 16.xがdefaultSelected後にselected defaultSelected割り当てることです。

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

これがReactを捨てているのだろうか。 現時点では自分でテストすることはできませんが、ブレークポイントを設定してこのループをステップ実行すると、スクロールが変化するのではないかと思います。

こんにちはネイサン、私はこの問題を数時間調査してきました、私はreact 15.6.2と16.3.2をインストールしました、私はいくつかのブレークポイントでプログラムの実行を追跡することができました、それは関数のようです：

updateOptions

「select」を使用してオプション属性の1つをtrue（良好）に設定し、selectedIndexも4（これも良好）に設定しますが、ここからは、パラメーターが原因で、要素が正しく印刷されない理由がわかりません。大丈夫そうです。 また、 defaultSelected前にselected defaultSelected割り当てることに違いは見られませんselected 。

これをデバッガーで実行すると、 selectedとdefaultSelected （どちらを使用するかによって異なります）は両方とも、適切な<option> DOM要素のtrue属性として正しく設定されます。 。

16.3.2の例では、渡された値を選択し、スクロールしません。 その値属性が評価/チェックされ、そこで動作が変化しているレンダラーを調べる場所は他にありますか？ 私はあちこち探しましたが、解析するコードがたくさんあります。

これがどれだけ役立つかはわかりませんが、提供されたリンク@ kre0nを使用して小さなテストを行い、問題が最初に発生し始めたReactのビルドを見つけました。 テストするために、codesandboxのインターフェースを使用して、Reactの各バージョンをアンインストールして再インストールしました。

私が観察したところによると、 16.0.0のリリース以降のすべてが、この問題の原因でした。 15.6.2が機能していることを知って、 16.0.0-alphaから問題が最初に発生し始めるまでのすべてのプレリリースビルドを調べることにしました。

ビルド16.0.0-alpha.3でselect要素に提供された「value」へのselectのスクロールが停止したことが

後のビルドで修正されたかどうかはテストしませんでしたが、最初の障害点が何らかの形で役立つと考えました。

こんにちは。 このような望ましくない動作の原因を特定したと思いますが、適切な修正を調査するにはもう少し時間が必要です。 ですから、誰も気にしないのであれば、この問題を取り上げて、プロジェクトへの最初のコミットメントを行いたいと思います。

更新。 問題は私が思っていたよりも少し複雑なようです。 この動作は、reactファイバーアーキテクチャで導入されたと確信しています。 どれくらいの時間がかかるかわかりませんが、これからも直していきます。 以前は実装の詳細に触れていなかったため、時間がかかる場合があります

ごめんなさい。 私はたくさんの旅行をしてきました:)これは本当に難しい問題のように聞こえます。

@segoddnjaこれをあなたに割り当てますが、あなた自身でこれに多くの時間を

スクロールが停止する原因となる可能性のある何かが事前に選択に発生しているかどうか知りたいです。 スクロールが停止する原因となる可能性のあるプロパティ/属性の割り当ての順序があるのではないかと思います。

これは興味深い現象です。次の手順が発生したとしましょう。

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

1. 与えられた6つのオプション
2. 最初のオプションを選択します
3. 6番目のオプションを選択します
4. 最初のオプションの選択を解除します

選択されているのは6番目のオプションだけですが、スクロールは引き続き最初のオプションに焦点を合わせています。

とにかく、Chromeは、割り当てられていない場合ではなく、割り当てられている場合にのみ最初に選択された値までスクロールするようです。

多分これは関連しています。

@nhunzakerうん、ありがとう、あなたは正しい方向に考えています。 ブラウザは、選択したプロパティをtrueにした最初のオプションまでスクロールします。 それ以上の変更はスクロールを引き起こしません。

だから、私が今発見したこと。 Reactは裸のselestノードを作成し、それにオプションを追加します。 裸のselectはmultipe=false 、最初に追加されたオプションは自動的にselected=true取得します。 したがって、さらに複数モードに切り替えてオプションの選択を更新しても、スクロールは発生しません。

オプションを追加する前に、 multiple属性値を設定する必要があると思います。