Transform not resetting when closing drawer

[Kinbaum]

On the latest version of vaul (0.6.3) the [vaul-drawer-wrapper] is not resetting the transform upon close.

Screen.Recording.2023-09-19.at.1.46.53.PM.mov

[emilkowalski]

Can you provide a codesandbox? It's working fine on vaul.emilkowal.ski

[Kinbaum]

Sure thing. Here you go:
https://codesandbox.io/p/sandbox/funny-pine-8vvtr7

You'll notice the scaling doesn't reset, nor does the background color

[emilkowalski]

What's diferent than in the example here? https://codesandbox.io/p/sandbox/drawer-with-scale-g24vvh?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1

This also runs on the latest version and doesn't have this problem. What did you change from the default example? I don't notice anything that might be causing it.

[Kinbaum]

I updated my sandbox to match your example verbatim. The only differences are the versions listed in the package.json.
Looks to be an issue with Next.

I downgraded to 13.4.10 and it started working. So there’s something causing the issue between this and the latest 13.5.1.
Also verified this behavior in my actual application.

[emilkowalski]

That's interesting, thank you for catching that. I'll look into it.

[Kinbaum]

Sure thing. For the time being, I added the following to the Drawer.Root to restore the initial styling:

onClose={ () => {
  setTimeout(() => {
      const wrapper = document.querySelector('[vaul-drawer-wrapper]') as HTMLDivElement;
      wrapper.style.transform = '';
      document.body.style.background = '';
  }, 0);
} }

[raimondlume]

@emilkowalski

Noticed a similar issue with body styles not being cleared after triggering a route change inside the drawer.

My hypothesis is that the useEffect that should restore the scroll settings on open changing in usePositionFixed does not have a chance to trigger before the drawer is unmounted.

I added a 500ms delay between the drawer closing and route change, the behaviour did not occur then.

Inspired by @Kinbaum (thanks 🙌) added this:

onClose={() => {
            setTimeout(() => {
              document.body.style.position = '';
              document.body.style.right = '';
              document.body.style.top = '';
              document.body.style.left = '';
              document.body.style.height = '';
            }, 0);
          }}

Which fixes the issue for now.

EDIT: this is on Next 13.4.12 and vaul 6.0.3

[raimondlume]

@emilkowalski should this be a separate issue?

[emilkowalski]

@raimondlume I think this is the same issue? #61
Plan to fix it soon

[suyalcinkaya]

Also the border-radius as well. Had to fix it as below;

onClose={() => {
  setTimeout(() => {
    const wrapper = document.querySelector('[vaul-drawer-wrapper]')
    if (wrapper) {
      wrapper.style.transform = ''
      wrapper.style.borderRadius = ''
      document.body.style.background = ''
    }
  }, 0)
}}

[emilkowalski]

Fixed in #111