focus-visible breaking focusTrap 🚨
🚨🚨🚨 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