cengage
Modal/Drawer: Focus lock breaks with specific content
Describe the bug
With certain content in Modal, such as NavTabs, our focus lock utility doesn't trap keyboard navigation within the Modal. This is exemplified in our Drawer component which uses Modal and is reproducible when using it as a navigational element.
To Reproduce Steps to reproduce the behavior:
- Go to our documentation site.
- Navigate to Components >
Drawer - Click "Show Drawer" under "Navigation Example"
- Tab through the opened
Drawer
Expected behavior
The focus lock should allow the user to tab through the UI while staying within Drawer.
Additional context
It seems that the focusTrapElement variable in Modal.tsx causes the issue. An update made to Modal about a year ago regarding portals also caused animations to break and other oddities. This may have something to do with it in addition.
Nice fix!
A filtering function was added to the useFocusLock hook, which filters out invisible elements that were being included in the focusableItems.current array and preventing the focus from being properly locked on the modal window. ✅
Verified in: https://docs-preview-1467--upbeat-sinoussi-f675aa.netlify.app/ https://storybook-preview-1467--upbeat-sinoussi-f675aa.netlify.app/