Search in Listbox #626
Replies: 8 comments 11 replies
-
I have a similar problem. @sathovsepyan, your problem I solved by "redirecting" the focus event to an input field. <ListboxOptions @focus="searchInput?.focus()">
<div>
<FormInput
ref="searchInput"
v-model="searchQuery"
placeholder="Search airports"
/>
</div>
<ListboxOption
v-for="airport in airports"
:key="`airport-${airport.id}`"
>
</ListboxOptions> But then there is a next problem: As the options change while I'm typing, also the internal search functions within An easy solution could be to have a Alternatively (but more challenging), headlessui could provide a version with input field by itself. Also if someone knows a workaround to deactivate the internal search, I would really appreciate. |
Beta Was this translation helpful? Give feedback.
-
Thanks for sharing your solution @baijii. I ended up using react-select since it provides search (and a bunch of other features) OOTB (for Vue, vue-select seems to be the equivalent). The downside of this is that it has a predefined UI and I had to customize it in a way different from the rest of my components (where I use Tailwind CSS). But in my opinion, that's easier than implementing search, multi-select, loading, and async loading from scratch at this point. It will be great to switch back to HeadlessUI Listbox, once those features are implemented! |
Beta Was this translation helpful? Give feedback.
-
I also think that searching and multi-select is a big hole in this library, having to work around this sucks |
Beta Was this translation helpful? Give feedback.
-
I am having trouble too. Had to go back |
Beta Was this translation helpful? Give feedback.
-
Same here. Had to switch back to |
Beta Was this translation helpful? Give feedback.
-
hello i think the main question has the answer, only need some arranges, please take a look here https://codesandbox.io/s/late-dream-6bfhv?file=/src/App.js |
Beta Was this translation helpful? Give feedback.
-
@sathovsepyan @baijii - I believe what you're looking for is a combobox W3C - Example 3: List with Inline Autocomplete. It looks like this was added to HeadlessUI's main branch 11 days ago. It's not on npm yet, so you'd have to use |
Beta Was this translation helpful? Give feedback.
-
It work for me, Use a div over the input and prevent events from bubbling up
|
Beta Was this translation helpful? Give feedback.
-
Hi,
I would like to have Listbox with search support. I tried adding an
input
inListbox.Button
and it would work fine, except after the click on the input the focus automatically goes toListbox.Options
.Here is the codesandbox with my attempts.
The behaviour seems to be expected and is documented:
But I'm wondering if it's possible to overcome this and have search in Listbox.
Beta Was this translation helpful? Give feedback.
All reactions