Menu/Dialog states bug out when parent component suspends

[Diggsey]

Description

The menu/modal ends up in a halfway state between open/closed. In the example the menu gets "stuck" open and visible.

In other cases I've seen the menu still open but with opacity 0, and clicking the invisible menu performs the action!

The example code is obviously not representative of real code, but it was the easiest way to get a suspense event to happen at the right time.

Link to Reproduction

https://stackblitz.com/edit/chakra-ui-v3-jwwsw7et?file=src%2FApp.tsx

Steps to reproduce

I'm not sure what causes it exactly, but it involves the open state changing at the same time as a suspense event.

Chakra UI Version

3.x.x

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

Moved to Zag.js where it'll be investigated.

[segunadebayo]

I've tested this with the Zag menu component.js and can't seem to reproduce the bug
https://stackblitz.com/edit/f6g1ohaa?file=src%2FApp.tsx,src%2FMenu.tsx,src%2Findex.css&showSidebar=0

[Diggsey]

Yeah I agree - even after I brought your example more inline with my original repro, the issue doesn't happen. I guess this is a bug in Chakra or Ark then?

Something is causing the bad behaviour in my initial repro...

[segunadebayo]

Possibly Ark, will have a look pretty soon.