You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using the ComboBox component in React Aria's table component. When a user types the characters "t", "p", or "l" the tabindex of the row changes causing the ComboBox to close. This behavior does not occur when the user types any other characters in the field.
🤔 Expected Behavior?
A user should be able to type any character in the ComboBox including "t", "p", or "l" and the dropdown should remain open until the user selects an option from the dropdown.
😯 Current Behavior
Currently, when the ComboBox dropdown is open, and a user types any of the following characters, "t", "p" or "l" the dropdown closes. When a user types any of the keys the tabindex for the row is changed. This does not occur with any other characters.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
I've attached a code sandbox below. Navigate to the last column in the table, press the dropdown to open the list of clients. With the list open type any of the following characters "p", "t", or "l". The ComboBox is closed. When you type any other characters the dropdown remains open.
At the moment, our grid collection components don't work well with text inputs and other interactive components due to the "type ahead" behavior capturing key presses by the user and coercing focus to rows that match the value typed by the user. #6037 covers the same usecase and #2328 covers "edit mode" which would help with this functionality. Our plan forward roughly is to handle event leaks happening in our components and by doing that prevent events handled by text inputs/etc from leaking to the grid level and thus triggering typeahead, and then handle grid edit mode/nested collection component case/etc.
PRs like #7277 and #7379 have done some great exploration into fixing these issues, we hope to gradually explore these changes and pull them in a bit at a time
Closing this out as a dupe since the aforementioned issues cover this use case
Provide a general summary of the issue here
I am using the ComboBox component in React Aria's table component. When a user types the characters "t", "p", or "l" the tabindex of the row changes causing the ComboBox to close. This behavior does not occur when the user types any other characters in the field.
🤔 Expected Behavior?
A user should be able to type any character in the ComboBox including "t", "p", or "l" and the dropdown should remain open until the user selects an option from the dropdown.
😯 Current Behavior
Currently, when the ComboBox dropdown is open, and a user types any of the following characters, "t", "p" or "l" the dropdown closes. When a user types any of the keys the tabindex for the row is changed. This does not occur with any other characters.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
I've attached a code sandbox below. Navigate to the last column in the table, press the dropdown to open the list of clients. With the list open type any of the following characters "p", "t", or "l". The ComboBox is closed. When you type any other characters the dropdown remains open.
https://codesandbox.io/p/sandbox/vigilant-microservice-5s27xw?file=%2Fsrc%2FApp.js%3A39%2C38
Version
1.5.0
What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge
If other, please specify.
No response
What operating system are you using?
Windows
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: