React: Выбрать несколько - не переходить к выбранному элементу (элементам)

Созданный на 17 июл. 2018  ·  12Комментарии  ·  Источник: facebook/react

ошибка
В response @ 15 мы могли установить «значение» или «defaultValue», и выбранный элемент прокручивался в поле зрения.
https://codesandbox.io/s/6vx637r10n

Но в react @ 16 это не работает.
https://codesandbox.io/s/7jqqz3zmo1

DOM Bug good first issue (taken)

Самый полезный комментарий

Добрый день. Думаю, я определил, что вызывает такое нежелательное поведение, но мне нужно больше времени, чтобы найти правильное решение. Итак, если никто не возражает, я хотел бы заняться этим вопросом и выполнить свое первое обязательство по проекту.

Все 12 Комментарий

Интригующе! Интересно, изменилось ли назначение выбранного элемента в React 16.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

К сожалению, я не смог найти такой большой разницы. (Извините за отсутствие помощи, но мне интересно посмотреть, как это будет решено, или смотрел ли я не в том месте).

Без проблем! Это первое, куда я бы посмотрел. Одно различие, которое я вижу, заключается в том, что React 16.x назначает defaultSelected после selected :

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

Интересно, скидывает ли это React. Я сам пока не могу протестировать, но мне интересно, заметите ли вы изменение прокрутки, если установите точку останова и пройдете через этот цикл.

Привет, Натан, я изучаю эту проблему несколько часов, я установил react 15.6.2 и 16.3.2, я смог следить за выполнением программы с некоторыми точками останова, похоже, функция:

updateOptions

установит для одного из своих атрибутов option значение true (хорошо) также selectedIndex имеет значение 4 (также хорошо), но отсюда я не могу понять, почему элемент не печатается так, как должен, потому что его параметры вроде в порядке. Также я не видел разницы между назначением defaultSelected до selected .

Когда я запускал это через отладчик, selected и defaultSelected (в зависимости от того, что вы используете) оба правильно установлены как атрибуты true в соответствующем элементе <option> DOM .

В примере 16.3.2 он по-прежнему выбирает переданное значение, просто не прокручивается до него. Можно ли еще где-нибудь посмотреть в рендерере, где этот атрибут значения оценивается / проверяется и там поведение меняется? Я покопался, но нужно разобрать много кода.

Не уверен, насколько это помогает, но я провел небольшой тест, используя ссылку @ kre0n, чтобы найти сборку React, в которой впервые

Из того, что я наблюдал, все, начиная с выпуска 16.0.0 и после 15.6.2 работает, я решил изучить все предварительные сборки, начиная с 16.0.0-альфа и до тех пор, пока проблема не начала

Я обнаружил, что при выборе перестала прокручиваться до «значения», предоставленного элементу выбора в сборке 16.0.0-alpha.3 .

Я не проверял, было ли это исправлено в более поздней сборке, но я полагал, что первая точка отказа может каким-то образом помочь.

Добрый день. Думаю, я определил, что вызывает такое нежелательное поведение, но мне нужно больше времени, чтобы найти правильное решение. Итак, если никто не возражает, я хотел бы заняться этим вопросом и выполнить свое первое обязательство по проекту.

Обновить. Похоже, что проблема немного сложнее, чем я думал. Я уверен, что такое поведение связано с архитектурой React Fibre. Я буду продолжать попытки исправить это, хотя не знаю, сколько времени это может занять. Поскольку я раньше не вдавался в подробности реализации, это может занять некоторое время.

Сожалею. Я много путешествовал :) Похоже, это действительно сложная проблема.

@segoddnja Я тратить много времени на это самостоятельно. Давайте попробуем придумать гипотезу, и, возможно, мы сможем вместе работать над ее решением.

Мне любопытно, происходит ли что-то с выбранным раньше времени, что может привести к остановке прокрутки. Интересно, есть ли порядок присвоения свойств / атрибутов, который мог бы измениться, что привело бы к остановке прокрутки.

Вот интересный феномен, допустим, происходят следующие шаги:

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

  1. Дано 6 вариантов
  2. Вы выбираете первый вариант
  3. Вы выбираете 6 вариант
  4. Вы отменили выбор первого варианта

Прокрутка по-прежнему сосредоточена на первом варианте, хотя выбран только шестой вариант.

Похоже, что Chrome в любом случае прокручивает только до первого выбранного значения, когда _assigned_, а не _unassigned.

Может это связано.

@nhunzaker Ага, спасибо, ты думаешь в правильном направлении. Браузер прокручивается до первого варианта, для которого выбрано свойство true. Дальнейшие изменения не вызывают прокрутки.

Итак, что я обнаружил сейчас. React создает пустой узел selest и добавляет к нему параметры. Поскольку в пустом select есть multipe=false , первая добавленная опция автоматически получает selected=true . Таким образом, дальнейшее переключение в несколько режимов и выбор обновленных опций не вызывают его прокрутки.

Я думаю, что перед добавлением параметров необходимо установить значение атрибута multiple .

Была ли эта страница полезной?
0 / 5 - 0 рейтинги