Keyboard control not working for `Select`, if starting as `disabled`. Only reproducible in shadow roots

[ivancuric]

Description

If a Select.Root is rendered inside a shadow root and starts as disabled, it will not respond to keyboard interactions until the trigger is clicked at least once.

It's not only when it starts as disabled, but if it's disabled within 16ms of being rendered. Might be a race condition of some sort. In the repro, you can update the timeout of the disable to see the change in behaviour.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/github-3ajpxj-elxemr?file=src%2FApp.tsx

Steps to Reproduce

1. Go to repro site
2. Wait 500ms for the select to re-enable itself
3. tabbing to the trigger and pressing space does nothing, even though the element is in focus and events are being handled

Fix 1: Click the trigger - further keyboard interactions will work Fix 2: set the timeout of the disable to 16ms or more Fix 3: Don't use shadow roots in the portal

Ark UI Version

3.6.2

Framework

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

Browser

Chrome

Additional Information

No response

[piyanggoon]

"Menu" same. if try trigger before xx ms will can't trigger for open after pass xx ms.

[piyanggoon]

Problem have been solved on "solid-js: 1.8.22"

[ivancuric]

It's not, here's a repro fork with bumped versions:

https://stackblitz.com/edit/github-3ajpxj-ncrtni

[piyanggoon]

It's not, here's a repro fork with bumped versions:

https://stackblitz.com/edit/github-3ajpxj-ncrtni

“solid.js 1.8.22” does not require EnvironmentProvider, Portal.

[ivancuric]

What do you mean it doesn't require Portals? What does that even mean?

On Wed, 28 Aug 2024, 19:30 piyanggoon, @.***> wrote:

It's not, here's a repro fork with bumped versions:

https://stackblitz.com/edit/github-3ajpxj-ncrtni

“solid.js 1.8.22” does not require EnvironmentProvider, Portal.

— Reply to this email directly, view it on GitHub https://github.com/chakra-ui/ark/issues/2716#issuecomment-2315905398, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVSGJ64AKKAV64URZDLGDLZTYCLPAVCNFSM6AAAAABL2XWEX6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJVHEYDKMZZHA . You are receiving this because you authored the thread.Message ID: @.***>

[piyanggoon]

https://stackblitz.com/edit/github-3ajpxj-ay5hlw?file=src%2FApp.tsx

[piyanggoon]

My problem with using an older version of "solid.js" with Ark UI was that it couldn’t interact when loading js wasn’t finished. If tried to click before it finished, it would become unresponsive, like it was stuck. However, after upgrading "solid.js", the problem was resolved.

[ivancuric]

You misunderstood the issue it seems.

Here is a repro sample with all the deps bumped:

dependencies:
- @ark-ui/solid 3.5.0
+ @ark-ui/solid 3.10.0
- @kobalte/core 0.13.3
+ @kobalte/core 0.13.6
- solid-js 1.8.18
+ solid-js 1.8.22

devDependencies:
- typescript 5.5.3
+ typescript 5.5.4
- vite 5.3.4
+ vite 5.4.3

These are the requirements:

1. Select needs to be rendered in a shadow root
2. Select needs to be disabled on mount
3. The focus needs to switch to the modal window when mounted

When these requirements are met, the repro is as follows:

1. Tab to the Select.Trigger with the label "Select a framework"
2. Use the keyboard to interact with it - for instance by pressing "space"
3. Nothing happens

[ivancuric]

I am now able to reproduce this issue even without it being disabled at any point.

It's definitely a race condition issue. Additionally, clicking the select field also seems to trigger the "click outside", leading to not being able to close the dropdown by clicking the select field.

https://github.com/user-attachments/assets/74c408a3-49cb-43de-be7c-0522d04698d0

[ivancuric]

https://stackblitz.com/edit/solidjs-ark-shadow-root?file=src%2FApp.tsx

A mitigation - clicking twice on mount of a custom trigger.

[cschroeter]

@ivancuric can you try with 4.2 ?

[ivancuric]

https://stackblitz.com/edit/solidjs-ark-shadow-root-pl2jwh?file=src%2FApp.tsx

Still exhibits the issue with 4.2