search

CaptainCodeman / svelte-headlessui

HeadlessUI components for Svelte
https://captaincodeman.github.io/svelte-headlessui/
MIT License
554 stars 25 forks source link

Missing `initialFocus` ref for Dialog #5

Closed phenomen closed 1 year ago

phenomen commented 1 year ago

https://headlessui.com/react/dialog#managing-initial-focus

I've used it to automatically focus on the top element (header/title) of the Dialog when modal window is larger than mobile viewport but it's also used for accessibility.

CaptainCodeman commented 1 year ago

Thanks, I've changed it so it focuses on the first focusable element and will look at making it configurable - I'm wondering if it might be best to use the autofocus attribute as the way to define it?

The autofocus global attribute is a Boolean attribute indicating that an element should be focused on page load, or when the <dialog> that it is part of is displayed.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

phenomen commented 1 year ago

That will do. I've added <input hidden /> to the top of modal so it auto-scroll there.