primitives
primitives copied to clipboard
radix-ui
[New Primitive] `Combobox`
In our app we've had to implement...
Comboboxes in modals
Comboboxes in menus (right-click context menu and dropdown menus)
Comboboxes in select menus in forms
If the team aren't already working on this, we would be happy to contribute back to the library! But it would be good to understand how comboboxes would fit in compatibly with the existing dialogs, selects, context menus, etc.
Would each of these components expose their own combobox functionality (something like ContextMenu.Search, Select.Search), or would there be a common combobox component that could just be plugged in to any other component?
It might also be a good idea to think about how this would fit in with the existing type-ahead logic.
Thanks!
To add a use case, not sure if this is the right component for it or whether it'd be part of the Select component, but we basically just want to be able to use Select with the ability to select multiple options.
Same here, building some additional features on top of Select, cases mentioned above are exactly what we have in mind too.
We are actively replacing our components with radix components in our library; this filtered/searchable component, similar to what react-select does, would be amazing.
@kieranm could you share your implementation?
Is it based on Radix's select?
I'm really upvoting this, since headlessui/react already has an implementation but is broken for now
I'm under the same impression, I tried it too and it doesn't feel ready to be used. Also, the fact that their examples are using tailwind doesn't really help for a headless solution.
Kind Regards Asher
From: Alvaro Aquije @.>
Sent: Thursday, August 4, 2022 5:27:36 PM
To: radix-ui/primitives @.>
Cc: Asher Cohen @.>; Comment @.>
Subject: Re: [radix-ui/primitives] [New Primitive] Combobox (Issue #1342)
I'm really upvoting this, since headlessui/react already has an implementation but is broken for now
— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fradix-ui%2Fprimitives%2Fissues%2F1342%23issuecomment-1205410410&data=05%7C01%7C%7Ca0c542530b96454ee76308da762ddc6e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637952236599313563%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=3zduzpCdtqQ4vCHr4mzmqCCSZBeVjQEBLSivLhp8WM4%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAIIV4EMFNCYZHKWIOFI5WPLVXPOORANCNFSM5UIGGUFA&data=05%7C01%7C%7Ca0c542530b96454ee76308da762ddc6e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637952236599469787%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=VnlAi1Xa0nHkYr6quYsKgt%2FHhnC3Zo%2Bknr8%2BCGqMv2s%3D&reserved=0. You are receiving this because you commented.Message ID: @.***>
I use headlessui combobox for two things: command bar (cmd+k) and emoji autocomplete (when you type : in github, slack). For the second use case it broke my textarea: https://github.com/tailwindlabs/headlessui/issues/1718 I will likely implement this manually. Just sharing the use cases, I think that could help in the event this is implemented.
Screenshots for reference.
A shortcut (cmd+k) makes a dialog with this combobox show up, it can be filtered using fuzzy (outside the concern of the component) and navigated with arrows, enter to select.
Same combobox component, shows up once you hit a threshold :as (colon followed by at least these many letters), you can navigate up/down, the issue I have right now is that Combobox hijacks left/right arrows so I lose the textarea functionality.
I have been using downshift in the meantime and it made me realize how hard it is to create a combobox that is truly reusable for all the purposes. Its a weird component in general, it can be used for autocomplete, filtering, search, be always open or as a dropdown etc. All those cases change the behavior for focus management and input update dramatically.
At this point I would even consider that radix shouldn't implement a combobox but rather create a documentation on using radix together with downshift.
Also worth noting: based on the Open UI research on the "select" component, Microsoft and Chromium (afaik) have started work on a new, additional <selectmenu> element.
- https://open-ui.org/components/select
- https://microsoftedge.github.io/Demos/selectmenu/
- https://css-tricks.com/the-selectmenu-element/
We decided to go with Autcomplete components when there are more than 15 options to show. This is somehow a recommendation from our A11Y specialist. We implemented using the UK's autocomplete component and provided a react way using our API's.
Reference: https://vip-design-system-components.netlify.app/?path=/story/form-autocomplete--default
If we want to show less than 15 options, we use a simple browser Select component.
If we need to show more, we are sticking with the pattern of using the Autocomplete.
This combination seems to be the most optimized accessible options to our customers, and with the simpler API.
🤙
We have recently moved to CmdK which uses Radix under the hood. It can be used for modals or popovers. https://github.com/pacocoursey/cmdk
lets get this cake! Is there somehow a way we can sponsor this PR or similar? Expedite the engineering of it?
Is using DropdownMenu bad practice for multiselect?
As is, yes unless you re-write a bunch of accessibility yourself, they wouldn't carry the same semantic unfortunately.
What do you mean by accessibility?
What does carrying the same semantic mean?
what are our options for multiselect?
The accessibility/semantic of dropdown menu are carrying are those of a "menu button" aria pattern, not a "listbox" pattern. Additionally, menus don't hold a value (or values, in the case of select). Also, they are not form elements, so wouldn't participate in form events like change events bubbling etc.
Ultimately, they may "look" similar, but they are not the same component.
What do you mean by accessibility?
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
What does carrying the same semantic mean?
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#good_semantics
Accessibility is one of the main selling points of Radix: https://www.radix-ui.com/docs/primitives/overview/accessibility
@benoitgrelard Thanks for the detailed explanation. It seems like it's not illegal to use the DropdownMenu if accessibility in my app is not a concern (Thanks @luchsamapparat for the definitions). I can use the DropdownMenu, modified with added state control, until a MultiSelect is implementented in radix-ui.
… if accessibility in my app is not a concern
Accessibility is always a concern of any app, as you do not know who will end up using the app. Perhaps the only case where it could be considered not a concern is if you are developing an app only for your own self to consume and if you are able (any of us could end up with a disability in the future too…)
Hey @benoitgrelard, is there any interest in working with outside collaborators on this one? I've got a need and would happily help out if y'all still intend to ship this!
Because ... I get it 😅
