Select is not working in Dialog (Safari)

[egoist]

Description

This is a Safari only issue, Select component does not work when used in Dialog. It doesn't open when I click it.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/stackblitz-starters-6fdhv2?file=src%2FApp.tsx

Steps to Reproduce

This code in the repro is just the default example from the docs.

1. Go to this link (in Safari)
2. Click "Open Dialog"
3. Click "Select a Framework" <-- this doesn't work, no response when you click it

Note that it only works if you do not wrap Select.Positioner with a Portal.

Ark UI Version

1.1.0

Framework

• [X] React
• [ ] Solid
• [ ] Vue

Browser

Safari 17.1 (19616.2.9.11.7)

Additional Information

Safari: (not working)	Other browsers: (works as expected)

[ibrahimbutt]

I have the same issue. A select in a dialog, which I cannot click on. When inspecting the dom, data-state="closed" flashes but it is closed again. If I spam the select trigger, for a microsecond I can see "open"`.

Edit: While I'm here, keyboard navigation is not working. This is on Chrome "Version 119.0.6045.159 (Official Build) (arm64)". Do you have this issue, @egoist?

[egoist]

@ibrahimbutt yes basically it gets instantly closed when it’s opened , although I only encountered this in safari

[cschroeter]

@egoist @ibrahimbutt

Thanks for bringing this to our attention. We will have a look shortly. Please use the described workaround without the Portal for now.

[ibrahimbutt]

@cschroeter I have wrapped it in a Portal, but have the same result. Snippet:

<Portal>
  <ArkSelect.Positioner>
    <ArkSelect.Content className={classes.content}>
      {items.map((item) => (
        <ArkSelect.Item key={item} item={item} className={classes.item}>
          <ArkSelect.ItemText>{item}</ArkSelect.ItemText>
          <ArkSelect.ItemIndicator></ArkSelect.ItemIndicator>
        </ArkSelect.Item>
      ))}
    </ArkSelect.Content>
  </ArkSelect.Positioner>
</Portal>

[cschroeter]

Without the portal ;)

[egoist]

Weirdly this also happens when Select is used outside Dialog and without Portal, in this case adding a Portal makes it work properly, reproduced in Chrome, the log suggests it's instantly closed after being opened, I might add a repro for this later as well.

[egoist]

Here's a repro for a Controlled Select Component (not using Dialog): https://stackblitz.com/edit/stackblitz-starters-p4zsyy?file=src%2FApp.tsx

It works fine on Safari but not Chrome:

safari	chrome

When I tap (using macbook touchpad) it doesn't work, but it works normally with mouse click.

[cschroeter]

@egoist

I was unable to replicate the issue with a standalone Select component in any major browser.

However, the issue you're encountering with a Select inside a Dialog is related to focus trapping. When a Dialog is rendered within a Portal, the focus remains confined to that portalled Dialog. Attempting to render another Portal within this setup disrupts the focus trap, which likely leads to the problem you initially described.

There are a couple of ways to address this:

1. Avoid rendering the Select within a Portal (this is the recommended approach).
2. Disable trapFocus on the Dialog (note: this may impact accessibility).