Render problem in NextJS when using Chakra UI's Drawer component

[Felipe Magalhães]

Hi, I am using NextJs and Chakra UI in my project and I'm having some issues with the Rive Component. Here's the issue:

Gravacao.de.Tela.2023-03-23.as.19.47.38.mov

When I close the Drawer and open it again, the canvas height and width are setting to 0px automatically

before:

after closing and reopening:

This is happening with other .riv files aswell.

[Dominique Mattern]

I can observe the same behaviour when using the Popover component from Chakra UI with the prop isLazy. By default it only renders the popover content when it is open. The content container get's removed from DOM when the popover is closed. This seems to be the culprit here.

I can tell Chakra UI to keep the container mounted after the popover was initially opened (using lazyBehavior="keepMounted"). This fixes the problem and serves as a workaround for me at the moment (though it's not ideal when you need the unmounting behaviour to save performance).

Unfortunately, the Drawer component doesn't seem to have such prop according to the docs 😕.

[Felipe Magalhães]

I can observe the same behaviour when using the Popover component from Chakra UI with the prop isLazy. By default it only renders the popover content when it is open. The content container get's removed from DOM when the popover is closed. This seems to be the culprit here.

I can tell Chakra UI to keep the container mounted after the popover was initially opened (using lazyBehavior="keepMounted"). This fixes the problem and serves as a workaround for me at the moment (though it's not ideal when you need the unmounting behaviour to save performance).

Unfortunately, the Drawer component doesn't seem to have such prop according to the docs 😕.

thanks for the reply! do you have any possible workaround or ideas that I could try?