Unexpected scroll to bottom of page when re-opening dialog

[sambauers]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Safari

Reproduction URL

I've provided a reduction here - https://replit.com/@sambauers/blur-jump-reduction

Note that the preview screen on Replit may not show the problem well, so it is better to demo it on the full preview here - https://blur-jump-reduction.sambauers.repl.co/

This reduction emulates the behaviour I'm seeing on my site here - https://rebeccabirch.au/ (click the email link in the top nav to trigger the dialog)

Describe your issue

I have a Dialog which includes Transitions for a background overlay, and the Dialog Panel as well.

I have found that on the second attempt to open the dialog using an anchor tag as the trigger, the dialog will open, but the page will scroll to the bottom behind the dialog.

This behaviour only occurs when the dialog has lost focus due to clicking on the dialog background, rather than being explicitly closed using a button within the dialog panel.

Reproduction steps are on the demo https://blur-jump-reduction.sambauers.repl.co/

[adamwathan]

Quick follow-up for whoever takes a look a this next — spent 2 minutes on it this morning on a hunch that this had to do with using a link instead of a button (should be a button for sure) but still happens even when using a button:

https://replit.com/@adamwathan/blur-jump-reduction#pages/index.tsx

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1716, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.