Popup closes on touch devices.

[IvanKalinin]

Description

For some reason, I cannot reopen the issue I created earlier. #3471
So I open a new one.

The bug occurs not only in Playwright but also on touch devices.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/tj7g8p

Steps to Reproduce

1. Open the link on a touch device (e.g., tablet)
2. Open Popover
3. Open the Select Menu
4. Click on a select menu item
5. See the click on the select menu item closes the popup.

Ark UI Version

5.9.1

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

I also noticed in zag-js in interact-outside implemented a custom logic for touch events.

https://github.com/chakra-ui/zag/blob/main/packages/utilities/interact-outside/src/index.ts#L176-L185

Calling handler() rather than the custom logic fixes the issue on touch devices (but not in Playwright).

Saying that the issue is not just in the Portal within a Portal.

[segunadebayo]

My recommendation stays the same as stated in #3471 (comment)

Expose a prop in your Select component like portalled?: boolean so you can set that when rendering it within a popover or dialog. This is important for the interaction outside logic to work as expected.

An alternative is to set the portal target of the select to the popover content so it's rendered within it.

This is based on the design, and changing that logic you highlighted will result in other bugs for touch devices. It's a "hot path" code that I'd prefer to keep as is.

If you're really convinced, you can patch that package in your application and see how it goes. Happy to learn from your experience.

[segunadebayo]

Here's what I mean.

const Select = (props: { portalled?: boolean }) => {
  const collection = createListCollection({ items });
  return (
    <ArkSelect.Root collection={collection} lazyMount unmountOnExit>
      <ArkSelect.Control>
        <ArkSelect.Trigger>
          <ArkSelect.ValueText placeholder="Select a Framework" />
        </ArkSelect.Trigger>
      </ArkSelect.Control>

      <Portal disabled={props.portalled}>
        <ArkSelect.Positioner>
              {/***/}
        </ArkSelect.Positioner>
      </Portal>
      <ArkSelect.HiddenSelect />
    </ArkSelect.Root>
  );
};

Give it a try and you might notice that the playwright and touch interaction works better

[segunadebayo]

To conclude this, let me explain the difference in behavior between the mouse and the touch/virtual mouse.

• Mouse: The component closes on "pointerdown" outside
• Touch: The component closes on "click" or "touchend" outside

There are browser inconsistencies in a touch device's "touchstart" and "pointerdown"; that's why we use "click" outside instead.

[IvanKalinin]

@segunadebayo do you have tests that cover those inconsistencies? If so I can try to play around