[Bug]: Рассинхрон в CustomSelect #8334
Comments
5 tasks
andrey-medvedev-vk
added a commit
that referenced
this issue
Mar 26, 2025
…ation (#8365) В #8334 видно, что при асинхронной загрузке опций есть лаг между тем когда `fetching` уже не `true`, но опций ещё нет и мы в дропдауне, вместо лоадера, выводим `Ничего не найдено`. Опций нет по той причине, что рендерим мы опции из локального стейта, который мы синхронизируем с props.options, а синхронизируем мы через `useEffect`. Получается, что должен сработать `useEffect` прежде чем новые, загруженные опции пользователя, переданные через `props.options`, попадут в рендер дропдауна. - Убран локальный стейт `options`, вместо этого `options` это результат фильтрации `props.options`, обёрнутой в `useMemo`. - Изменилась логика проверки необходимости вызова `onChange` при клике на опцию из списка. Раньше она была основана на проверке по индексам опций в списке, типа `selectedOptionIndex`, индекс брался из`options`, отфильтрованной версии `props.options`. Теперь такая логика не работает для принятия решения по вызову `props.onChange`, потому что `options` фильтруются быстрее, а значит ссылаться на опцию по индексу опасно, индекс опции уже может поменяться между кликом по опции и моментом, когда мы начнём принимать решение о вызове `onChange`. Переехали на проверку по значению `nativeSelectValue`/`prevNativeSelectValue`, а не по индексу. Исправлена ошибка, что при повторном поиске ранее выбранной опции она на некоторое время подсвечивается и потом сбрасывается. Шаги для воспроизведения. - Выбрать опцию из списка, - Переместить мышку на инпут - Открыть дропдуан с клавиатуры (в примере выше путём ввода текста) - Появится список и выбранная опция будет в фокусе, а потом фокус пропадёт. Связано с тем, что когда у нас мышка на инпуте, то после открытия дропдауна тригерится событие onMouseLeave причём target у него это та самая опция, бывшая в фокусе, а relatedTarget (target на который курсор перешёл) это инпут. А на onMouseLeave у нас завязана логика подсветки элемента в фокусе (программный ховер). Поправилено, с помощью проверки, что мышка не двигалась в момент события onMouseLeave.
| ✅ v7.2.0 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Описание
При переходе на createRoot реакт стал успевать отрисовывать состояние компонента, когда options переданы новые (и они есть), а отрисовывается (на 1 мс) так будто их нет.
Возможно это из-за того, что renderDropdown обернут в useMemo, который не зависит от пропа options напрямую. (Зависит от одноименного стейта, который обновляется позже). Получаем ситуацию, когда список новый в компоненте есть, а рендер происходит со старыми данными.
2025-03-06.17.41.01.mov
Версия
7.0.0
В каких браузерах воспроизводится проблема?
Chrome
Шаги воспроизведения
No response
Ожидаемое поведение
No response
Скриншоты
No response
Пример с воспроизведением
https://codesandbox.io/p/sandbox/currying-leaf-7pql32?file=%2Fsrc%2FApp.js%3A10%2C37
The text was updated successfully, but these errors were encountered: