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 clicks in portals in React dialog closing dialog #989

Closed
wants to merge 1 commit into from
Closed

Fix clicks in portals in React dialog closing dialog #989

wants to merge 1 commit into from

Conversation

dcastil
Copy link
Contributor

@dcastil dcastil commented Dec 14, 2021

When rendering portals inside a React Dialog (e.g. a dropdown using Popper.js), clicks inside that portal are detected as clicks outside die dialog and causing the dialog to be closed.

This PR is an attempt to fix that and treating elements inside portals as inside the dialog.

However, there are some problems which make me unsure whether this particular PR should really be merged:

  1. The new onMouseDown prop the dialog owns is probably a breaking change which makes this difficult to release
  2. If clicks on elements inside portals are detected as inside the dialog, they should also be able to receive focus

Let me know whether you think it makes sense for me to continue working on this and address the issues above or whether we should just close this. 😊

Related: #432

@vercel
Copy link

vercel bot commented Dec 14, 2021

@dcastil is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

@dcastil dcastil changed the title Fix clicks in portals in React dialog triggering onClose callback Fix clicks in portals in React dialog closing dialog Dec 14, 2021
@RobinMalfait RobinMalfait self-assigned this Feb 24, 2022
@RobinMalfait
Copy link
Member

Hey! Thank you for your PR!
Much appreciated! 🙏

If you use our Portal component we expose from Headless UI and nest it inside your Dialog then it should already work as expected.

There is an issue if you are using third parties that render their own Portals, but I don't think this is the correct fix for it. I have an idea written down to actually fix third party clicks.

I appreciate the PR though!

@dcastil dcastil deleted the fix-react-portal-in-dialog-not-working branch February 24, 2022 17:31
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.

2 participants