-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
Unpredictable ListBox behavior when used in Dialog #4793
Comments
That makes sense, we've had prior discussions about this here and have implemented that behavior for Menu. For your use case, would a Menu make more sense instead of a ListBox? If not, we would need some way to distinguish when to prevent Esc from clearing the ListBox's selection and close the Dialog since I don't believe we'd want that to happen all the time.
Certainly feels like a bug, digging right now. Doesn't seem to happen for a Menu though, so if you can use a Menu instead it should just work. EDIT: Looks like ListBox could use the same kind of logic as Menu does here. At the moment the ListBox is rendered, its collection hasn't been formed (needs a second render) and thus useSelectableCollection's call here doesn't actually set a focused key since the collection is empty. |
@LFDanLu Thanks so much for the quick response! I'll try using a Menu and see what it feels like. |
For whoever picks up this ticket, we'll consider adding a prop to ListBox to control Esc behavior and fix the second point using the code outlined in my previous comment |
Trying to do the same thing, using Menu works for me. |
Same here - was having a bunch of different issues, saw this thread, swapped out ListBox for Menu with no other changes and everything cleared up. π For any future readers, you can probably also get rid of any Dialogs if you do this |
We are experiencing a similar issue. We have a |
π Feedback
Original Twitter thread with @devongovett β https://twitter.com/mattrothenberg/status/1681749782740496384?s=20
I'd like to build a custom Select menu that supports multiple selection. To this end, I've sketched out some code that looks like so. https://codesandbox.io/s/rac-multiselect-yptnvy?file=/src/App.js:324-1192
This almost works perfectly. There are two UX issues, however, that prevent me from being to able to add this functionality to my component library.
Esc
clears the selected value. While this is expected behavior for a standaloneListBox
, this is unexpected behavior in this context. I would expect hittingEsc
would close the dialog and maintain my selection, rather than clobber it.autofocus
prop can be used to ensure that, the first time you open the dialog, aListBox
item is selected. However, if you open the dialog, select an item, click outside of it to close the dialog, and then re-open, you'll note thatautofocus
is totally ignored. This feels like a bug, but I'm reticent to make that determination myself.π Your Environment
1.0.0-alpha.5
The text was updated successfully, but these errors were encountered: