Skip to content

feat: add combobox component#2445

Open
popadicbranislav wants to merge 10 commits intotelekom:mainfrom
popadicbranislav:feature/add-combobox-element
Open

feat: add combobox component#2445
popadicbranislav wants to merge 10 commits intotelekom:mainfrom
popadicbranislav:feature/add-combobox-element

Conversation

@popadicbranislav
Copy link
Contributor

@popadicbranislav popadicbranislav commented Jan 7, 2026

Introduce a new combobox component.

TODOs:

  • Implement the component
  • Add documentation
  • Add tests

@popadicbranislav popadicbranislav force-pushed the feature/add-combobox-element branch from eb3866f to cc49587 Compare January 7, 2026 16:40
@popadicbranislav
Copy link
Contributor Author

Link the issue #1447

@popadicbranislav popadicbranislav marked this pull request as ready for review January 7, 2026 21:58
@popadicbranislav popadicbranislav changed the title Feature/add combobox element feat: add combobox component Jan 28, 2026
.example {
margin-bottom: 4rem;
padding: 2rem;
background: #222;
Copy link
Contributor

@obstmi obstmi Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@obstmi obstmi Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
Screenshot-1
  1. 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)
Screenshot-2
  1. 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)
Screenshot-3

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@popadicbranislav popadicbranislav force-pushed the feature/add-combobox-element branch from be95062 to b66fe53 Compare February 4, 2026 23:09
@popadicbranislav popadicbranislav force-pushed the feature/add-combobox-element branch from fb79e8b to c8945c2 Compare February 4, 2026 23:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants