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.

Sign up for GitHub

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

Jump to bottom

fix dialog event propagation #422

Merged
merged 2 commits into from
Apr 21, 2021
Merged

fix dialog event propagation #422

merged 2 commits into from
Apr 21, 2021
+183 −4

Conversation

RobinMalfait
Copy link
Member

  • re-export the screen utility for quick debugging purposes
  • stop event propagation when clicking inside a Dialog

@vercel
Copy link

vercel bot commented Apr 21, 2021 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-vue – ./packages/@headlessui-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/4SiGR6kYWFB9Sg9CwY8kgy31f1w4
✅ Preview: https://headlessui-vue-git-fix-dialog-event-propagation-tailwindlabs.vercel.app

headlessui-react – ./packages/@headlessui-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/G4bgrpJ84YJUu3qNi2VSf5iPRzKK
✅ Preview: https://headlessui-react-git-fix-dialog-event-propagation-tailwindlabs.vercel.app

@RobinMalfait RobinMalfait mentioned this pull request Apr 21, 2021
Closed
@RobinMalfait RobinMalfait merged commit c8b297b into develop Apr 21, 2021
@RobinMalfait RobinMalfait deleted the fix-dialog-event-propagation branch April 21, 2021 12:13
@RobinMalfait RobinMalfait mentioned this pull request Apr 22, 2021
Merged
RobinMalfait added a commit that referenced this pull request Apr 26, 2021
@RobinMalfait @shuvroroy
@alexnault @shoeyn @MichaelDeBoey
Next release (#431)
ce23ede 
* Fixed typos (#350)

* chore: Fix typo in render.ts (#347)

* Better vue link (#353)

* Better vue link

* add better React link

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

* Enable NoScroll feature for the initial useFocusTrap hook (#356)

* enable NoScroll feature for the initial useFocusTrap hook

Once you are using Tab and Shift+Tab it does the scrolling.

Fixes: #345

* update changelog

* Revert "Enable NoScroll feature for the initial useFocusTrap hook (#356)"

This reverts commit 19590b0.

Solution is not 100% correct, so will revert for now!

* Improve search (#385)

* make search case insensitive for the listbox

* make search case insensitive for the menu

* update changelog

* add `disabled` prop to RadioGroup and RadioGroup Option (#401)

* add `disabled` prop to RadioGroup and RadioGroup Option

Also did some general cleanup which in turn fixed an issue where the
RadioGroup is unreachable when a value is used that doesn't exist in the
list of options.

Fixes: #378

* update changelog

* Fix type of `RadioGroupOption` (#400)

Match RadioGroupOption value types to match modelValue allowed types for RadioGroup

* update changelog

* fix typo's

* chore(CI): update main workflow (#395)

* chore(CI): update main workflow

* Update main.yml

* fix dialog event propagation (#422)

* re-export the `screen` utility for quick debugging purposes

* stop event propagation when clicking inside a Dialog

Fixes: #414

* improve dialog escape (#430)

* Make sure that `Escape` only closes the top most Dialog

* update changelog

* add defaultOpen prop to Disclosure component (#447)

* add defaultOpen prop to Disclosure component

* update changelog

Co-authored-by: Shuvro Roy <shuvro.roy@northsouth.edu>
Co-authored-by: Alex Nault <nault.alex@gmail.com>
Co-authored-by: Eugene Kopich <github@web2033.com>
Co-authored-by: Nathan Shoemark <n.shoemark@gmail.com>
Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
@ralrom
Copy link

ralrom commented Apr 27, 2021

Am I wrong in believing that this is causing problems with inputs inside dialogs? For example, I have a file upload button that doesn't seem to work when placed in a headlessui Dialog

@mpsijm
Copy link

mpsijm commented Feb 11, 2022 •
edited
Loading

I have a different use case that breaks due to this "fix". I use a context menu from react-contexify, which closes when clicking anywhere in the window: https://github.com/fkhadra/react-contexify/blob/master/src/components/Menu.tsx#L208
However, the event.stopPropagation() in the Dialog (specifically, this one) prevents the context menu from closing when I open it from inside a modal.

As a workaround, I can call contextMenu.hideAll in the onClick function of my Dialog body, but it feels like that should not be necessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@RobinMalfait @ralrom @mpsijm