Samuel
@samuel.fm
#react
how on earth do you do a search input with a typeahead dropdown thingy without pulling in an enormous ui library
8 2 26SamuelI just want a headless thingy that can hook into my existing textinput but all the options I found out there are awful
1 6
Brent RagerI assume the “massive library” rules out shadcn but the thing I like about it is you can just install *one* component if that’s all you need. It’s not all batteries included.
ui.shadcn.com/docs/compone...
Combobox
Autocomplete input and command palette with a list of suggestions.
ui.shadcn.com
Samuelnah that’s not quite what I need. I want a textinput first, with a dropdown - that’s a dropdown with a textinput in it
radix doesn’t have a good way to do this as far as I can tell
1 1Brent RagerYeah I think you could bend it to your will since what you need exists within the component.
1 1Brent Rager(Which is the kind of thing I’ve personally found LLM assisted coding to excel at)
GraceHere’s one example I saw recently!
https://github.com/atpota-to/cred.blue/blob/main/src/components/SearchBar/SearchBar.js
github.com
Alexey Volkov 🇺🇦Did you try ariakit?
2 1Samuelseems like a very big library for just this one feature?
1Alexey Volkov 🇺🇦Yeah, it does seem like a big library (180kb minified), but it's also tree-shakable.
Another option is to use <datalist>, but it's not supported by FF yet.
1 1Alexey Volkov 🇺🇦Hm-m... it seems <datalist> is already supported by FF
developer.mozilla.org/en-US/docs/W...
<datalist>: The HTML Data List element - HTML | MDN
The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
developer.mozilla.org
James KienleI generally tend to like adobe’s react-aria for this. It’s headless and not that much of a pain to integrate
1 1James KienleHas the added bonus of being able to install single components, meaning you won’t need the deps for all of react-aria’s components if you just want a combobox
1 1
Carl VitulloI mean, that's a complex series of interactions with poor platform support. I've done it without an enormous ui library but it took a week to build, and resulted in an enormous component
1
Jhey ʕ·ᴥ· ʔfollow the WAI-ARIA pattern and have the LLM scaffold the web component using the Popover API. Then style it up and latch in the event handling code 🤙
Gives more time for the “polish” 🧑🍳
1