Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Dialog unmounting problem due to incorrect transitioncancel event in the Transition component on Android #2071

Merged
merged 3 commits into from Dec 6, 2022

Conversation

RobinMalfait
Copy link
Collaborator

@RobinMalfait RobinMalfait commented Dec 6, 2022

This PR fixes an odd issue where the transitioncancel event was fired on Android devices and the transitionend event was never fired. Therefore the Transition component was never "done", which in turn means that the Dialog never unmounted because the internal OpenClosed state didn't change yet.

Removing the transitioncancel event handling altogether fixes this issue. This ensure that it now works on Android and still works on Safari, Chrome, iOS Safari, ...

The good part is that we didn't really do anything with the transitioncancel event anyway, we just removed all the active listeners.

Fixes: #2032

On Desktop Sarai, Chrome, and on mobile iOS Safari the
`transitioncancel` is never called on outside click of the Dialog.
However, on mobile Android Chrome it _is_ called, and the
`transitionend` is never triggered for _some_ reason.

According to the MDN docs:
> If the transitioncancel event is fired, the transitionend event will not fire.
>
> — https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event

When testing this, I never got into the `transitionend` when I got into
the `transitioncancel` first. But, once I removed the `transitioncancel`
logic, the `transitionend` code _was_ being called.

The code is now both simpler, and works again. The nice part is that we
never did anything with the `cancel` event. We marked it as done using
the `Reason.Cancelled` and that's about it.
@vercel
Copy link

vercel bot commented Dec 6, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Dec 6, 2022 at 4:20PM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Dec 6, 2022 at 4:20PM (UTC)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dialog won't unmount when dismissed while mobile keyboard is open
1 participant