Dialog unexpectedly closes on a touch device

[dannylin108]

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).

chakra-ui/ark#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

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[narsiliko]

I have the same issue on Ark UI 4.1.2 for React

[cschroeter]

@narsiliko @dannylin108

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

[IvanKalinin]

@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]

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]

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

[segunadebayo]

This was fixed in a recent commit. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.

CleanShot.2024-12-29.at.18.23.10.mp4