Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/select-falsy-typeahead.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@vega-ui/react": patch
---

Fix Select typeahead skipping options with falsy values

`onMatch` (typeahead selection while the listbox is closed) guarded the matched value with `if (!value) return`, so options whose value is `0` or an empty string could be highlighted but never actually selected — common with numeric IDs. The guard now checks for `undefined` (a missing map entry) only. Covered with a regression test that selects a `value={0}` option by typing.
4 changes: 2 additions & 2 deletions packages/ui/src/Select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,8 @@ export const Select = <V extends string | number>({
setSelectedIndex(index)

const value = indexValueMap.get(index)
if (!value) return
if (value === undefined) return

select(value)
}

Expand Down
26 changes: 26 additions & 0 deletions packages/ui/src/Select/__tests__/Select.browser.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -388,6 +388,32 @@ describe('Select', () => {
});
});

it('selects an option with a falsy value (0) by typing', async () => {
const onSelectValue = vi.fn();

const r2 = render(
<Select data-testid='select-numeric' onSelectValue={onSelectValue}>
<SelectCombobox data-testid='combobox-numeric'>
<SelectValue placeholder={PLACEHOLDER} />
</SelectCombobox>

<SelectPortal>
<SelectListbox>
<SelectOption value={0}>Zero</SelectOption>
<SelectOption value={1}>One</SelectOption>
</SelectListbox>
</SelectPortal>
</Select>,
);

(r2.getByTestId('combobox-numeric') as HTMLElement).focus();
await userEvent.keyboard('zer');

await waitFor(() => {
expect(onSelectValue).toHaveBeenCalledWith(0);
});
});

it('does not auto-select while open (typing only searches)', async () => {
const onSelectValue = vi.fn();
r.rerender(<SelectTest defaultValue='' onOpenChange={vi.fn()} onSelectValue={onSelectValue} />);
Expand Down