Skip to content

focus-visible breaking focusTrap 🚨

Compare
Choose a tag to compare
@renatodeleao renatodeleao released this 09 Jun 23:41
· 146 commits to master since this release

🚨🚨🚨 This release was published without the build code, use the next patch.🚨🚨🚨
Another day, another exception.

On a project of mine i've added focus-visible polyfill as to match a ui requirement on focus styles and suddenly the dialog was broken. focus-visible polyfill adds attributes to elements and attaches focus and blur events to the document: those attribute changes were triggering mutations, and the events were setting document.activeElement to body for a brief moment. Our mutationObserver was catching that brief moment as "the focused item was removed/hidden and it's not focus anymore, do the focus trap magic to find the next focusable element" But the next focusable element to body is always the first focusable element of the dialog, so we're stuck in a loop.

Fix was just moving our observer verifications into a setTimeout() call, moving them to the next queue, after the focus-visible and other focus attaching plugins/polyfills done their things