Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to use ComboBox in Table #7591

Closed
jordankimsey opened this issue Jan 9, 2025 · 1 comment
Closed

Unable to use ComboBox in Table #7591

jordankimsey opened this issue Jan 9, 2025 · 1 comment

Comments

@jordankimsey
Copy link

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

@LFDanLu
Copy link
Member

LFDanLu commented Jan 10, 2025

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

@LFDanLu LFDanLu closed this as not planned Won't fix, can't repro, duplicate, stale Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants