fix(FocusTrap): add mutation observer #7041
Conversation
Добавил MutationObserver для отслеживания добавления/удаления элементов внутри компонента обернутого FocusTrap
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
e2e tests |
👀 Docs deployed
Commit 6245db1 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #7041 +/- ##
==========================================
+ Coverage 83.51% 83.55% +0.04%
==========================================
Files 351 351
Lines 10510 10532 +22
Branches 3486 3489 +3
==========================================
+ Hits 8777 8800 +23
+ Misses 1733 1732 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Шикарно!
Ещё было бы здорово проверить что происходит с фокусом элемента, который перерендерился.
Вот, например, есть форма внутри попапа, которую контролирует FocusTrap. FocusTrap у нас сейчас следит, чтобы мы не вышли за пределы попапа и перекидывает фокус на первый интерактивны элемент внутри FocusTrap если мы потенциально собираемся вывалиться за пределы FocusTrap.
А что если пользователь дошел фокусом до какого-то элемента, совершил какое-то действие и форма перерендерилась, в том числе и элемент на котором был фокус, куда уйдёт фокус? Плохо будет, если фокус просто пропадёт из поля зрения.
По хорошему бы либо вернуть фокус на тот элемент на котором он был после мутации, либо на первый элемент внутри FocusTrap. И сделать это сразу после мутации, чтобы не заставлять пользователя нажимать Tab, чтобы понять где примерно сейчас фокус.
Что думаешь? Поправь меня, пожалуйста, если я не прав.
|
@mendrew Согласен с тобой, добавил установку фокуса после мутации |
|
@inomdzhon написал два теста, которые затрагивают новый функционал |
Переделал тесты на React-way тестирование
inomdzhon
added
the
patch
h2. Описание Сейчас в FocusTrap если children не меняется, то может и не происходить перерасчёт focusableNodesRef.current. Например, такое происходит в модалке, если мы динамически добавляем/удаляем инпуты. h2. Изменения Добавил MutationObserver для отслеживания добавления/удаления элементов внутри компонента обернутого FocusTrap. При изменении содержимого происходит перерасчет focusableNodesRef. Таким образом поддерживается актуальное состояние списка нод. Вручную потыкал компоненты где используется FocusTrap - все работает
h2. Описание Сейчас в FocusTrap если children не меняется, то может и не происходить перерасчёт focusableNodesRef.current. Например, такое происходит в модалке, если мы динамически добавляем/удаляем инпуты. h2. Изменения Добавил MutationObserver для отслеживания добавления/удаления элементов внутри компонента обернутого FocusTrap. При изменении содержимого происходит перерасчет focusableNodesRef. Таким образом поддерживается актуальное состояние списка нод. Вручную потыкал компоненты где используется FocusTrap - все работает
h2. Описание
Сейчас в FocusTrap если children не меняется, то может и не происходить перерасчёт focusableNodesRef.current.
Например, такое происходит в модалке, если мы динамически добавляем/удаляем инпуты.
h2. Изменения
Добавил MutationObserver для отслеживания добавления/удаления элементов внутри компонента обернутого FocusTrap. При изменении содержимого происходит перерасчет focusableNodesRef. Таким образом поддерживается актуальное состояние списка нод.
Вручную потыкал компоненты где используется FocusTrap - все работает
---
Т.к. в master тесты писались уже с удалённой строчкой const { keyboardInput } = useContext(AppRootContext); (см. #6955?files=packages/vkui/src/components/FocusTrap/FocusTrap.tsx), а в 6.1-stable она ещё есть, обернул FocusTrap в AppRootContext.Provider.
Co-authored-by: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Описание
Сейчас в FocusTrap если children не меняется, то может и не происходить перерасчёт focusableNodesRef.current.
Например, такое происходит в модалке, если мы динамически добавляем/удаляем инпуты.
Изменения
Добавил MutationObserver для отслеживания добавления/удаления элементов внутри компонента обернутого FocusTrap. При изменении содержимого происходит перерасчет focusableNodesRef. Таким образом поддерживается актуальное состояние списка нод.
Вручную потыкал компоненты где используется FocusTrap - все работает
MutationObserver проверил на поддержку в браузерах:
