Skip to content

[DismissableLayer] Fix pointer-events issues #1401

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
Merged
benoitgrelard merged 7 commits into from
May 19, 2022
Merged

[DismissableLayer] Fix pointer-events issues #1401

benoitgrelard merged 7 commits into from
May 19, 2022

Conversation

@benoitgrelard
Copy link
Contributor

@benoitgrelard benoitgrelard commented May 16, 2022

Fixes #1241
Fixes #1263

@benoitgrelard benoitgrelard marked this pull request as ready for review May 16, 2022 14:56
@benoitgrelard benoitgrelard requested a review from andy-hook as a code owner May 16, 2022 14:56
@benoitgrelard
Copy link
Contributor Author

benoitgrelard commented May 16, 2022

It's ready for a review, but I'd like to add some tests before we get it merged.

andy-hook
andy-hook reviewed May 17, 2022
View reviewed changes
@benoitgrelard benoitgrelard force-pushed the 1241-1263-dismissable-layer-pointer-events-fixes branch from 62ec2bd to 2511f31 Compare May 19, 2022 10:18
andy-hook
andy-hook reviewed May 19, 2022
View reviewed changes
cypress/integration/Dialog.spec.ts Outdated
} else {
cy.findByLabelText('count up').realTouch();
}
cy.findByLabelText('count up').should('not.eq', count);
Copy link
Contributor

@andy-hook andy-hook May 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this asserting what we expect? count is text but is cy.findByLabelText('count up') a button? will they always not be equal?

Copy link
Contributor Author

@benoitgrelard benoitgrelard May 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, good shout, let me check on that.

Copy link
Contributor Author

@benoitgrelard benoitgrelard May 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You were 💯 on the money here, great catch! I made it fail and it was still passing. Fixed now: 4d941df

andy-hook
andy-hook reviewed May 19, 2022
View reviewed changes
@benoitgrelard benoitgrelard merged commit 67f932f into main May 19, 2022
@benoitgrelard benoitgrelard deleted the 1241-1263-dismissable-layer-pointer-events-fixes branch May 19, 2022 12:49
This was referenced May 19, 2022
Merged
Closed
luisorbaiceta pushed a commit to luisorbaiceta/primitives that referenced this pull request Jul 21, 2022
@benoitgrelard @luisorbaiceta
[DismissableLayer] Fix pointer-events issues (radix-ui#1401)
4507d60 
* [DismissableLayer] Fix pointer-events issues

Fixes radix-ui#1241
Fixes radix-ui#1263

* PR feedback

* Add cypress tests

* testing flake

* Fix flake?

* Fix false positive

* Copy change
@brandalx
Copy link

brandalx commented Sep 25, 2023

i had same error so i tried to solve my way and this actually work
i did this by removing the style of pointer events like so:

` onClose: () => {
set({ type: null, isOpen: false });

// Delay restoring pointer events for 2 seconds
setTimeout(() => {
  document.body.style.pointerEvents = "auto";
}, 1000);

},
}));`

Note, i did it with small timeout to make sure that first all modal scripts are completed and then im manually removing that. Hope it helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@jjenzz jjenzz jjenzz left review comments

@andy-hook andy-hook andy-hook approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

5 participants

@benoitgrelard @brandalx @jjenzz @andy-hook