[select] Tab key does not close the open listbox

[christianhegedues]

🐛 Bug report

Zagjs, since version 0.47.0, prevent tab interaction when the select is open. I think this is not an expected behavior and also conflicts with the behavior of a native selectbox. In addition, the ARIA authoring practices guide also recommends closing the selectbox when pressing Tab and jumping to the next focusable element (see: combobox)

💥 Steps to reproduce

1. Go to 'https://zagjs.com/components/vue-sfc/select'
2. Click on the select box
3. Press tab key

💻 Link to reproduction

https://zagjs.com/components/vue-sfc/select

🧐 Expected behavior

Tab key closes the listbox and moves the focus to the next focusable element.

🌍 System information

Software	Version(s)
Zag Version	0.50.0
Browser	Firefox
Operating System	MacOS

[segunadebayo]

Hi @christianhegedues,

You definitely have a point. We designed the select machine this way initially as you mentioned.

Closing the select when the Tab key is pressed limits the composition with other composite widgets scenarios:

• select + tabs
• select + combobox
• select + treeview

We tried these compositions and decided to go with our current direction. The native MacOS select listbox blocks the use of the tab key, similar to how Radix UI solves this.

Based on the APG guide, I also think closing and selecting the focused option when the tab key is pressed could be unexpected. We treat the APG guideline as a baseline, not a "rule" to be followed by the letter; it's all subject to testing.

Thanks for understanding.

[christianhegedues]

Hi @segunadebayo, thanks for your reply.

I can understand that you would like to be more flexible when it comes to composition. However, composition of components is more likely to be the exception. I would therefore have preferred at least a control via a property instead of completely deactivating this feature.

Too bad, but thanks anyway.