Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: Dialog blocks click event listener

See original GitHub issue

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.4.1

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/bug-headless-ui-dialog-click-outside-8n3jh

Describe your issue

Click event listener is not emitted on dialogs.

The problem with this is that I’m trying to make a dropdown that closes when clicking outside. To do that I want to add a global event listener for the click event, but it’s not being triggered.

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:7

Top GitHub Comments

11reactions

RobinMalfaitcommented, Mar 2, 2022

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

This is done on purpose. You should think of a Dialog as a separate page where you shouldn’t interact with things behind it. Putting an event listener on the document is technically interacting with things behind the Dialog.

If you want to implement a dropdown that closes when you click outside, then you should be able to use our Menu component that has this functionality outside of the box.

Here is an example: https://codesandbox.io/s/bug-headless-ui-dialog-click-outside-forked-21t72y?file=/src/App.vue

1reaction

hamza512bcommented, Feb 6, 2022

The Dialog component blocks click event by default: Vue: https://github.com/tailwindlabs/headlessui/blob/6fc28c610f14a3ab88a425cf97a67cee9bcb8e71/packages/%40headlessui-vue/src/components/dialog/dialog.ts#L224-L226

React: https://github.com/tailwindlabs/headlessui/blob/6fc28c610f14a3ab88a425cf97a67cee9bcb8e71/packages/%40headlessui-react/src/components/dialog/dialog.tsx#L285-L295

And unfortunately we can not override it, because these default props are destructed after the actual props we pass to the component: Vue: https://github.com/tailwindlabs/headlessui/blob/6fc28c610f14a3ab88a425cf97a67cee9bcb8e71/packages/%40headlessui-vue/src/components/dialog/dialog.ts#L250

React: https://github.com/tailwindlabs/headlessui/blob/6fc28c610f14a3ab88a425cf97a67cee9bcb8e71/packages/%40headlessui-react/src/components/dialog/dialog.tsx#L324

For now as work around, I have used mousedown instead of click event.