fix(Combobox): Show all options in single mode when a value is select…

…ed (#1983)
digdir · May 14, 2024 · ac82b50 · ac82b50
1 parent 73dc724
commit ac82b50
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git 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
@@ -263,6 +263,10 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
         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<HTMLInputElement, ComboboxProps>(
       }
 
       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
@@ -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