Open any app you've built with AI.
Find a dropdown. Open it. Now click anywhere else on the page.
Did it close?
Now press Escape.
Did it close?
If the answer to either is no — congratulations, you shipped an interaction bug that every single user will hit. Not a power user. Not an edge case. Everyone.
This is the most common UI bug I see in every codebase I interact with. Vibe coded or not. Solo builder or big engineering team. The dropdown opens fine. Nobody built the dismissal.
AI generates the dropdown in seconds. What it doesn't generate is the part where it actually behaves like a real UI element.
Here's the fix. One composable or hook. Handles click-outside and Escape. Cleans up after itself on unmount.
One line to use:
useClickOutside(dropdownRef, () => { isOpen.value = false })
Dropdowns. Context menus. Popovers. Modals. Slide-overs. If a user can open it, clicking outside it should close it. That's not a nice-to-have. That's a contract.
This is one of 8 patterns I teach in my new course — Building Durable UIs in the Era of Vibe Coding. State placement. Click-outside dismissal. Form draft persistence. Navigation contracts. The decisions AI can't make for you.
→ sailscasts.com/courses/durabl…
English
