[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