search

chakra-ui / ark

Ark UI is a headless UI library with over 45+ components designed to build scalable Design Systems that works for a wide range of JS frameworks.
https://ark-ui.com
MIT License
3.82k stars 112 forks source link

dialog,select: Keyboard accessibility doesnt work in select inside dialog #2979

Closed althafdemiandra closed 1 month ago

althafdemiandra commented 1 month ago

Description

I tried to create select inside dialog looks like browser cant focus into SelectContent if it is rendered inside Dialog, so keyboard accessibility doesnt work

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/sandbox/hc6s77

Steps to Reproduce

  1. Crreate select inside dialog
  2. Try to navigate around with arrow up/down/enter inside content, it cant
  3. Content not focused while rendered inside dialog

Ark UI Version

4.1.1

Framework

Browser

Chromium (Brave Browser)

Additional Information

No response

segunadebayo commented 1 month ago

When nesting the select or popover is used in a dialog (that is portalled), here are the things you can do: