Returning focus after dialog is closed (with a transition) about headlessui

[RobinMalfait]

Hey!

The Dialog should already restore focus to the correct element once it closes without you having to do anything special.

The reproduction URL points to our template, can you update your reproduction URL so that we can take a look?

[widavies]

@RobinMalfait

Whoops! Try this link

[reinink]

Hey!

So this is actually intended behavior, as @RobinMalfait suggested. When the dialog is closed and unmounts, Headless UI automatically restores focus to the element that was focused at the point the dialog was opened.

In your particular use-case this focus restoration is happening basically at the exact same time as the code in your afterLeave callback, and Headless UI just happens to be winning out. You can fix this by delaying the focus of your input by one macrotask, which you can do using a setTimeout():

afterLeave={() => {
  setTimeout(() => inputRef.current.focus())
}}

Hope that helps!

[widavies]

@reinink Thanks! I had got it working with setTimeout having a delay specified, but I didn't realize it had a no-args call for one-macrotask as well, that's useful.

One interesting bit - this is working for me in the web browser (chrome), but not in Electron, any ideas?

[widavies]

This seems to be the root issue: electron/electron#28163