Fix restoring focus to correct element when closing `Dialog` component

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

https://headlessui.com

MIT License

25.81k stars 1.07k forks source link

Fix restoring focus to correct element when closing `Dialog` component #3365

Closed RobinMalfait closed 2 months ago

RobinMalfait commented 2 months ago

Right now, we have to record when a click / mousedown / focus event happens on an element. But when you click on a non-focusable element inside of a focusable element then we record the inner element instead of the outer one.

This happens in this scenario:

<button>
  <span>click me</span>
</button>

This solves it by resolving the closest focusable element (and we fallback to the e.target as a last resort)

Fixes: #3320

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 5, 2024 1:24pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 5, 2024 1:24pm