kobalte icon indicating copy to clipboard operation
kobalte copied to clipboard

[Search]: Headers disappears when using option groups

Open stefan-karger opened this issue 3 months ago • 1 comments

Describe the bug

It looks like the filtering/searching is broken when you use a combobox with option groups: https://kobalte.dev/docs/core/components/combobox#using-option-groups If I start typing only the first entry (the "fruit" heading) gets removed and after that nothing changes no matter what I enter.

Image

To Reproduce

  1. Go to https://kobalte.dev/docs/core/components/combobox/#using-option-groups
  2. Type in anything that can be found like "Banana"
  3. Delete the search string
  4. The header "Fruits" is now missing and won't show up again until the page is refreshed

Expected behavior

Clearing the search string should always show all options and groups

Screenshots

https://github.com/user-attachments/assets/621db4e0-0adb-435e-97b4-1b6018af1538

Video showcasing the bug inside a SolidUI test repo: https://github.com/stefan-karger/kobalte-search-test/

But it also can be seen directly in the kobalte docs.

stefan-karger avatar Oct 08 '25 07:10 stefan-karger

Image

The example demonstrated here shows some more peculiarities. The closing of the content/virtual box will refresh the group label it seems.

Update: This smells like an issue to do with caching groups of elements. The issue only seems to occur when backspacing to an input which filtered more than one group, at which point the label for the first group is hidden.

Because @stefan-karger never closes the disclosure, he is consistently hitting this incorrect cache of elements? Or perhaps the group is filtered out and it never refreshes on disclosure closing.

Theres a few memos I would think are at fault here, but I that's about as far as I can get with my limited knowledge of typescript/javascript. Navigating the code is hard for me :')

shayanhabibi avatar Oct 08 '25 07:10 shayanhabibi