feat: add combobox component

[popadicbranislav]

Introduce a new combobox component.

TODOs:

• Implement the component
• Add documentation
• Add tests

[popadicbranislav]

Link the issue #1447

[obstmi]

If the browser runs in light mode, it is nearly nothing to see due to this background color.

[obstmi]

Hi Branislav,
great work! I especially like the perfect documentation.
When I tested the new component (MacOS with Chrome and Firefox), I noticed a few things:

1. Floating-UI: sometimes the selected options opens on an unexpected place. It's not always the case, but I'd say in 25-50%. (see Screenshot-1)

2. Floating-UI: sometimes you can't select options from the list. Also - like in 1. - it's not always the case and not apparently predictable. If you click on a option, nothing happens. I have the impression, that it happens especially, if the list of options opens above the combobox. (see Screenshot-2)

3. UX: Personally, I would assume that the list of options would be filtered using the first letters of the characters entered (e.g., “a” selects everything that starts with “a,” “st” selects everything that starts with “st”). Currently, however, everything that contains ‘a’ or “st” (in this example) is selected.
   This means that entering an “e”, for example, results in only a small amount of filtering. (see Screenshot-3)

[popadicbranislav]

Hi @obstmi,

Thanks for the feedback.

The example html style is fixed.

To address the points:

1. The first issue happens when the items are filtered. I've added the update to position to the filter event.
2. Visibility of the dropdown is tied to focus of the input element. This might happen when click handler is longer than delay set to close the dropdown. I changed the event handler to onMouseDown.
3. This is quite an opinion based observation, and I understand this. I think the best solution would be to provide an option for consumer to make this decision, using current approach as a fallback. I have added a filterFunction option to the component.

[obstmi]

I'm impressed! Now It all works perfectly.
Last but not least the custom filter function is a great feature!

[obstmi]

Hi @popadicbranislav
I'm impressed! Now It all works perfectly.
Last but not least the custom filter function is a great feature!

One last comment from my side:
Would it be possible, to add a documentation about the custom filter functionality to the Storybook documentation?
Thx!!

[popadicbranislav]

Thanks @obstmi, I have updated the combobox story.