Dialog hideOnInteractOutside not propagating events #2089
-
|
Hi there, today we're facing a problem when dealing with the property Our use case consists of dispatching some notifications above the Snippet: // Prevent closing the dialog when clicking on elements
// over the dialog (e.g.: notifications, tooltips, etc)
(event: Event): boolean => {
const path = event.composedPath();
return (
path.find((element) => {
if (element instanceof HTMLElement) {
return window.getComputedStyle(element).position === "fixed";
}
return false;
}) === undefined
);
}Steps to reproduce the bug
Do we have any workaround to fix this issue? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
The Dialog behaves like that because of its You can temporarily disable the const [modal, setModal] = useState(false)
<Dialog backdrop modal={modal} hideOnInteractOutside={...}>
<Button
onClick={() => {
setModal(false)
toast.success("Foo", { onClose: () => setModal(true) })
}}
/>
</Dialog>However, the notification element should ideally be considered a nested non-modal dialog while the original Dialog should keep its |
Beta Was this translation helpful? Give feedback.
-
|
Should be fixed by #2339 |
Beta Was this translation helpful? Give feedback.
The Dialog behaves like that because of its
modalstate. Users can't interact with elements outside a modal dialog.hideOnInteractOutsideonly controls whether the Dialog will hide.You can temporarily disable the
modalstate while showing the notification with something like this:However, the notification element should ideally be considered a nested non-modal dialog while the original Dialog should keep its
modalstate. We need a better way to handle…