diff --git a/.changeset/select-falsy-typeahead.md b/.changeset/select-falsy-typeahead.md new file mode 100644 index 00000000..52628a9f --- /dev/null +++ b/.changeset/select-falsy-typeahead.md @@ -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. diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx index fb3364b4..6311be74 100644 --- a/packages/ui/src/Select/Select.tsx +++ b/packages/ui/src/Select/Select.tsx @@ -166,8 +166,8 @@ export const Select = ({ setSelectedIndex(index) const value = indexValueMap.get(index) - if (!value) return - + if (value === undefined) return + select(value) } diff --git a/packages/ui/src/Select/__tests__/Select.browser.test.tsx b/packages/ui/src/Select/__tests__/Select.browser.test.tsx index 70e4f3aa..c2810759 100644 --- a/packages/ui/src/Select/__tests__/Select.browser.test.tsx +++ b/packages/ui/src/Select/__tests__/Select.browser.test.tsx @@ -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( + , + ); + + (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();