kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.3k stars 75 forks source link

bug(combobox): old dropdown options shown on blur #514

Open MengLinMaker opened 2 weeks ago

MengLinMaker commented 2 weeks ago

Firstly, is this a bug or feature? - code appears to be written intentionally

Describe the bug

When combobox & search (which uses combobox) blurs, the old options are shown temporarily.

There are 2 sources of truths for displayed options:

But this leads to janky behaviour as the popover content closes - especially on animation.

To Reproduce

  1. Type something into combobox - with results
  2. Change input - with different results
  3. Click outside combobox to blur - observe

Slow down css animation to see the jank

https://github.com/user-attachments/assets/1c9c9753-9889-41df-a048-5da53794d29a

Expected behavior

Close without content changing:

https://github.com/user-attachments/assets/255b5a57-1296-47c3-a096-3c214b1acc63

Additional context

Location of code behaviour combobox-base.tsx:

    const displayedOptions = createMemo(() => {
        if (disclosureState.isOpen()) {
            if (showAllOptions()) {
                return local.options!;
            }
            return filteredOptions();
        }
        return lastDisplayedOptions();
    });