diff --git a/packages/react/src/components/form/Combobox/Combobox.test.tsx b/packages/react/src/components/form/Combobox/Combobox.test.tsx index f2e7756d1d..d2629c0bef 100644 --- a/packages/react/src/components/form/Combobox/Combobox.test.tsx +++ b/packages/react/src/components/form/Combobox/Combobox.test.tsx @@ -312,6 +312,22 @@ describe('Combobox', () => { expect(formData.getAll('test')).toEqual(['leikanger', 'oslo']); }); + it('should show all options when we are in signle mode, and have a value selected', async () => { + await render(); + const combobox = screen.getByRole('combobox'); + + await userEvent.click(combobox); + await userEvent.click(screen.getByText('Leikanger')); + + await wait(500); + + await userEvent.click(combobox); + + expect(screen.getByText('Leikanger')).toBeInTheDocument(); + expect(screen.getByText('Oslo')).toBeInTheDocument(); + expect(screen.getByText('Brønnøysund')).toBeInTheDocument(); + }); + it('should only call onValueChange once when we click the same option fast twice', async () => { const onValueChange = vi.fn(); await render({ onValueChange, multiple: true }); diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx index c1f8c7ec66..caea3c1674 100644 --- a/packages/react/src/components/form/Combobox/Combobox.tsx +++ b/packages/react/src/components/form/Combobox/Combobox.tsx @@ -263,6 +263,10 @@ export const ComboboxComponent = forwardRef( setInputValue(''); inputRef.current?.focus(); } else { + /* clear newSelectedOptions */ + Object.keys(newSelectedOptions).forEach((key) => { + delete newSelectedOptions[key]; + }); newSelectedOptions[option.value] = option; setInputValue(option?.label || ''); // move cursor to the end of the input @@ -275,7 +279,6 @@ export const ComboboxComponent = forwardRef( } setSelectedOptions(newSelectedOptions); - console.log('calling new value with: ', Object.keys(newSelectedOptions)); onValueChange?.(Object.keys(newSelectedOptions)); !multiple && setOpen(false); diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx index dec953d4cb..4d0cc86f76 100644 --- a/packages/react/src/components/form/Combobox/useCombobox.tsx +++ b/packages/react/src/components/form/Combobox/useCombobox.tsx @@ -147,8 +147,14 @@ export default function useCombobox({ const { filteredOptions, filteredOptionsChildren } = useMemo(() => { const filteredOptions: string[] = []; - const filteredOptionsChildren = Object.keys(options) - .map((option, index) => { + const filteredOptionsChildren = Object.keys(options).map( + (option, index) => { + /* If we have a selected value in single mode and the input matches an option, return all children */ + if (!multiple && Object.keys(selectedOptions).length === 1) { + filteredOptions.push(options[option].value); + return optionsChildren[index]; + } + if (multiple && selectedOptions[option]) { filteredOptions.push(options[option].value); return optionsChildren[index]; @@ -157,8 +163,8 @@ export default function useCombobox({ filteredOptions.push(options[option].value); return optionsChildren[index]; } - }) - .filter((child) => child); + }, + ); return { filteredOptions, filteredOptionsChildren }; // eslint-disable-next-line react-hooks/exhaustive-deps