active border / drop shadow on dialog transition

[jonathanstanley]

When a dialog is animating, a border appears temporarily (sometimes). You can see it around the button on this dialog on the current site https://headlessui.dev/react/dialog:

Screen.Recording.2021-12-16.at.5.34.58.PM.mov

here is a screenshot was able to get for the instant the border shows:

In some cases, I'm finding this active border / drop shadow persists until i click somewhere (and sometimes even shows multiple borders). In those cases, it also disappears when I click off the page to view source.

this looks like a glitch to me. perhaps there is a way to control it, but I can't find it because it shows even in the demo.

[RobinMalfait]

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

The reason this happens on the documentation site is sort of by design.
What happens is that the button will receive focus, therefore the ring will show. The reason the ring goes away, is that the iframe this example is running in, stole the focus from the main page. We don't want that, so we restore the focus to where the page initially loaded (usually document.body).

Normally when a Dialog is open, you don't want to be able to interact with the page content behind it, and if you want to do that then you would have to close the Dialog.

So now we basically cheat so that you can see the page AND see the Dialog (purely as a demo).

Hope that helps.

---

The reason why you sometimes see the line "persist" on click until you click away is because that button stays focused.

[jonathanstanley]

Thank you very much for the quick and helpful response @RobinMalfait !

The fix

Admittedly not the most elegant, but below gets it done. Would definitely be interested in better solutions if anyone has one. In my case (using React/Gatsby) the focus goes to the first link element.

<Transition.Child><div>
  {/* absorb/hide the focus from transition to an empty element*/}
  <GatsbyLink to="#"></GatsbyLink>
  {/* regular content below */}
  <GatsbyLink to="/example">Example</GatsbyLink>
</div></Transition.Child>

alternatively, could add focus:outline-none and avoid the extra link (though this may introduce unintended consequences)

<Transition.Child><div>
  <GatsbyLink to="/example" className="focus:outline-none">Example</GatsbyLink>
</div></Transition.Child>