search

daisyui / react-daisyui

daisyUI components built with React 🌼
http://react.daisyui.com/
MIT License
943 stars 103 forks source link

autofocus on input in modal #258

Closed kaeon closed 1 year ago

kaeon commented 1 year ago

When opening a modal I can't get an autofocus on an input field. When I check in Chrome devtools and check "document.activeElement" I see the button that opened the modal is actually in focus.

I see a lot of solutions for bootstrap mentioning autoFocus={false} on the modal and true on the input but autoFocus is not here as a Modal propery. Any advice?

benjitrosch commented 1 year ago

Hi @kaeon, the button would still have focus since the user interacted with it last.

One easy implementation would be to get a ref to the input, and call focus() on it from inside a useEffect with the modal's open state in the dependency array.

For the time being, I'm not sure how I feel about adding an onOpen or onClose prop to the modal, but might reconsider in the future.

kaeon commented 1 year ago

I don't know what changed but adding autoFocus on an input field inside a modal actually works now