Transition show and close on Safari mobile - iOS 14.5

[ludwig-pro]

What package within Headless UI are you using?

headlessui/react

What version of that package are you using?

v0.3.2-d950146

What browser are you using?

Safari - Mobile - iOS 14.5

Reproduction repository

https://github.com/ludwig-pro/osteopathie-animale-bordeaux-v2

File with the bug

https://github.com/ludwig-pro/osteopathie-animale-bordeaux-v2/blob/main/src/components/AnimalSection/AriaSelectMenu.js

Video

⚠️

When I tap, the select menu who is use <Transition /> open / close immediately (it flashes rapidly on the video). if I long press, menu show correctly

RPReplay_Final1618170213.MP4

if I don't use transition component, everything work correctly

        {state.isOpen && (
          <div className="absolute mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
            <ListBoxPopup {...menuProps} state={state} />
          </div>
        )}

[ironmanvim]

Same issue in other mobile views too.
Tested with Firefox Responsive Design Mode.
I'm using @headlessui/react: 1.2.0

onClose is calling immediately after setting the isOpen: true

[RobinMalfait]

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

I'm struggling to install your reproduction repo (

) probably because of outdated packages. I also noticed that you both have yarn.lock and package-lock.json so not sure which package manager I'm supposed to use in your project.

That said, I currently see a few options:

1. This is either related to gatsby moving focus (See: Click outside logic is broken for Popover in Gatsby #1007 (comment))
2. It is related to the "outside click" behaviour that was not working as expected on iOS and is fixed: Improve outside click support #1175

If this is still an issue for you, can you test by installing the latest insiders build for Headless UI? npm install @headlessui/react@insiders. If it is still an issue and still relevant for your use case, please open a new issue with an updated reproduction repo or codesandbox.