Calendar: fix tab ordering when we use enableTime and doneButtonShow #8457
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Native select in CustomSelect has -1 tabIndex to fix issues in test where userEvent.tab moves focus to native select inside CustomSelect Set tabIndex to -1 on CustomScrollView of CustomSelect otherwise when we hit tab with opened dropdown which has a lot of options those creates scroll inside CustomScrollView the focus goes first to the CustomScrollView which dissapears as dropdown is closed, after that the focus goes to the document.body which is unexpected
andrey-medvedev-vk
changed the title
|
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. |
size-limit report 📦
|
e2e tests
|
👀 Docs deployed
Commit a5573b4 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
Исправляем поведение CalendarTime и логику фокуса.
Сейчас, если мы рендерим Calendar со временем, но без кнопки "Готово", то при проходе по Calendar с помощью Tab мы застреваем на инпуте с минутами.
С одной стороны это из-за того, что мы не учли, что кнопки "Готово" может не быть в #8002
Но даже если это исправить, можно заметить, что фокус хоть и переходит из инпута минут куда-то, но он явно не попадает на следующий интерактивный элемент при одном нажатии Tab. Только со следующего нажатия Tab фокус действительно переходит дальше.
Оказалось, что причина в том, что в CustomSelect, когда дропдаун с опциями открыт, и имеет много элементов, так что появляется скролл, то при нажатии Tab мы фокусируемся на дропдауне. Но, из-за того, что дропдаун закрывается сразу после нажатия Tab, то фокус переходит на
document. Так как это происходит очень быстро, то даже не понятно что такой эффект вообще есть.Мы частично решили эту проблему в #8002 путём ручного управления фокусом, и это помогло в связке | инпут Часов | инпут Минут | кнопка Готово |, но дальнейший переход на следующий в порядке DOM интерактивный элемент всё равно сломан.
Решил установки tabIndex -1 на CustomScrollView внутри CustomSelectDropdown.
В CustomSelect добавил tabIndex -2 для нативного селекта, чтобы в тестах фокус не попадал на этот селект.
Изменения
Release notes