search

chakra-ui / ark

Ark UI is a headless UI library with over 45+ components designed to build scalable Design Systems that works for a wide range of JS frameworks.
https://ark-ui.com
MIT License
3.8k stars 109 forks source link

Dialog unexpectedly closes on a touch device #2964

Open dannylin108 opened 1 month ago

dannylin108 commented 1 month ago

Description

see this old issue which was closed, not fixed actually (I was able to reproduce it for all releases from 3.9 to 4.2).

https://github.com/chakra-ui/ark/issues/2816

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/~/github.com/dannylin108/parkui-bug-report

Steps to Reproduce

  1. Open the page on a touch device (Chrome emulation also works)
  2. Open the drawer
  3. Choose a date in the date picker
  4. The drawer unexpectedly closes, but should remain open showing the chosen date.

Ark UI Version

4.2.0

Framework

Browser

No response

Additional Information

No response

narsiliko commented 3 weeks ago

I have the same issue on Ark UI 4.1.2 for React

cschroeter commented 3 weeks ago

@narsiliko @dannylin108

We've released a new version. Please re-open the if the issue persist.

IvanKalinin commented 1 week ago

@cschroeter

We've released a new version. Please re-open the if the issue persist.

The issue remains after the latest release (v4.3.0)

https://codesandbox.io/p/sandbox/7j72xj

Touching a combobox menu item closes the dialog. Clicking on it works with no issues.

marcinzarycki commented 6 days ago

I have run into a similar issue that I think may be related. Reproduced on v4.4.3

While using a touch device (or browser emulation of a touch device), when I press a button that's inside a Dialog, and the click event for that button changes state that causes that button to no longer be rendered, I expect the dialog to remain open, but it closes.

https://codesandbox.io/p/sandbox/ark-ui-dialog-forked-6z8w67 To reproduce in the above reproduction:

  1. Open this on a touch device or use browser emulation of a touch device.
  2. Press the "Open Dialog" button.
  3. Press the "Click to hide this button" button. The Dialog should remain open, but it gets closed.
Xelson commented 6 days ago

I have run into a similar issue that I think may be related. Reproduced on v4.4.3

While using a touch device (or browser emulation of a touch device), when I press a button that's inside a Dialog, and the click event for that button changes state that causes that button to no longer be rendered, I expect the dialog to remain open, but it closes.

https://codesandbox.io/p/sandbox/ark-ui-dialog-forked-6z8w67 To reproduce in the above reproduction:

  1. Open this on a touch device or use browser emulation of a touch device.
  2. Press the "Open Dialog" button.
  3. Press the "Click to hide this button" button. The Dialog should remain open, but it gets closed.

I just did a little research and found out that when the button is unmounted, it ceases to be a child of dialog content, and from the point of view of trackInteractOutside this is an outside action which leads to close of the dialog https://github.com/chakra-ui/zag/blob/fb6fa8d3da3f607350d9d1608e696f8e12d481fa/packages/utilities/interact-outside/src/index.ts#L101C9-L101C17

I do not know why this happens only on touch devices, but workaround can apply the dom attribute hidden or something similar instead of unmounting the button