kobalte icon indicating copy to clipboard operation
kobalte copied to clipboard

bug(combobox): old dropdown options shown on blur

Open MengLinMaker opened this issue 1 year ago • 0 comments

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:

  • local.options provided through props
  • lastDisplayedOptions used internally to "Prevents the popover contents from updating as the combobox closes"

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();
	});

MengLinMaker avatar Nov 02 '24 23:11 MengLinMaker