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

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

Open
1 of 3 tasks
rossbelcher opened this issue Nov 9, 2024 · 2 comments · May be fixed by #2061
Open
1 of 3 tasks

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

rossbelcher opened this issue Nov 9, 2024 · 2 comments · May be fixed by #2061

Comments

@rossbelcher
Copy link

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
Copy link

vnxx commented Nov 17, 2024

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

@segunadebayo segunadebayo transferred this issue from chakra-ui/chakra-ui Nov 21, 2024
@segunadebayo
Copy link
Member

segunadebayo commented Nov 21, 2024 •
edited
Loading

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

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

@segunadebayo segunadebayo changed the title Drawer closing on button tap when the onClick triggers a content change [Mobile] dialog closing on button tap when the onClick triggers a content change Nov 21, 2024
@segunadebayo segunadebayo linked a pull request Nov 27, 2024 that will close this issue
Draft
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: focus outside + active element mutation chakra-ui/zag
3 participants
@segunadebayo @rossbelcher @vnxx