Choosing the right pattern for a command menu component #7495
-
|
I am working on implementing a linear like command menu component using react aria components. afaik most similar components on the web are either comboboxes or something quite different, like a simple input field with a list of items with close to none accessibility. My current implementation is based on a stripped down version of the combobox from react aria component. The component opens inside a modal with focus on the input, and the listbox is visible by default (not wrapped inside a popover). Selecting an item clears the input(controlled) and the component either displays more options related to the selection or performs an action and closes the modal. At this point, I am uncertain whether the component should follow the combobox pattern or if it should be designed more like an input + menu with virtual focus, where the selection resets the input and either triggers an action, closes the menu or shows related items. The behavior would be more similar to a traditional menu ig. Does anyone have insights or suggestions on which pattern would be more appropriate for this kind of component and is there anything else I should consider about? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
We just merged a new |
Beta Was this translation helpful? Give feedback.
-
|
This sounds great. Can’t wait to explore it in the next release. Appreciate all the work that went into this! 👍🏼 |
Beta Was this translation helpful? Give feedback.
We just merged a new
Autocompletecomponent in #7181, which will support this pattern better. It will work with both ListBox and Menu, and is designed to work better when the menu and input are siblings rather than a separate popover. This will be in alpha in our next release. In the meantime, ComboBox is the closest.