[Mobile] dialog closing on button tap when the onClick triggers a content change

[rossbelcher]

Description

When I tap (touchscreen) on a button inside DrawerBody that changes the contents of the DrawerBody so that the button unmounts, it closes the modal.

This however works fine if you click with a mouse.

Replication is on the stackblitz link provided. Tap on the button inside the modal to replicate.

A temporary workaround for myself is to add a 1ms timeout before you setState.

Link to Reproduction

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

Steps to reproduce

1. Go to https://stackblitz.com/edit/chakra-ui-v3-1cdfym?file=src%2FApp.tsx on a touchscreen device
2. Tap on "Open Drawer"
3. Tap "Set next content"
4. Tap "Set previous content"
5. Drawer closes unexpectedly

Chakra UI Version

3.1.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[vnxx]

I’m experiencing this issue as well. It not only occurs with the drawer component but also with the dialog component

[segunadebayo]

I transferred this issue here, where it'll be resolved.

I was able to narrow down the root cause in the underlying state machine