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

0.9.4 Does not fully respect noBodyStyles & modal={false} #432

Closed
uhlenbrock opened this issue Sep 18, 2024 · 19 comments · Fixed by #438
Closed

0.9.4 Does not fully respect noBodyStyles & modal={false} #432

uhlenbrock opened this issue Sep 18, 2024 · 19 comments · Fixed by #438

Comments

@uhlenbrock
Copy link

As soon as the drawer is opened in 0.9.4, the style pointer-events: none is added to the <body> regardless of setting noBodyStyles and/or modal={false}.
@emilkowalski
Copy link
Owner

I'm unable to reproduce. Please provide a demo with reproduction.

@viktorrenkema
Copy link

I'm experiencing the same issue, here's a forked example file that shows the issue: https://codesandbox.io/p/devbox/drawer-snap-points-forked-3v7jlr?workspaceId=c111e220-c0ec-479d-81c2-c45f851464bd

  • noBodyStyles and modal={false} are both applied on the root
  • despite that, the body has pointer-events: none

@viktorrenkema
Copy link

Perhaps related to radix' radix-ui/primitives#2122, seemingly fixed by bumping @radix-ui/react-dialog to 1.1.1

@emilkowalski
Copy link
Owner

I might be missing something, but I'm able to interact with the background in the demo you provided and body doesn't have pointer-events: none for me 🤔
https://github.com/user-attachments/assets/8723e010-2fc6-43ef-a273-84d25e92284b

@viktorrenkema
Copy link

Very odd, I also screenshotted it when it was still not working:

image

I'll look into it and report back if I can repro again.

@yatskovanatoly
Copy link

yatskovanatoly commented Sep 21, 2024 •
edited
Loading

In @viktorrenkema demo i also found no problem regarding pointer-events on body, although i had a similar issue with Vaul, which was fixed by this hook from radix-ui/primitives#2122

 useEffect(() => {
    if (open) {
      // Pushing the change to the end of the call stack
      const timer = setTimeout(() => {
        document.body.style.pointerEvents = '';
      }, 0);

      return () => clearTimeout(timer);
    } else {
      document.body.style.pointerEvents = 'auto';
    }
  }, [open]);

my case uses custom Fab in document.body, but when the Drawer opens (no matter where it portals to - body or a custom container) the Fab stays on-top of the Drawer and won't receive any pointer-events.

setting modal={false} helped with 0.9.1, but i needed the overlay to be active as well.
seems like with 0.9.4 modal={false} doesn't make any difference on the discussed issue

@emilkowalski emilkowalski mentioned this issue Sep 23, 2024
Merged
@Eldrac
Copy link

Eldrac commented Sep 24, 2024 •
edited
Loading

Unfortunately still seeing this behavior on 0.9.6 with

    <Drawer
      open={true}
      modal={false}
      dismissible={false}
      noBodyStyles={true}

Example: https://codesandbox.io/p/devbox/drawer-snap-points-forked-lsjwfc?workspaceId=0a14cb78-5417-4f67-a82a-ad9f290ad361

@m-nathani
Copy link

Facing the same issue

Unfortunately still seeing this behavior on 0.9.6 with

    <Drawer
      open={true}
      modal={false}
      dismissible={false}
      noBodyStyles={true}

Example: https://codesandbox.io/p/devbox/drawer-snap-points-forked-lsjwfc?workspaceId=0a14cb78-5417-4f67-a82a-ad9f290ad361

I can approve this is still happening

    <Drawer
      open={isConsentDrawerOpen}
      onClose={() => setIsConsentDrawerOpen(false)}
      direction="bottom"
      dismissible={false}
      modal={false}
      noBodyStyles
    >

@kylethacker
Copy link

Same. Updating recently, with the radix update, is causing pointer-events: none; on the body, even with modal false, dismissible false, and no body styles.

@SamStenner
Copy link

Same issue here

@emilkowalski emilkowalski reopened this Sep 25, 2024
@emilkowalski emilkowalski mentioned this issue Sep 25, 2024
Merged
@emilkowalski
Copy link
Owner

emilkowalski commented Sep 25, 2024 •
edited
Loading

Thanks for a clear repro demo @Eldrac. This should be fixed in #449. I tested it locally and everything worked fine.

Not closing this issue until I release a new version later today and you guys confirm that it's working as expected.

@emilkowalski
Copy link
Owner

I've just released a new version, could you verify whether it works?

@kylethacker
Copy link

kylethacker commented Sep 26, 2024 •
edited
Loading

I've just released a new version, could you verify whether it works?

Fixed for me! Thank you @emilkowalski!

@Eldrac
Copy link

Eldrac commented Sep 26, 2024

Me as well, thanks for your work on the library!

@clintonlunn
Copy link

Been following this also. It works now, thanks for your time and work!

@SamStenner
Copy link

Worked for me - thanks, much appreciated! :)

@reynaldichernando
Copy link

For future readers, you need to have the <Drawer.Overlay /> element for the fix to work.

I was confused as to why the modal={false} still doesn't work on version 1.0.0, turns out because I didn't use the <Drawer.Overlay /> element, adding it fixes the issue.

@KajSzy
Copy link
Contributor

KajSzy commented Sep 27, 2024

For future readers, you need to have the <Drawer.Overlay /> element for the fix to work.

I was confused as to why the modal={false} still doesn't work on version 1.0.0, turns out because I didn't use the <Drawer.Overlay /> element, adding it fixes the issue.

There is a chance it won't be needed ;)
#460

@viktorrenkema
Copy link

For future readers, you need to have the <Drawer.Overlay /> element for the fix to work.

I was confused as to why the modal={false} still doesn't work on version 1.0.0, turns out because I didn't use the <Drawer.Overlay /> element, adding it fixes the issue.

Lifesaver, thanks man.

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

Successfully merging a pull request may close this issue.

fix: ensure interaction after closing emilkowalski/vaul