search

chakra-ui / ark

A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.
https://ark-ui.com
MIT License
3.57k stars 101 forks source link

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

Open ivancuric opened 1 month ago

ivancuric commented 1 month ago

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

Browser

Chrome

Additional Information

No response

piyanggoon commented 1 month ago

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

piyanggoon commented 3 weeks ago

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

ivancuric commented 3 weeks ago

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

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

piyanggoon commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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

piyanggoon commented 3 weeks ago

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 commented 2 weeks ago

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