Stop propagation of keyboard navigation in a number of components #4501
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.
☑️ Resolves
#4406 was merged too early, it solved only problems with Arrows in general, but not ESC.
Arrows and ESC are used for keyboard navigation in some components. But the keydown event is not stopped. As a result, arrows and ESC not only manipulate such components but also are handled globally.
For example:
NcModal
:NcModal
should only close popover, but also close the ModalNcModal
To test add a global event listener and check console:
🖼️ Screenshots
🚧 Tasks
NcModal
.stop
modifier:NcAppSidebar
nameEditable
NcAppSidebarTabs
NcInputConfirmCancel
NcSelect
: add interceptor viamapKeydown
to stop propagation when select is openNcPopover
: manually add keydown event listener similar to how focus trap is added. It can be cleaner with an additional wrapper of popover contentNcPopover
:NcActions
NcEmojiPicker
NcUserBubble
NcColorPicker
NcDatetimePicker
Ignored:
NcHeaderMenu
:NcListItem
:Additional discussion
Both this PR and #4406 fixes Arrows navigation in Sidebar tabs being in a modal viewer. But they do it in a different way:
NcModal
from switching slides by any not stopped arrows outside the modalI'd keep both PRs but we can revert #4406.
For example, if we want to switch slides in Viewer when the focus is on Tab panel content div.
🏁 Checklist