-
Notifications
You must be signed in to change notification settings - Fork 800
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
React dismissable layer @1.0.5 bug #2597
Comments
See #1241 (comment): this is probably a case of mismatched versions of @radix-ui/react-dismissable-layer, rather than a bug specific to version 1.0.5. |
Going to close this one, canonical issue: #1088 |
We do not have duplicate versions of
Also tried adding to vite.config.mjs like explained here
And clearing vite cache, but no dice |
Ok so what happened for us was that these conditions never were met primitives/packages/react/dismissable-layer/src/DismissableLayer.tsx Lines 124 to 129 in 660060a
The reason being that we nested two Wwhere This in turn made this code: primitives/packages/react/dismissable-layer/src/DismissableLayer.tsx Lines 124 to 129 in 660060a
pointer-events: none .
I really need to work on other stuff so sorry for not having a repro, but maybe this helps more than not saying anything? Here's the @radix-ui-react-dismissable-layer-npm-1.1.0-6cdf2af8cf.patch diff --git a/dist/index.mjs b/dist/index.mjs
index 55f6c96529982098820fa8072c5069591d3abf36..b6441d8e7091022b842f359e4fc4ff1655fb6e85 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -86,7 +86,11 @@ var DismissableLayer = React.forwardRef(
return () => {
if (!node) return;
context.layers.delete(node);
- context.layersWithOutsidePointerEventsDisabled.delete(node);
+ const deletedAPointerEventsLayer = context.layersWithOutsidePointerEventsDisabled.delete(node);
+ if(!context.layersWithOutsidePointerEventsDisabled.size && deletedAPointerEventsLayer) {
+ // Work around https://github.com/radix-ui/primitives/issues/2597#issuecomment-2312839713
+ ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+ }
dispatchUpdate();
};
}, [node, context]);
Then add to package.json for anyone else running into this:
|
Bug report
The dom body element receives the
pointer-events: none
when AlertDialog is opened and remains after closing. This causes the whole page to freeze and not respond to any user interaction.Current Behavior
I have tested it to be happening on AlertDialog component only when using the api to open and close the dialog ie.
open
andonOpenChanged
props. It works fine when using Trigger componentExpected behavior
Let user interaction not be blocked after interacting with the following components AlertdDialog, HoverCard, Popover and Toast
Suggested solution
I traced the issue to come from the @radix-ui/react-dismissable-layer library, version 1.0.5 Precisely.
I have tried version 1.0.3 of @radix-ui/react-dismissable-layer and the bug does not happen on that version.
I had to downgrade other components that use @radix-ui/react-dismissable-layer like AlertdDialog, HoverCard, Popover and Toast to previous versions that depend on 1.0.3 to have it working again.
Can the issue be found and fixed in version 1.0.6 of @radix-ui/react-dismissable-layer and maintained to never happen again?
Additional context
It relates to this other issue #1241
The text was updated successfully, but these errors were encountered: