[components] Combobox

[victorfunes]

• [X] I have searched the Issues to see if this bug has already been reported
• [X] I have tested the latest version

Summary

The component Select is using the browser style to show the select options, and doesn't allow adding some nice feature such as search.

Code:

<Select id="country" defaultValue="empty">
  <option value="empty">Choose your country</option>
  <option value="USA">USA</option>
  <option value="UK">United Kingdom</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
  <option value="ES">Spain</option>
  <option value="JP">Japan</option>
  <option value="AUS">Australia</option>
</Select>

Result:

Context

I would like to have a Combobox, that will have a nice flowbite style, not the default browser style. It should also allow users to select one or more options from the list of items, and filter them based on a search input.

Features

• Simple selection without the search
• Single selection with a search
• Multiple selection/removal (tags added over the input with removable button icon) with search
• Event handler to handle async search (onSearchChange???)
• onChange event property when selection changes

References

• https://headlessui.com/react/combobox
• https://madewithreactjs.com/react-multi-select-component

[nigellima]

I think that it should still have the browser Select component (other libraries do the same) but have then an additional component called Combobox, which could have the custom styles for the items and also some additional features like searching

[victorfunes]

If you finally decide to add a Combobox component with search capabilities as @nigellima suggests, it would be very nice to consider the search function as a callback to allow developers develop custom filters being done in backend instead of frontend.

[rluders]

The Select should not be customizable, and it should look like the navigator. Standard flowbite does it, and we are just reproducing it. Unless they change it, we will not change.

It seems that we have a bug related to w-full and color... Right? So, probably this should be handled on this issue.

And finally, I think that the Combobox component with search capabilities is pretty awesome... You folks have my +1 to add to the library. But, it will need @zoltanszogyenyi interaction here, maybe? I don't remember if Flowbite has it on the standard library.

[victorfunes]

@rluders should I open a new issue with the Dropdown issues? I haven't gone in deep detail as I have my own Combobox component and I will use it for this case, but if you consider it can be useful for you, I can do it.

[rluders]

I think that you can edit this one for the Select, and we should create another one for Combobox. I would like to see how how the Combobox would look from the Figma perspective, but... I think that we have all the pieces to implement it first in code.

[nigellima]

@rluders I think a good set of features would be:

• simple selection without search
• single selection with search
• multiple selection/remove (tags added over the input with removable button icon) with search

[rluders]

@nigellima sounds good. ~Can you create an issue for this one?~ Nevermind, let's use this one.

[rluders]

BTW, now that I had a good night of sleep and had a nice cup of coffee I understood what it is all about. So, basically Dropdown isn't a form component, and it can't be used like that, it doesn't store form values, and it doesn't allow any validation functionality. So, first, the use-case for the dropdown first described in the issue is wrong, and it isn't recommended. So, for this reason, the proposed implementation of a Combobox component as part of the Form elements is the best solution.

I'm going to change the issue description completely to match the requirements for the new component.

[rluders]

@zoltanszogyenyi looking at flowbite docs, I didn't find the Combobox component. I'm trying to find something similar, the closest one that we have is the Dropdown, but it isn't a Combobox, since Combobox are form elements, meanwhile Dropdown isn't a Form component.

I think that we should consider introducing the component to the standard flowbite library first, if desirable, and then implement it in the react library. Does it make sense? Am I missing something?

[zoltanszogyenyi]

Hey @rluders,

We definitely have that on our plans! Until then, I think that you can take the design from here:

https://www.figma.com/file/qnussKyYVlx3LZvwVSCz8M/Flowbite-Design-System-Pro-v2.8.0?type=design&node-id=547-163288&mode=design

It's a dropdown component with a form inside where you can filter the search items below. I believe it's a component that can be used for the Combobox element.

Cheers, Zoltan

It's part of the pro version, but we're going to make it open-source. It's okay to implement the design.