Agent skill · software engineering · aiskillstore
animated-focus
This document captures learnings from fixing keyboard navigation issues when floating components (Select, DropdownMenu, Popover) have CSS open/close animations.
Why this skill is useful
Provides a retry mechanism for focus on animated elements, which is a specific solution not commonly found in general programming resources.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Focus Management with CSS Animations This document captures learnings from fixing keyboard navigation issues when floating components (Select, DropdownMenu, Popover) have CSS open/close animations. The Problem When floating content elements have CSS animations that start at opacity: 0 (like Tailwind's animate-in fade-in-0), the browser may reject element.focus() calls because the element is invisible. Symptoms Component opens correctly with mouse clicks Keyboard navigation (arrow keys, Escape) doesn't work after opening with keyboard Works fine in demos without animation classes Broken in demos with animation classes Root Cause 1. CSS animations like fade-in-0 start the element at opacity: 0 2. When focus() is called immediately after render, the element is still invisible 3. Browser rejects focus on invisible elements 4. Focus stays on the trigger button instead of moving to content 5. Keyboard events go to trigger (which does nothing when open) instead of content Evidence from Console Debugging The Solution Implement a retry mechanism for focus that allows the animation to progress past opacity: 0 before giving up. JavaScript Implementation Key Points 1. Use requestAnimationFrame first - Ensures CSS has been applied before attempting focus 2. Check document.activeElement - Verify if focus actually succeeded 3. Retry with delays - 20ms intervals allow animation to progress 4. Limited attempts - 5 retries = 100ms max wait, enough for typical animations 5. Apply to all focus functions - Both focusElement(element) and focusElementById(id) need this pattern Functions Updated floating.js:focusElement(element) - Used by SelectContent floating.js:focusElementById(elementId) - Used by DropdownMenuContent Testing Added "With Animations" sections to test demo pages and corresponding Playwright tests. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/animated-focus