From 24fa39f5124c9fc0b01590ad3f1e7960c54e5f35 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 09:41:39 +0200
Subject: [PATCH 01/47] fix(Combobox): Re-renders

---
 .../form/Combobox/Combobox.stories.tsx        | 30 +++++++++++++++++++
 .../components/form/Combobox/useCombobox.tsx  |  4 +++
 2 files changed, 34 insertions(+)

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
index 410ab2aaa6..33f34d9646 100644
--- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -597,3 +597,33 @@ CustomNewValue.args = {
   size: 'medium',
   label: 'Hvor går reisen?',
 };
+
+const items = Array.from({ length: 1000 }, (_, index) => ({
+  name: `Option ${index}`,
+  value: `option-${index}`,
+}));
+
+export const ThousandsOfOptions: StoryFn<typeof Combobox> = (args) => {
+  const [value, setValue] = React.useState<string[]>([]);
+
+  return (
+    <Combobox
+      {...args}
+      value={value}
+      onValueChange={(value) => {
+        setValue(value);
+      }}
+      virtual={true}
+    >
+      <Combobox.Empty>Fant ingen treff</Combobox.Empty>
+      {items.map((item, index) => (
+        <Combobox.Option
+          key={index}
+          value={item.value}
+        >
+          {item.name}
+        </Combobox.Option>
+      ))}
+    </Combobox>
+  );
+};
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 1787e9492d..01bbbec35e 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -50,6 +50,7 @@ export default function useCombobox({
   initialValue,
 }: UseComboboxProps) {
   const options = useMemo(() => {
+    console.log('useMemo options ran');
     const allOptions: Option[] = [];
     Children.forEach(children, (child) => {
       if (isComboboxOption(child)) {
@@ -95,6 +96,7 @@ export default function useCombobox({
     JSON.stringify(selectedOptions),
   );
   const optionsChildren = useMemo(() => {
+    console.log('useMemo optionsChildren ran');
     const valuesArray = Array.from(options);
     const children_ = Children.toArray(children).filter((child) =>
       isComboboxOption(child),
@@ -122,6 +124,7 @@ export default function useCombobox({
   }, [options, children, multiple, inputValue, selectedOptions, filter]);
 
   const customIds = useMemo(() => {
+    console.log('useMemo customIds ran');
     // find all custom components with `interactive=true` and generate random values for them
     const children_ = Children.toArray(children).filter((child) => {
       return isInteractiveComboboxCustom(child);
@@ -147,6 +150,7 @@ export default function useCombobox({
   }, [customIds, optionsChildren]);
 
   const restChildren = useMemo(() => {
+    console.log('useMemo restChildren ran');
     return Children.toArray(children).filter((child) => {
       return !isComboboxOption(child);
     });

From 1f2a6b4305f6cdcb84c3f8f270c09b2935880050 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 11:32:30 +0200
Subject: [PATCH 02/47] some more optimizations

---
 .../form/Combobox/Combobox.stories.tsx        |  3 +-
 .../components/form/Combobox/useCombobox.tsx  | 50 +++++++++++++------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
index 33f34d9646..a6aa86ccfd 100644
--- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -598,7 +598,7 @@ CustomNewValue.args = {
   label: 'Hvor går reisen?',
 };
 
-const items = Array.from({ length: 1000 }, (_, index) => ({
+const items = Array.from({ length: 5000 }, (_, index) => ({
   name: `Option ${index}`,
   value: `option-${index}`,
 }));
@@ -613,7 +613,6 @@ export const ThousandsOfOptions: StoryFn<typeof Combobox> = (args) => {
       onValueChange={(value) => {
         setValue(value);
       }}
-      virtual={true}
     >
       <Combobox.Empty>Fant ingen treff</Combobox.Empty>
       {items.map((item, index) => (
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 01bbbec35e..5771c25fcc 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -95,8 +95,26 @@ export default function useCombobox({
   const [prevSelectedHash, setPrevSelectedHash] = useState(
     JSON.stringify(selectedOptions),
   );
-  const optionsChildren = useMemo(() => {
-    console.log('useMemo optionsChildren ran');
+
+  const selectedOptionsLookup = useMemo(() => {
+    const lookup: {
+      [key: string]: boolean;
+    } = {};
+    selectedOptions.forEach((option) => {
+      lookup[option.value] = true;
+    });
+    return lookup;
+  }, [selectedOptions]);
+
+  const { optionsChildren, customIds } = useMemo(() => {
+    console.log('useMemo optionsChildren and customIds ran', {
+      options,
+      multiple,
+      inputValue,
+      selectedOptionsLookup,
+    });
+    let optionsChildren;
+
     const valuesArray = Array.from(options);
     const children_ = Children.toArray(children).filter((child) =>
       isComboboxOption(child),
@@ -104,40 +122,42 @@ export default function useCombobox({
 
     const activeValue = valuesArray.find((item) => item.label === inputValue);
 
-    if (activeValue && !multiple) return children_;
-    if (inputValue === '' && !multiple) return children_;
+    if (activeValue && !multiple) {
+      optionsChildren = children_;
+    }
+    if (inputValue === '' && !multiple) {
+      optionsChildren = children_;
+    }
 
-    return children_.filter((child) => {
+    optionsChildren = children_.filter((child) => {
       const { value } = child.props;
 
       const option = valuesArray.find((item) => item.value === value);
 
       if (!option) return false;
 
-      const isSelected = selectedOptions.some(
-        (selectedOption) => selectedOption.value === value,
-      );
+      const isSelected = selectedOptionsLookup[value];
 
       // show what we search for, and all selected options
       return filter(inputValue, { ...option }) || isSelected;
     });
-  }, [options, children, multiple, inputValue, selectedOptions, filter]);
-
-  const customIds = useMemo(() => {
-    console.log('useMemo customIds ran');
     // find all custom components with `interactive=true` and generate random values for them
-    const children_ = Children.toArray(children).filter((child) => {
+    const customChildren = children_.filter((child) => {
       return isInteractiveComboboxCustom(child);
     }) as ReactElement<ComboboxCustomProps>[];
 
     // return all ids
-    return children_.map((child) => {
+    const customIds = customChildren.map((child) => {
       if (!child.props.id)
         throw new Error('If ComboboxCustom is interactive, it must have an id');
 
       return child.props.id;
     });
-  }, [children]);
+
+    return { optionsChildren, customIds };
+
+    // ignore filter function in deps array, it causes a lot of re-renders
+  }, [options, multiple, inputValue, selectedOptionsLookup, children]);
 
   const optionValues = useMemo(() => {
     // create an index map of values from optionsChildren

From 76a741cd8ea9edd840945e7a619e4794cd0c7d18 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 11:46:21 +0200
Subject: [PATCH 03/47] options as object to lookup faster

---
 .../src/components/form/Combobox/Combobox.tsx | 22 +++++++++----------
 .../form/Combobox/internal/ComboboxInput.tsx  |  2 +-
 .../components/form/Combobox/useCombobox.tsx  | 12 +++++-----
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index b64062ad6c..1ad566e90f 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -239,7 +239,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     // if value is set, set input value to the label of the value
     useEffect(() => {
       if (value && value.length > 0 && !multiple) {
-        const option = options.find((option) => option.value === value[0]);
+        const option = options[value[0]];
         setInputValue(option?.label || '');
       }
     }, [multiple, value, options]);
@@ -313,10 +313,10 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
 
     useEffect(() => {
-      if (value && options.length > 0) {
+      if (value && Object.keys(options).length > 0) {
         const updatedSelectedOptions = value.map((option) => {
-          const value = options.find((value) => value.value === option);
-          return value as Option;
+          const value = options[option];
+          return value;
         });
 
         setSelectedOptions(updatedSelectedOptions);
@@ -419,9 +419,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
             const child = optionsChildren[valueIndex];
             if (isComboboxOption(child)) {
               const props = child.props;
-              const option = options.find(
-                (option) => option.value === props.value,
-              );
+              const option = options[props.value];
 
               if (!multiple) {
                 // check if option is already selected, if so, deselect it
@@ -432,7 +430,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
                 }
               }
 
-              debouncedHandleSelectOption(option as Option);
+              debouncedHandleSelectOption(option);
             }
           }
           break;
@@ -505,8 +503,8 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           onOptionClick: (value: string) => {
             if (readOnly) return;
             if (disabled) return;
-            const option = options.find((option) => option.value === value);
-            debouncedHandleSelectOption(option as Option);
+            const option = options[value];
+            debouncedHandleSelectOption(option);
           },
           handleSelectOption: debouncedHandleSelectOption,
           chipSrLabel,
@@ -637,7 +635,9 @@ type ComboboxContextType = {
   hideChips: NonNullable<ComboboxProps['hideChips']>;
   clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
   hideClearButton: NonNullable<ComboboxProps['hideClearButton']>;
-  options: Option[];
+  options: {
+    [key: string]: Option;
+  };
   selectedOptions: Option[];
   size: NonNullable<ComboboxProps['size']>;
   formFieldProps: ReturnType<typeof useFormField>;
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index 2fe10f2c77..142596f84c 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -84,7 +84,7 @@ export const ComboboxInput = ({
     }
 
     // check if input value is the same as a label, if so, select it
-    const option = options.find((option) => option.label === value);
+    const option = options[value];
     if (!option) return;
     if (
       selectedOptions.find(
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 5771c25fcc..531cbd2062 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -51,7 +51,9 @@ export default function useCombobox({
 }: UseComboboxProps) {
   const options = useMemo(() => {
     console.log('useMemo options ran');
-    const allOptions: Option[] = [];
+    const allOptions: {
+      [key: string]: Option;
+    } = {};
     Children.forEach(children, (child) => {
       if (isComboboxOption(child)) {
         const props = child.props;
@@ -74,19 +76,19 @@ export default function useCombobox({
           label = childrenLabel;
         }
 
-        allOptions.push({
+        allOptions[props.value] = {
           value: props.value,
           label,
           displayValue: props.displayValue,
           description: props.description,
-        });
+        };
       }
     });
     return allOptions;
   }, [children]);
 
   const preSelectedOptions = (initialValue || [])
-    .map((value) => options.find((option) => option.value === value))
+    .map((value) => options[value])
     .filter(isOption);
 
   const [selectedOptions, setSelectedOptions] =
@@ -115,7 +117,7 @@ export default function useCombobox({
     });
     let optionsChildren;
 
-    const valuesArray = Array.from(options);
+    const valuesArray = Object.values(options);
     const children_ = Children.toArray(children).filter((child) =>
       isComboboxOption(child),
     ) as ReactElement<ComboboxOptionProps>[];

From 2c9be2aa3a96ae2b665ac43581c876990bc06f67 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 12:03:50 +0200
Subject: [PATCH 04/47] update tests, some misc

---
 .../components/form/Combobox/Combobox.stories.tsx    |  2 +-
 .../react/src/components/form/Combobox/Combobox.tsx  |  4 ++--
 .../components/form/Combobox/useCombobox.test.tsx    | 12 ++++++------
 .../src/components/form/Combobox/useCombobox.tsx     |  9 +--------
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
index a6aa86ccfd..90eb6b4bd2 100644
--- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -598,7 +598,7 @@ CustomNewValue.args = {
   label: 'Hvor går reisen?',
 };
 
-const items = Array.from({ length: 5000 }, (_, index) => ({
+const items = Array.from({ length: 1500 }, (_, index) => ({
   name: `Option ${index}`,
   value: `option-${index}`,
 }));
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 1ad566e90f..564b951e94 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -357,7 +357,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // handle keyboard navigation in the list
     const handleKeyDownFunc = (event: React.KeyboardEvent) => {
-      const navigateable = customIds.length + optionsChildren.length;
+      const navigateable = customIds.length + Object.keys(options).length;
 
       if (formFieldProps.readOnly || disabled) return;
       if (!event) return;
@@ -453,7 +453,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     const handleKeyDown = useDebounce(handleKeyDownFunc, 20);
 
     const rowVirtualizer = useVirtualizer({
-      count: optionsChildren.length,
+      count: Object.keys(options).length,
       getScrollElement: () => refs.floating.current,
       estimateSize: () => 70,
       measureElement: (elem) => {
diff --git a/packages/react/src/components/form/Combobox/useCombobox.test.tsx b/packages/react/src/components/form/Combobox/useCombobox.test.tsx
index 3fe29dc161..225855a8e4 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.test.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.test.tsx
@@ -58,7 +58,7 @@ describe('useCombobox', () => {
       multiple: false,
     });
 
-    expect(result.current.options.length).toBe(3);
+    expect(Object.keys(result.current.options).length).toBe(3);
     expect(result.current.optionsChildren.length).toBe(3);
     expect(result.current.restChildren.length).toBe(1);
   });
@@ -69,7 +69,7 @@ describe('useCombobox', () => {
       multiple: false,
     });
 
-    expect(result.current.options.length).toBe(3);
+    expect(Object.keys(result.current.options).length).toBe(3);
     expect(result.current.optionsChildren.length).toBe(0);
     expect(result.current.restChildren.length).toBe(1);
   });
@@ -81,7 +81,7 @@ describe('useCombobox', () => {
       initialValue: ['oslo'],
     });
 
-    expect(result.current.options.length).toBe(3);
+    expect(Object.keys(result.current.options).length).toBe(3);
     expect(result.current.optionsChildren.length).toBe(1);
     expect(result.current.restChildren.length).toBe(1);
   });
@@ -93,7 +93,7 @@ describe('useCombobox', () => {
       initialValue: ['oslo'],
     });
 
-    expect(result.current.options.length).toBe(3);
+    expect(Object.keys(result.current.options).length).toBe(3);
     expect(result.current.optionsChildren.length).toBe(1);
     expect(result.current.restChildren.length).toBe(1);
   });
@@ -104,7 +104,7 @@ describe('useCombobox', () => {
       multiple: false,
     });
 
-    expect(result.current.options.length).toBe(3);
+    expect(Object.keys(result.current.options).length).toBe(3);
     expect(result.current.optionsChildren.length).toBe(1);
     expect(result.current.restChildren.length).toBe(1);
   });
@@ -116,7 +116,7 @@ describe('useCombobox', () => {
       initialValue: ['oslo'],
     });
 
-    expect(result.current.options.length).toBe(3);
+    expect(Object.keys(result.current.options).length).toBe(3);
     expect(result.current.optionsChildren.length).toBe(2);
     expect(result.current.restChildren.length).toBe(1);
   });
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 531cbd2062..2871c801cc 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -50,7 +50,6 @@ export default function useCombobox({
   initialValue,
 }: UseComboboxProps) {
   const options = useMemo(() => {
-    console.log('useMemo options ran');
     const allOptions: {
       [key: string]: Option;
     } = {};
@@ -109,12 +108,6 @@ export default function useCombobox({
   }, [selectedOptions]);
 
   const { optionsChildren, customIds } = useMemo(() => {
-    console.log('useMemo optionsChildren and customIds ran', {
-      options,
-      multiple,
-      inputValue,
-      selectedOptionsLookup,
-    });
     let optionsChildren;
 
     const valuesArray = Object.values(options);
@@ -159,6 +152,7 @@ export default function useCombobox({
     return { optionsChildren, customIds };
 
     // ignore filter function in deps array, it causes a lot of re-renders
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options, multiple, inputValue, selectedOptionsLookup, children]);
 
   const optionValues = useMemo(() => {
@@ -172,7 +166,6 @@ export default function useCombobox({
   }, [customIds, optionsChildren]);
 
   const restChildren = useMemo(() => {
-    console.log('useMemo restChildren ran');
     return Children.toArray(children).filter((child) => {
       return !isComboboxOption(child);
     });

From b5fdded71c823d69b543d3945b89d86e50b42036 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 12:31:11 +0200
Subject: [PATCH 05/47] `selectedOptions` is an array

---
 .../src/components/form/Combobox/Combobox.tsx | 59 ++++++++++++++-----
 .../form/Combobox/Option/Option.tsx           |  2 +-
 .../form/Combobox/internal/ComboboxChips.tsx  | 22 +++----
 .../Combobox/internal/ComboboxClearButton.tsx |  4 +-
 .../form/Combobox/internal/ComboboxInput.tsx  |  9 +--
 .../form/Combobox/internal/ComboboxNative.tsx | 14 +++--
 .../components/form/Combobox/useCombobox.tsx  | 31 +++++-----
 7 files changed, 84 insertions(+), 57 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 564b951e94..769edba975 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -307,7 +307,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       const selectedHash = JSON.stringify(selectedOptions);
       if (prevSelectedHash === selectedHash) return;
 
-      const values = selectedOptions.map((option) => option.value);
+      const values = Object.keys(selectedOptions);
       onValueChange?.(values);
       setPrevSelectedHash(selectedHash);
     }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
@@ -319,7 +319,14 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           return value;
         });
 
-        setSelectedOptions(updatedSelectedOptions);
+        setSelectedOptions(
+          updatedSelectedOptions.reduce<{
+            [key: string]: Option;
+          }>((acc, value) => {
+            acc[value.value] = value;
+            return acc;
+          }, {}),
+        );
       }
     }, [multiple, prevSelectedHash, value, options, setSelectedOptions]);
 
@@ -327,18 +334,27 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     const handleSelectOption = (option: Option) => {
       // if option is already selected, remove it
       if (value && value.includes(option.value)) {
-        setSelectedOptions((prev) =>
-          prev.filter((i) => i.value !== option.value),
-        );
+        setSelectedOptions((prev) => {
+          const updated = { ...prev };
+          delete updated[option.value];
+          return updated;
+        });
         return;
       }
 
       if (multiple) {
-        setSelectedOptions([...selectedOptions, option]);
+        /* setSelectedOptions([...selectedOptions, option]); */
+        setSelectedOptions((prev) => {
+          const updated = { ...prev };
+          updated[option.value] = option;
+          return updated;
+        });
         setInputValue('');
         inputRef.current?.focus();
       } else {
-        setSelectedOptions([option]);
+        setSelectedOptions({
+          [option.value]: option,
+        });
         setInputValue(option?.label || '');
         // move cursor to the end of the input
         setTimeout(() => {
@@ -423,8 +439,8 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
               if (!multiple) {
                 // check if option is already selected, if so, deselect it
-                if (selectedOptions.find((i) => i.value === option?.value)) {
-                  setSelectedOptions([]);
+                if (selectedOptions[option?.value]) {
+                  setSelectedOptions({});
                   setInputValue('');
                   return;
                 }
@@ -436,12 +452,21 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           break;
 
         case 'Backspace':
-          if (inputValue === '' && multiple && selectedOptions.length > 0) {
-            setSelectedOptions((prev) => prev.slice(0, prev.length - 1));
+          if (
+            inputValue === '' &&
+            multiple &&
+            Object.keys(selectedOptions).length > 0
+          ) {
+            setSelectedOptions((prev) => {
+              const updated = { ...prev };
+              const keys = Object.keys(updated);
+              delete updated[keys[keys.length - 1]];
+              return updated;
+            });
           }
           // if we are in single mode, we need to set activeValue to null
           if (!multiple) {
-            setSelectedOptions([]);
+            setSelectedOptions({});
           }
           break;
 
@@ -638,7 +663,9 @@ type ComboboxContextType = {
   options: {
     [key: string]: Option;
   };
-  selectedOptions: Option[];
+  selectedOptions: {
+    [key: string]: Option;
+  };
   size: NonNullable<ComboboxProps['size']>;
   formFieldProps: ReturnType<typeof useFormField>;
   refs: UseFloatingReturn['refs'];
@@ -658,7 +685,11 @@ type ComboboxContextType = {
     props?: Record<string, unknown>,
   ) => Record<string, unknown>;
   onOptionClick: (value: string) => void;
-  setSelectedOptions: React.Dispatch<React.SetStateAction<Option[]>>;
+  setSelectedOptions: React.Dispatch<
+    React.SetStateAction<{
+      [key: string]: Option;
+    }>
+  >;
   chipSrLabel: NonNullable<ComboboxProps['chipSrLabel']>;
   handleSelectOption: (option: Option) => void;
   listRef: UseListNavigationProps['listRef'];
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 4eb4f2306d..2df2e0d685 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -67,7 +67,7 @@ export const ComboboxOption = forwardRef<
     throw new Error('Internal error: ComboboxOption did not find index');
   }
 
-  const selected = selectedOptions.find((option) => option.value === value);
+  const selected = selectedOptions[value];
 
   useEffect(() => {
     if (activeIndex === index) setActiveOption(index, rest.id || generatedId);
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
index 8d114a6505..5764a8a131 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
@@ -22,10 +22,10 @@ export const ComboboxChips = () => {
 
   return (
     <>
-      {selectedOptions.map((option) => {
+      {Object.keys(selectedOptions).map((value) => {
         return (
           <ChipRemovable
-            key={option.value}
+            key={value}
             size={size}
             disabled={disabled}
             onKeyDown={(e) => {
@@ -33,9 +33,10 @@ export const ComboboxChips = () => {
               if (disabled) return;
               if (e.key === 'Enter') {
                 e.stopPropagation();
-                setSelectedOptions(
-                  selectedOptions.filter((i) => i.value !== option.value),
-                );
+                setSelectedOptions((prev) => {
+                  const { [value]: _, ...rest } = prev;
+                  return rest;
+                });
                 inputRef.current?.focus();
               }
             }}
@@ -43,17 +44,18 @@ export const ComboboxChips = () => {
               if (readOnly) return;
               if (disabled) return;
               /* If we click a chip, filter the active values and remove the one we clicked */
-              setSelectedOptions(
-                selectedOptions.filter((i) => i.value !== option.value),
-              );
+              setSelectedOptions((prev) => {
+                const { [value]: _, ...rest } = prev;
+                return rest;
+              });
             }}
             style={{
               /* We already set the opacity on Combobox */
               opacity: 1,
             }}
-            aria-label={chipSrLabel(option)}
+            aria-label={chipSrLabel(selectedOptions[value])}
           >
-            {option.label}
+            {selectedOptions[value].label}
           </ChipRemovable>
         );
       })}
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
index 8ef749ad79..c957f8fa00 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
@@ -29,7 +29,7 @@ export const ComboboxClearButton = () => {
       onClick={() => {
         if (readOnly) return;
         if (disabled) return;
-        setSelectedOptions([]);
+        setSelectedOptions({});
         setInputValue('');
       }}
       onKeyDown={(e) => {
@@ -37,7 +37,7 @@ export const ComboboxClearButton = () => {
         if (disabled) return;
         if (e.key === 'Enter') {
           e.stopPropagation();
-          setSelectedOptions([]);
+          setSelectedOptions({});
           setInputValue('');
           inputRef.current?.focus();
         }
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index 142596f84c..f1c4e5028f 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -86,12 +86,7 @@ export const ComboboxInput = ({
     // check if input value is the same as a label, if so, select it
     const option = options[value];
     if (!option) return;
-    if (
-      selectedOptions.find(
-        (selectedOption) => selectedOption.value === option.value,
-      )
-    )
-      return;
+    if (selectedOptions[option.value]) return;
 
     handleSelectOption(option);
 
@@ -109,7 +104,7 @@ export const ComboboxInput = ({
   };
 
   const showClearButton =
-    multiple && !hideClearButton && selectedOptions.length > 0;
+    multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
 
   return (
     <Box
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxNative.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxNative.tsx
index 0b8d31b91e..621e6b7760 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxNative.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxNative.tsx
@@ -2,7 +2,9 @@ import type { Option } from '../useCombobox';
 import type { ComboboxProps } from '../Combobox';
 
 type ComboboxNativeProps = {
-  selectedOptions: Option[];
+  selectedOptions: {
+    [key: string]: Option;
+  };
   multiple: NonNullable<ComboboxProps['multiple']>;
   name: ComboboxProps['name'];
 };
@@ -19,15 +21,15 @@ export const ComboboxNative = ({
       style={{ display: 'none' }}
       value={
         multiple
-          ? selectedOptions.map((option) => option.value)
-          : selectedOptions[0]?.value
+          ? Object.keys(selectedOptions)
+          : Object.keys(selectedOptions)[0]
       }
       onChange={() => {}}
     >
-      {selectedOptions.map((option) => (
+      {Object.keys(selectedOptions).map((value) => (
         <option
-          key={option.value}
-          value={option.value}
+          key={value}
+          value={value}
         />
       ))}
     </select>
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 2871c801cc..2aa885733a 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -86,27 +86,24 @@ export default function useCombobox({
     return allOptions;
   }, [children]);
 
-  const preSelectedOptions = (initialValue || [])
-    .map((value) => options[value])
-    .filter(isOption);
+  const preSelectedOptions = (initialValue || []).reduce<{
+    [key: string]: Option;
+  }>((acc, value) => {
+    const option = options[value];
+    if (isOption(option)) {
+      acc[value] = option;
+    }
+    return acc;
+  }, {});
 
-  const [selectedOptions, setSelectedOptions] =
-    useState<Option[]>(preSelectedOptions);
+  const [selectedOptions, setSelectedOptions] = useState<{
+    [key: string]: Option;
+  }>(preSelectedOptions);
 
   const [prevSelectedHash, setPrevSelectedHash] = useState(
     JSON.stringify(selectedOptions),
   );
 
-  const selectedOptionsLookup = useMemo(() => {
-    const lookup: {
-      [key: string]: boolean;
-    } = {};
-    selectedOptions.forEach((option) => {
-      lookup[option.value] = true;
-    });
-    return lookup;
-  }, [selectedOptions]);
-
   const { optionsChildren, customIds } = useMemo(() => {
     let optionsChildren;
 
@@ -131,7 +128,7 @@ export default function useCombobox({
 
       if (!option) return false;
 
-      const isSelected = selectedOptionsLookup[value];
+      const isSelected = selectedOptions[value];
 
       // show what we search for, and all selected options
       return filter(inputValue, { ...option }) || isSelected;
@@ -153,7 +150,7 @@ export default function useCombobox({
 
     // ignore filter function in deps array, it causes a lot of re-renders
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, multiple, inputValue, selectedOptionsLookup, children]);
+  }, [options, multiple, inputValue, selectedOptions, children]);
 
   const optionValues = useMemo(() => {
     // create an index map of values from optionsChildren

From 3c69ad5ad805aed3f191769416871dad9d1c64aa Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 12:42:08 +0200
Subject: [PATCH 06/47] build errors

---
 .../src/components/form/Combobox/internal/ComboboxChips.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
index 5764a8a131..788d42798a 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
@@ -34,6 +34,7 @@ export const ComboboxChips = () => {
               if (e.key === 'Enter') {
                 e.stopPropagation();
                 setSelectedOptions((prev) => {
+                  // eslint-disable-next-line @typescript-eslint/no-unused-vars
                   const { [value]: _, ...rest } = prev;
                   return rest;
                 });
@@ -45,6 +46,7 @@ export const ComboboxChips = () => {
               if (disabled) return;
               /* If we click a chip, filter the active values and remove the one we clicked */
               setSelectedOptions((prev) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { [value]: _, ...rest } = prev;
                 return rest;
               });

From 98d44bef761b3dc34c0626c7d139fb40866cb212 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 13:10:34 +0200
Subject: [PATCH 07/47] add consolelogs to figure out why options renders so
 much

---
 packages/react/src/components/form/Combobox/Combobox.tsx  | 8 ++++++++
 .../react/src/components/form/Combobox/Option/Option.tsx  | 2 ++
 .../react/src/components/form/Combobox/useCombobox.tsx    | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 769edba975..11f29c9f08 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -216,6 +216,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     >(undefined);
 
     useEffect(() => {
+      console.log('use effect 1');
       if (rest.inputValue !== undefined) {
         setInputValue(rest.inputValue);
       }
@@ -238,6 +239,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // if value is set, set input value to the label of the value
     useEffect(() => {
+      console.log('use effect 2');
       if (value && value.length > 0 && !multiple) {
         const option = options[value[0]];
         setInputValue(option?.label || '');
@@ -297,6 +299,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // remove active index if combobox is closed
     useEffect(() => {
+      console.log('use effect 3');
       if (!open) {
         setActiveIndex(null);
       }
@@ -304,6 +307,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // Send new value if option was clicked
     useEffect(() => {
+      console.log('use effect 4');
       const selectedHash = JSON.stringify(selectedOptions);
       if (prevSelectedHash === selectedHash) return;
 
@@ -313,6 +317,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
 
     useEffect(() => {
+      console.log('use effect 5');
       if (value && Object.keys(options).length > 0) {
         const updatedSelectedOptions = value.map((option) => {
           const value = options[option];
@@ -332,6 +337,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // handle click on option, either select or deselect - Handles single or multiple
     const handleSelectOption = (option: Option) => {
+      console.log('handleSelectOption');
       // if option is already selected, remove it
       if (value && value.includes(option.value)) {
         setSelectedOptions((prev) => {
@@ -487,6 +493,8 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       overscan: 1,
     });
 
+    console.log('combobox rendered');
+
     return (
       <ComboboxContext.Provider
         value={{
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 2df2e0d685..36731406e4 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -75,6 +75,8 @@ export const ComboboxOption = forwardRef<
 
   const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
 
+  console.log('option rendered');
+
   return (
     <button
       id={rest.id || generatedId}
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 2aa885733a..b1ed01d4eb 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -50,6 +50,7 @@ export default function useCombobox({
   initialValue,
 }: UseComboboxProps) {
   const options = useMemo(() => {
+    console.log('options useCombobox');
     const allOptions: {
       [key: string]: Option;
     } = {};
@@ -89,6 +90,7 @@ export default function useCombobox({
   const preSelectedOptions = (initialValue || []).reduce<{
     [key: string]: Option;
   }>((acc, value) => {
+    console.log('preSelectedOptions useCombobox');
     const option = options[value];
     if (isOption(option)) {
       acc[value] = option;
@@ -105,6 +107,7 @@ export default function useCombobox({
   );
 
   const { optionsChildren, customIds } = useMemo(() => {
+    console.log('optionsChildren useCombobox');
     let optionsChildren;
 
     const valuesArray = Object.values(options);
@@ -153,6 +156,7 @@ export default function useCombobox({
   }, [options, multiple, inputValue, selectedOptions, children]);
 
   const optionValues = useMemo(() => {
+    console.log('optionValues useCombobox');
     // create an index map of values from optionsChildren
     const options = optionsChildren.map((child) => {
       const { value } = child.props;
@@ -163,6 +167,7 @@ export default function useCombobox({
   }, [customIds, optionsChildren]);
 
   const restChildren = useMemo(() => {
+    console.log('restChildren useCombobox');
     return Children.toArray(children).filter((child) => {
       return !isComboboxOption(child);
     });

From b81e9a717ca51a3f08656e2cb9b50ee1cd7eeaad Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 14:02:27 +0200
Subject: [PATCH 08/47] misc work for options and lookup

---
 .../src/components/form/Combobox/Combobox.tsx | 45 +++++++------------
 .../form/Combobox/Custom/Custom.tsx           |  2 +-
 .../form/Combobox/Option/Option.tsx           |  1 +
 .../components/form/Combobox/useCombobox.tsx  | 10 ++++-
 4 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 11f29c9f08..f45b901faf 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -37,10 +37,7 @@ import { omit } from '../../../utilities';
 import { Spinner } from '../../Spinner';
 
 import type { Option } from './useCombobox';
-import useCombobox, {
-  isComboboxOption,
-  isInteractiveComboboxCustom,
-} from './useCombobox';
+import useCombobox, { isInteractiveComboboxCustom } from './useCombobox';
 import classes from './Combobox.module.css';
 import ComboboxInput from './internal/ComboboxInput';
 import ComboboxLabel from './internal/ComboboxLabel';
@@ -201,6 +198,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       restChildren,
       optionValues,
       customIds,
+      filteredOptions,
       prevSelectedHash,
       setPrevSelectedHash,
     } = useCombobox({
@@ -250,6 +248,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({
       open,
       onOpenChange: (newOpen) => {
+        if (!newOpen) setActiveIndex(0);
         flushSync(() => {
           if (refs.floating.current && !newOpen) {
             refs.floating.current.scrollTop = 0;
@@ -297,14 +296,6 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       listNav,
     ]);
 
-    // remove active index if combobox is closed
-    useEffect(() => {
-      console.log('use effect 3');
-      if (!open) {
-        setActiveIndex(null);
-      }
-    }, [open]);
-
     // Send new value if option was clicked
     useEffect(() => {
       console.log('use effect 4');
@@ -379,6 +370,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // handle keyboard navigation in the list
     const handleKeyDownFunc = (event: React.KeyboardEvent) => {
+      console.log('handleKeyDownFunc');
       const navigateable = customIds.length + Object.keys(options).length;
 
       if (formFieldProps.readOnly || disabled) return;
@@ -401,7 +393,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           setActiveIndex((prevActiveIndex) => {
             if (prevActiveIndex === 0) {
               setOpen(false);
-              return null;
+              return 0;
             }
 
             if (prevActiveIndex === null) {
@@ -415,7 +407,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           event.preventDefault();
           if (
             activeIndex !== null &&
-            (optionsChildren[activeIndex] || customIds.length > 0)
+            (filteredOptions[activeIndex] || customIds.length > 0)
           ) {
             // check if we are in the custom components
             if (activeIndex <= customIds.length) {
@@ -438,22 +430,18 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
             // if we are in the options, find the actual index
             const valueIndex = activeIndex - customIds.length;
 
-            const child = optionsChildren[valueIndex];
-            if (isComboboxOption(child)) {
-              const props = child.props;
-              const option = options[props.value];
-
-              if (!multiple) {
-                // check if option is already selected, if so, deselect it
-                if (selectedOptions[option?.value]) {
-                  setSelectedOptions({});
-                  setInputValue('');
-                  return;
-                }
-              }
+            const option = filteredOptions[valueIndex];
 
-              debouncedHandleSelectOption(option);
+            if (!multiple) {
+              // check if option is already selected, if so, deselect it
+              if (selectedOptions[option?.value]) {
+                setSelectedOptions({});
+                setInputValue('');
+                return;
+              }
             }
+
+            debouncedHandleSelectOption(option);
           }
           break;
 
@@ -494,6 +482,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     });
 
     console.log('combobox rendered');
+    console.log({ activeIndex });
 
     return (
       <ComboboxContext.Provider
diff --git a/packages/react/src/components/form/Combobox/Custom/Custom.tsx b/packages/react/src/components/form/Combobox/Custom/Custom.tsx
index 984a1ab826..2203bba00a 100644
--- a/packages/react/src/components/form/Combobox/Custom/Custom.tsx
+++ b/packages/react/src/components/form/Combobox/Custom/Custom.tsx
@@ -59,7 +59,7 @@ export const ComboboxCustom = forwardRef<HTMLDivElement, ComboboxCustomProps>(
     const { size, activeIndex, optionValues, setActiveIndex } = context;
 
     const index = useMemo(
-      () => id && optionValues.indexOf(id),
+      () => (id && optionValues.indexOf(id)) || 0,
       [optionValues, id],
     );
 
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 36731406e4..9b24c2dd0a 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -70,6 +70,7 @@ export const ComboboxOption = forwardRef<
   const selected = selectedOptions[value];
 
   useEffect(() => {
+    console.log('option effect');
     if (activeIndex === index) setActiveOption(index, rest.id || generatedId);
   }, [activeIndex, generatedId, index, rest.id, setActiveOption]);
 
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index b1ed01d4eb..62a1873cae 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -49,6 +49,7 @@ export default function useCombobox({
   filter,
   initialValue,
 }: UseComboboxProps) {
+  console.log('useCombobox');
   const options = useMemo(() => {
     console.log('options useCombobox');
     const allOptions: {
@@ -106,7 +107,7 @@ export default function useCombobox({
     JSON.stringify(selectedOptions),
   );
 
-  const { optionsChildren, customIds } = useMemo(() => {
+  const { optionsChildren, customIds, filteredOptions } = useMemo(() => {
     console.log('optionsChildren useCombobox');
     let optionsChildren;
 
@@ -149,7 +150,11 @@ export default function useCombobox({
       return child.props.id;
     });
 
-    return { optionsChildren, customIds };
+    const filteredOptions: Option[] = optionsChildren.map((child) => {
+      return selectedOptions[child.props.value];
+    });
+
+    return { optionsChildren, customIds, filteredOptions };
 
     // ignore filter function in deps array, it causes a lot of re-renders
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -175,6 +180,7 @@ export default function useCombobox({
 
   return {
     optionsChildren,
+    filteredOptions,
     optionValues,
     restChildren,
     options,

From 18d87f248a126e8576facdb00c984c1e9609f55d Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 15:04:50 +0200
Subject: [PATCH 09/47] more console logs, add `useComboboxOption`

---
 .../form/Combobox/Option/Option.tsx           | 61 ++++-------------
 .../Combobox/Option/useComboboxOption.tsx     | 68 +++++++++++++++++++
 .../components/form/Combobox/useCombobox.tsx  | 60 ++++++++++++----
 3 files changed, 129 insertions(+), 60 deletions(-)
 create mode 100644 packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx

diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 9b24c2dd0a..e9cdff88a4 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -1,17 +1,15 @@
-import { forwardRef, useContext, useEffect, useId, useMemo } from 'react';
+import { forwardRef, useContext, useId } from 'react';
 import type * as React from 'react';
 import cl from 'clsx';
-import { useMergeRefs } from '@floating-ui/react';
 
-import { ComboboxContext } from '../Combobox';
 import { Label } from '../../../Typography';
-// import ComboboxCheckbox from '../internal/ComboboxCheckbox';
 import { omit } from '../../../../utilities';
-import useDebounce from '../../../../utilities/useDebounce';
+import { ComboboxContext } from '../Combobox';
 
 import { SelectedIcon } from './Icon/SelectedIcon';
 import classes from './Option.module.css';
 import ComboboxOptionDescription from './Description/Description';
+import useComboboxOption from './useComboboxOption';
 
 export type ComboboxOptionProps = {
   /**
@@ -32,62 +30,31 @@ export type ComboboxOptionProps = {
 export const ComboboxOption = forwardRef<
   HTMLButtonElement,
   ComboboxOptionProps
->(({ value, description, children, className, ...rest }, ref) => {
+>(({ value, description, children, className, ...rest }, forwardedRef) => {
   const labelId = useId();
-  const generatedId = useId();
+
+  const { id, ref, selected, index, onOptionClick } = useComboboxOption({
+    restId: rest.id,
+    ref: forwardedRef,
+    value,
+  });
 
   const context = useContext(ComboboxContext);
   if (!context) {
     throw new Error('ComboboxOption must be used within a Combobox');
   }
-  const {
-    selectedOptions,
-    activeIndex,
-    setActiveOption,
-    onOptionClick,
-    size,
-    listRef,
-    optionValues,
-    multiple,
-  } = context;
-
-  const index = useMemo(
-    () => optionValues.indexOf(value),
-    [optionValues, value],
-  );
-
-  const combinedRef = useMergeRefs([
-    (node: HTMLElement | null) => {
-      listRef.current[index] = node;
-    },
-    ref,
-  ]);
-
-  if (index === -1) {
-    throw new Error('Internal error: ComboboxOption did not find index');
-  }
-
-  const selected = selectedOptions[value];
-
-  useEffect(() => {
-    console.log('option effect');
-    if (activeIndex === index) setActiveOption(index, rest.id || generatedId);
-  }, [activeIndex, generatedId, index, rest.id, setActiveOption]);
-
-  const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
-
-  console.log('option rendered');
+  const { activeIndex, setActiveOption, size, multiple } = context;
 
   return (
     <button
-      id={rest.id || generatedId}
+      id={id}
       role='option'
       type='button'
       aria-selected={!!selected}
       aria-labelledby={labelId}
       tabIndex={-1}
       onClick={(e) => {
-        onOptionClickDebounced();
+        onOptionClick();
         rest.onClick?.(e);
       }}
       onMouseEnter={(e) => {
@@ -105,7 +72,7 @@ export const ComboboxOption = forwardRef<
         multiple && classes.multiple,
         className,
       )}
-      ref={combinedRef}
+      ref={ref}
       {...omit(['displayValue'], rest)}
     >
       <Label
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
new file mode 100644
index 0000000000..f66ce75d9f
--- /dev/null
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -0,0 +1,68 @@
+import { useContext, useEffect, useId, useMemo } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { ComboboxContext } from '../Combobox';
+import useDebounce from '../../../../utilities/useDebounce';
+
+type UseComboboxOptionProps = {
+  restId?: string;
+  ref: React.Ref<HTMLButtonElement>;
+  value: string;
+};
+
+export default function useComboboxOption({
+  restId,
+  ref,
+  value,
+}: UseComboboxOptionProps) {
+  console.log('useComboboxOption');
+
+  const generatedId = useId();
+  const id = restId || generatedId;
+
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error('ComboboxOption must be used within a Combobox');
+  }
+  const {
+    selectedOptions,
+    activeIndex,
+    setActiveOption,
+    onOptionClick,
+    listRef,
+    optionValues,
+  } = context;
+
+  const index = useMemo(
+    () => optionValues.indexOf(value),
+    [optionValues, value],
+  );
+
+  const combinedRef = useMergeRefs([
+    (node: HTMLElement | null) => {
+      listRef.current[index] = node;
+    },
+    ref,
+  ]);
+
+  if (index === -1) {
+    throw new Error('Internal error: ComboboxOption did not find index');
+  }
+
+  const selected = selectedOptions[value];
+
+  useEffect(() => {
+    console.log('option effect');
+    if (activeIndex === index) setActiveOption(index, id);
+  }, [activeIndex, generatedId, index, id, setActiveOption]);
+
+  const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
+
+  return {
+    id,
+    ref: combinedRef,
+    selected,
+    index,
+    onOptionClick: onOptionClickDebounced,
+  };
+}
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 62a1873cae..75af5d5632 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -1,4 +1,4 @@
-import { useMemo, Children, useState, isValidElement } from 'react';
+import { useMemo, Children, useState, isValidElement, useEffect } from 'react';
 import type { ReactNode, ReactElement } from 'react';
 
 import type { ComboboxOptionProps } from './Option/Option';
@@ -50,6 +50,29 @@ export default function useCombobox({
   initialValue,
 }: UseComboboxProps) {
   console.log('useCombobox');
+
+  /* I need to figure out why this is re-rendering, make a useeffect for all props */
+
+  useEffect(() => {
+    console.log('children changes');
+  }, [children]);
+
+  useEffect(() => {
+    console.log('inputValue changes');
+  }, [inputValue]);
+
+  useEffect(() => {
+    console.log('multiple changes');
+  }, [multiple]);
+
+  useEffect(() => {
+    console.log('filter changes');
+  }, [filter]);
+
+  useEffect(() => {
+    console.log('initialValue changes');
+  }, [initialValue]);
+
   const options = useMemo(() => {
     console.log('options useCombobox');
     const allOptions: {
@@ -88,16 +111,20 @@ export default function useCombobox({
     return allOptions;
   }, [children]);
 
-  const preSelectedOptions = (initialValue || []).reduce<{
-    [key: string]: Option;
-  }>((acc, value) => {
-    console.log('preSelectedOptions useCombobox');
-    const option = options[value];
-    if (isOption(option)) {
-      acc[value] = option;
-    }
-    return acc;
-  }, {});
+  const preSelectedOptions = useMemo(
+    () =>
+      (initialValue || []).reduce<{
+        [key: string]: Option;
+      }>((acc, value) => {
+        console.log('preSelectedOptions useCombobox');
+        const option = options[value];
+        if (isOption(option)) {
+          acc[value] = option;
+        }
+        return acc;
+      }, {}),
+    [initialValue, options],
+  );
 
   const [selectedOptions, setSelectedOptions] = useState<{
     [key: string]: Option;
@@ -107,6 +134,14 @@ export default function useCombobox({
     JSON.stringify(selectedOptions),
   );
 
+  useEffect(() => {
+    console.log('selectedOptions changed');
+  }, [selectedOptions]);
+
+  useEffect(() => {
+    console.log('prevSelectedHash changed');
+  }, [prevSelectedHash]);
+
   const { optionsChildren, customIds, filteredOptions } = useMemo(() => {
     console.log('optionsChildren useCombobox');
     let optionsChildren;
@@ -157,8 +192,7 @@ export default function useCombobox({
     return { optionsChildren, customIds, filteredOptions };
 
     // ignore filter function in deps array, it causes a lot of re-renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, multiple, inputValue, selectedOptions, children]);
+  }, [options, children, multiple, inputValue, selectedOptions]);
 
   const optionValues = useMemo(() => {
     console.log('optionValues useCombobox');

From 5e266d2ad5398e46fc2654e5d955fc819cdb9516 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 8 Apr 2024 15:45:45 +0200
Subject: [PATCH 10/47] move filter to useCombobox

---
 .../src/components/form/Combobox/Combobox.tsx |  4 +-
 .../components/form/Combobox/useCombobox.tsx  | 38 +++----------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index f45b901faf..2934010327 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -172,9 +172,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       style,
       loading,
       loadingLabel = 'Laster...',
-      filter = (inputValue, option) => {
-        return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
-      },
+      filter,
       chipSrLabel = (option) => 'Slett ' + option.label,
       className,
       ...rest
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 75af5d5632..e988cfc076 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -1,4 +1,4 @@
-import { useMemo, Children, useState, isValidElement, useEffect } from 'react';
+import { useMemo, Children, useState, isValidElement } from 'react';
 import type { ReactNode, ReactElement } from 'react';
 
 import type { ComboboxOptionProps } from './Option/Option';
@@ -11,7 +11,7 @@ export type UseComboboxProps = {
   children: ReactNode;
   inputValue: string;
   multiple: boolean;
-  filter: NonNullable<ComboboxProps['filter']>;
+  filter?: NonNullable<ComboboxProps['filter']>;
   initialValue?: string[];
 };
 
@@ -46,33 +46,13 @@ export default function useCombobox({
   children,
   inputValue,
   multiple,
-  filter,
+  filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+  },
   initialValue,
 }: UseComboboxProps) {
   console.log('useCombobox');
 
-  /* I need to figure out why this is re-rendering, make a useeffect for all props */
-
-  useEffect(() => {
-    console.log('children changes');
-  }, [children]);
-
-  useEffect(() => {
-    console.log('inputValue changes');
-  }, [inputValue]);
-
-  useEffect(() => {
-    console.log('multiple changes');
-  }, [multiple]);
-
-  useEffect(() => {
-    console.log('filter changes');
-  }, [filter]);
-
-  useEffect(() => {
-    console.log('initialValue changes');
-  }, [initialValue]);
-
   const options = useMemo(() => {
     console.log('options useCombobox');
     const allOptions: {
@@ -134,14 +114,6 @@ export default function useCombobox({
     JSON.stringify(selectedOptions),
   );
 
-  useEffect(() => {
-    console.log('selectedOptions changed');
-  }, [selectedOptions]);
-
-  useEffect(() => {
-    console.log('prevSelectedHash changed');
-  }, [prevSelectedHash]);
-
   const { optionsChildren, customIds, filteredOptions } = useMemo(() => {
     console.log('optionsChildren useCombobox');
     let optionsChildren;

From a9de2335f0704bd4386aca3525e769ae5732b3b9 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobiasbarsnes@gmail.com>
Date: Mon, 8 Apr 2024 23:04:00 +0200
Subject: [PATCH 11/47] more hooks (remember; add reducer to context)

---
 .../src/components/form/Combobox/Combobox.tsx | 137 +++++-------------
 .../form/Combobox/useFloatingCombobox.tsx     |  91 ++++++++++++
 2 files changed, 131 insertions(+), 97 deletions(-)
 create mode 100644 packages/react/src/components/form/Combobox/useFloatingCombobox.tsx

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 2934010327..03ff6bf491 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -7,26 +7,13 @@ import {
   forwardRef,
 } from 'react';
 import type * as React from 'react';
-import {
-  FloatingFocusManager,
-  autoUpdate,
-  flip,
-  offset,
-  size as floatingSize,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useListNavigation,
-  useRole,
-  FloatingPortal,
-} from '@floating-ui/react';
+import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import cl from 'clsx';
 import type {
   UseFloatingReturn,
   UseListNavigationProps,
 } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { flushSync } from 'react-dom';
 
 import { Box } from '../../Box';
 import type { FormFieldProps } from '../useFormField';
@@ -44,6 +31,7 @@ import ComboboxLabel from './internal/ComboboxLabel';
 import ComboboxError from './internal/ComboboxError';
 import ComboboxNative from './internal/ComboboxNative';
 import ComboboxCustom from './Custom/Custom';
+import { useFloatingCombobox } from './useFloatingCombobox';
 
 export type ComboboxProps = {
   /**
@@ -181,12 +169,14 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const portalRef = useRef<HTMLDivElement>(null);
+    const listRef = useRef<Array<HTMLElement | null>>([]);
 
     const listId = useId();
 
-    const [open, setOpen] = useState(false);
     const [inputValue, setInputValue] = useState<string>(rest.inputValue || '');
-    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const [activeDescendant, setActiveDescendant] = useState<
+      string | undefined
+    >(undefined);
 
     const {
       selectedOptions,
@@ -207,16 +197,19 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       initialValue,
     });
 
-    const [activeDescendant, setActiveDescendant] = useState<
-      string | undefined
-    >(undefined);
-
-    useEffect(() => {
-      console.log('use effect 1');
-      if (rest.inputValue !== undefined) {
-        setInputValue(rest.inputValue);
-      }
-    }, [rest.inputValue]);
+    const {
+      open,
+      setOpen,
+      refs,
+      floatingStyles,
+      context,
+      activeIndex,
+      setActiveIndex,
+      getReferenceProps,
+      getFloatingProps,
+    } = useFloatingCombobox({
+      listRef,
+    });
 
     const formFieldProps = useFormField(
       {
@@ -231,7 +224,12 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       'combobox',
     );
 
-    const listRef = useRef<Array<HTMLElement | null>>([]);
+    useEffect(() => {
+      console.log('use effect 1');
+      if (rest.inputValue !== undefined) {
+        setInputValue(rest.inputValue);
+      }
+    }, [rest.inputValue]);
 
     // if value is set, set input value to the label of the value
     useEffect(() => {
@@ -242,58 +240,6 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       }
     }, [multiple, value, options]);
 
-    // floating UI
-    const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({
-      open,
-      onOpenChange: (newOpen) => {
-        if (!newOpen) setActiveIndex(0);
-        flushSync(() => {
-          if (refs.floating.current && !newOpen) {
-            refs.floating.current.scrollTop = 0;
-          }
-          setTimeout(() => {
-            setOpen(newOpen);
-          }, 1);
-        });
-      },
-      whileElementsMounted: (reference, floating, update) => {
-        autoUpdate(reference, floating, update);
-        return () => {
-          floating.scrollTop = 0;
-        };
-      },
-      middleware: [
-        flip({ padding: 10 }),
-        floatingSize({
-          apply({ rects, elements }) {
-            requestAnimationFrame(() => {
-              Object.assign(elements.floating.style, {
-                width: `calc(${rects.reference.width}px - calc(var(--fds-spacing-2) * 2))`,
-                maxHeight: `200px`,
-              });
-            });
-          },
-        }),
-        offset(10),
-      ],
-    });
-
-    const role = useRole(context, { role: 'listbox' });
-    const dismiss = useDismiss(context);
-    const listNav = useListNavigation(context, {
-      listRef,
-      activeIndex,
-      virtual: true,
-      scrollItemIntoView: true,
-      enabled: open,
-    });
-
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-      role,
-      dismiss,
-      listNav,
-    ]);
-
     // Send new value if option was clicked
     useEffect(() => {
       console.log('use effect 4');
@@ -377,29 +323,25 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
         case 'ArrowDown':
           event.preventDefault();
           if (!open) setOpen(true);
-          setActiveIndex((prevActiveIndex) => {
-            if (prevActiveIndex === null) {
-              return 0;
-            }
 
-            return Math.min(prevActiveIndex + 1, navigateable - 1);
-          });
+          if (activeIndex === null) {
+            setActiveIndex(0);
+          } else {
+            setActiveIndex(Math.min(activeIndex + 1, navigateable - 1));
+          }
+
           break;
         case 'ArrowUp':
           event.preventDefault();
           /* If we are on the first item, close */
-          setActiveIndex((prevActiveIndex) => {
-            if (prevActiveIndex === 0) {
-              setOpen(false);
-              return 0;
-            }
 
-            if (prevActiveIndex === null) {
-              return null;
-            }
+          if (activeIndex === 0) {
+            setOpen(false);
+            setActiveIndex(0);
+          }
+
+          setActiveIndex(Math.max(activeIndex - 1, 0));
 
-            return Math.max(prevActiveIndex - 1, 0);
-          });
           break;
         case 'Enter':
           event.preventDefault();
@@ -471,7 +413,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     const rowVirtualizer = useVirtualizer({
       count: Object.keys(options).length,
-      getScrollElement: () => refs.floating.current,
+      getScrollElement: () => (virtual ? refs.floating.current : null),
       estimateSize: () => 70,
       measureElement: (elem) => {
         return elem.getBoundingClientRect().height;
@@ -514,6 +456,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           setSelectedOptions,
           /* Recieves index of option, and the ID of the button element */
           setActiveOption: (index: number, id: string) => {
+            return;
             if (readOnly) return;
             if (disabled) return;
             setActiveIndex(index);
@@ -674,7 +617,7 @@ type ComboboxContextType = {
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   setOpen: (open: boolean) => void;
   handleKeyDown: (event: React.KeyboardEvent) => void;
-  setActiveIndex: (index: number | null) => void;
+  setActiveIndex: (index: number) => void;
   setActiveOption: (index: number, id: string) => void;
   getReferenceProps: (
     props?: Record<string, unknown>,
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
new file mode 100644
index 0000000000..b97962f8b4
--- /dev/null
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -0,0 +1,91 @@
+import {
+  autoUpdate,
+  flip,
+  offset,
+  useDismiss,
+  useFloating,
+  useListNavigation,
+  useRole,
+  size as floatingSize,
+  useInteractions,
+} from '@floating-ui/react';
+import { useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+
+type UseFloatingComboboxProps = {
+  listRef: React.MutableRefObject<(HTMLElement | null)[]>;
+};
+
+export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
+  console.log('useFloatingCombobox');
+  const [open, setOpen] = useState(false);
+  const activeIndex = useRef(0);
+
+  const setActiveIndex = (index: number) => {
+    activeIndex.current = index;
+  };
+
+  // floating UI
+  const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({
+    open,
+    onOpenChange: (newOpen) => {
+      if (!newOpen) setActiveIndex(0);
+      flushSync(() => {
+        if (refs.floating.current && !newOpen) {
+          refs.floating.current.scrollTop = 0;
+        }
+        setTimeout(() => {
+          setOpen(newOpen);
+        }, 1);
+      });
+    },
+    whileElementsMounted: (reference, floating, update) => {
+      autoUpdate(reference, floating, update);
+      return () => {
+        floating.scrollTop = 0;
+      };
+    },
+    middleware: [
+      flip({ padding: 10 }),
+      floatingSize({
+        apply({ rects, elements }) {
+          requestAnimationFrame(() => {
+            Object.assign(elements.floating.style, {
+              width: `calc(${rects.reference.width}px - calc(var(--fds-spacing-2) * 2))`,
+              maxHeight: `200px`,
+            });
+          });
+        },
+      }),
+      offset(10),
+    ],
+  });
+
+  const role = useRole(context, { role: 'listbox' });
+  const dismiss = useDismiss(context);
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex: activeIndex.current,
+    virtual: true,
+    scrollItemIntoView: false,
+    enabled: open,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    role,
+    dismiss,
+    listNav,
+  ]);
+
+  return {
+    open,
+    setOpen,
+    setActiveIndex,
+    activeIndex: activeIndex.current,
+    refs,
+    floatingStyles,
+    context,
+    getReferenceProps,
+    getFloatingProps,
+  };
+};

From b5776a060397e605a0ac90ce6caafa4f8b44e115 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 09:54:55 +0200
Subject: [PATCH 12/47] activeIndex working

---
 .../react/src/components/form/Combobox/Combobox.tsx    |  1 -
 .../components/form/Combobox/useFloatingCombobox.tsx   | 10 +++-------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 03ff6bf491..769fcef9d2 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -456,7 +456,6 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           setSelectedOptions,
           /* Recieves index of option, and the ID of the button element */
           setActiveOption: (index: number, id: string) => {
-            return;
             if (readOnly) return;
             if (disabled) return;
             setActiveIndex(index);
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index b97962f8b4..03199407dd 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -19,11 +19,7 @@ type UseFloatingComboboxProps = {
 export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
   console.log('useFloatingCombobox');
   const [open, setOpen] = useState(false);
-  const activeIndex = useRef(0);
-
-  const setActiveIndex = (index: number) => {
-    activeIndex.current = index;
-  };
+  const [activeIndex, setActiveIndex] = useState(0);
 
   // floating UI
   const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({
@@ -65,7 +61,7 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
   const dismiss = useDismiss(context);
   const listNav = useListNavigation(context, {
     listRef,
-    activeIndex: activeIndex.current,
+    activeIndex,
     virtual: true,
     scrollItemIntoView: false,
     enabled: open,
@@ -81,7 +77,7 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
     open,
     setOpen,
     setActiveIndex,
-    activeIndex: activeIndex.current,
+    activeIndex,
     refs,
     floatingStyles,
     context,

From 45d086c71a32afc5444cb87a074f6b7fed9017d2 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 10:01:46 +0200
Subject: [PATCH 13/47] fix keydown Enter

---
 packages/react/src/components/form/Combobox/Combobox.tsx      | 2 ++
 packages/react/src/components/form/Combobox/useCombobox.tsx   | 4 ++--
 .../src/components/form/Combobox/useFloatingCombobox.tsx      | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 769fcef9d2..673db93b1a 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -345,10 +345,12 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           break;
         case 'Enter':
           event.preventDefault();
+          console.log({ filteredOptions });
           if (
             activeIndex !== null &&
             (filteredOptions[activeIndex] || customIds.length > 0)
           ) {
+            console.log('in here');
             // check if we are in the custom components
             if (activeIndex <= customIds.length) {
               // send `onSelect` event to the custom component
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index e988cfc076..8c4c439ea5 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -158,13 +158,13 @@ export default function useCombobox({
     });
 
     const filteredOptions: Option[] = optionsChildren.map((child) => {
-      return selectedOptions[child.props.value];
+      return options[child.props.value];
     });
 
     return { optionsChildren, customIds, filteredOptions };
 
     // ignore filter function in deps array, it causes a lot of re-renders
-  }, [options, children, multiple, inputValue, selectedOptions]);
+  }, [options, children, multiple, inputValue, selectedOptions, filter]);
 
   const optionValues = useMemo(() => {
     console.log('optionValues useCombobox');
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index 03199407dd..4dda07b189 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -9,7 +9,7 @@ import {
   size as floatingSize,
   useInteractions,
 } from '@floating-ui/react';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { flushSync } from 'react-dom';
 
 type UseFloatingComboboxProps = {

From e746f30eec41523b9d927565f28a3ba7630236ca Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 10:35:14 +0200
Subject: [PATCH 14/47] add missing test for enter

---
 .../components/form/Combobox/Combobox.test.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react/src/components/form/Combobox/Combobox.test.tsx b/packages/react/src/components/form/Combobox/Combobox.test.tsx
index f7a0eb3632..47a29fd520 100644
--- a/packages/react/src/components/form/Combobox/Combobox.test.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.test.tsx
@@ -99,6 +99,22 @@ describe('Combobox', () => {
     expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
   });
 
+  it('should select when we click Enter', async () => {
+    const onValueChange = vi.fn();
+    const { user } = await render({ onValueChange });
+    const combobox = screen.getByRole('combobox');
+    expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
+
+    await userEvent.click(combobox);
+    expect(screen.getByText('Leikanger')).toBeInTheDocument();
+
+    await user.type(combobox, '{Enter}');
+
+    await wait(500);
+
+    expect(onValueChange).toHaveBeenCalledWith(['leikanger']);
+  });
+
   it('should set call `onValueChange` on the Combobox when we click and option', async () => {
     const onValueChange = vi.fn();
     await render({ onValueChange });

From e3a4e084dd243a686b7b6cc619dc2e0e19be03e6 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 11:02:40 +0200
Subject: [PATCH 15/47] keyboard func hook

---
 .../src/components/form/Combobox/Combobox.tsx | 120 +++------------
 .../form/Combobox/useComboboxKeyboard.tsx     | 145 ++++++++++++++++++
 .../form/Combobox/useFloatingCombobox.tsx     |   2 +-
 3 files changed, 165 insertions(+), 102 deletions(-)
 create mode 100644 packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 673db93b1a..e9e1f1a63d 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -24,7 +24,7 @@ import { omit } from '../../../utilities';
 import { Spinner } from '../../Spinner';
 
 import type { Option } from './useCombobox';
-import useCombobox, { isInteractiveComboboxCustom } from './useCombobox';
+import useCombobox from './useCombobox';
 import classes from './Combobox.module.css';
 import ComboboxInput from './internal/ComboboxInput';
 import ComboboxLabel from './internal/ComboboxLabel';
@@ -32,6 +32,7 @@ import ComboboxError from './internal/ComboboxError';
 import ComboboxNative from './internal/ComboboxNative';
 import ComboboxCustom from './Custom/Custom';
 import { useFloatingCombobox } from './useFloatingCombobox';
+import { useComboboxKeyboard } from './useComboboxKeyboard';
 
 export type ComboboxProps = {
   /**
@@ -312,106 +313,23 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
 
     const debouncedHandleSelectOption = useDebounce(handleSelectOption, 50);
 
-    // handle keyboard navigation in the list
-    const handleKeyDownFunc = (event: React.KeyboardEvent) => {
-      console.log('handleKeyDownFunc');
-      const navigateable = customIds.length + Object.keys(options).length;
-
-      if (formFieldProps.readOnly || disabled) return;
-      if (!event) return;
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          if (!open) setOpen(true);
-
-          if (activeIndex === null) {
-            setActiveIndex(0);
-          } else {
-            setActiveIndex(Math.min(activeIndex + 1, navigateable - 1));
-          }
-
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          /* If we are on the first item, close */
-
-          if (activeIndex === 0) {
-            setOpen(false);
-            setActiveIndex(0);
-          }
-
-          setActiveIndex(Math.max(activeIndex - 1, 0));
-
-          break;
-        case 'Enter':
-          event.preventDefault();
-          console.log({ filteredOptions });
-          if (
-            activeIndex !== null &&
-            (filteredOptions[activeIndex] || customIds.length > 0)
-          ) {
-            console.log('in here');
-            // check if we are in the custom components
-            if (activeIndex <= customIds.length) {
-              // send `onSelect` event to the custom component
-              const selectedId = customIds[activeIndex];
-              const selectedComponent = restChildren.find(
-                (component) =>
-                  isInteractiveComboboxCustom(component) &&
-                  component.props?.id === selectedId,
-              );
-
-              if (
-                isInteractiveComboboxCustom(selectedComponent) &&
-                selectedComponent.props.onSelect
-              ) {
-                selectedComponent.props.onSelect();
-              }
-            }
-
-            // if we are in the options, find the actual index
-            const valueIndex = activeIndex - customIds.length;
-
-            const option = filteredOptions[valueIndex];
-
-            if (!multiple) {
-              // check if option is already selected, if so, deselect it
-              if (selectedOptions[option?.value]) {
-                setSelectedOptions({});
-                setInputValue('');
-                return;
-              }
-            }
-
-            debouncedHandleSelectOption(option);
-          }
-          break;
-
-        case 'Backspace':
-          if (
-            inputValue === '' &&
-            multiple &&
-            Object.keys(selectedOptions).length > 0
-          ) {
-            setSelectedOptions((prev) => {
-              const updated = { ...prev };
-              const keys = Object.keys(updated);
-              delete updated[keys[keys.length - 1]];
-              return updated;
-            });
-          }
-          // if we are in single mode, we need to set activeValue to null
-          if (!multiple) {
-            setSelectedOptions({});
-          }
-          break;
-
-        default:
-          break;
-      }
-    };
-
-    const handleKeyDown = useDebounce(handleKeyDownFunc, 20);
+    const handleKeyDown = useComboboxKeyboard({
+      customIds,
+      options,
+      filteredOptions,
+      selectedOptions,
+      readOnly: formFieldProps.readOnly || false,
+      disabled: disabled,
+      activeIndex,
+      multiple,
+      restChildren,
+      inputValue,
+      setOpen,
+      setInputValue,
+      setSelectedOptions,
+      handleSelectOption: debouncedHandleSelectOption,
+      setActiveIndex,
+    });
 
     const rowVirtualizer = useVirtualizer({
       count: Object.keys(options).length,
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
new file mode 100644
index 0000000000..ef1f96ecc5
--- /dev/null
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -0,0 +1,145 @@
+import type { ReactNode } from 'react';
+
+import useDebounce from '../../../utilities/useDebounce';
+
+import type useCombobox from './useCombobox';
+import { isInteractiveComboboxCustom } from './useCombobox';
+import type { Option } from './useCombobox';
+
+type UseComboboxKeyboardProps = {
+  customIds: string[];
+  options: ReturnType<typeof useCombobox>['options'];
+  filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];
+  selectedOptions: ReturnType<typeof useCombobox>['selectedOptions'];
+  readOnly: boolean;
+  disabled: boolean;
+  activeIndex: number;
+  restChildren: ReactNode[];
+  inputValue: string;
+  multiple: boolean;
+  setOpen: (value: boolean) => void;
+  setActiveIndex: (value: number) => void;
+  setSelectedOptions: ReturnType<typeof useCombobox>['setSelectedOptions'];
+  setInputValue: (value: string) => void;
+  handleSelectOption: (option: Option) => void;
+};
+
+export const useComboboxKeyboard = ({
+  customIds,
+  options,
+  readOnly,
+  disabled,
+  activeIndex,
+  restChildren,
+  filteredOptions,
+  inputValue,
+  selectedOptions,
+  multiple,
+  setOpen,
+  setActiveIndex,
+  setInputValue,
+  setSelectedOptions,
+  handleSelectOption,
+}: UseComboboxKeyboardProps) => {
+  console.log('useComboboxKeyboard');
+  // handle keyboard navigation in the list
+  const handleKeyDownFunc = (event: React.KeyboardEvent) => {
+    const navigateable = customIds.length + Object.keys(options).length;
+
+    if (readOnly || disabled) return;
+    if (!event) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!open) setOpen(true);
+
+        if (activeIndex === null) {
+          setActiveIndex(0);
+        } else {
+          setActiveIndex(Math.min(activeIndex + 1, navigateable - 1));
+        }
+
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        /* If we are on the first item, close */
+
+        if (activeIndex === 0) {
+          setOpen(false);
+          setActiveIndex(0);
+        }
+
+        setActiveIndex(Math.max(activeIndex - 1, 0));
+
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (
+          activeIndex !== null &&
+          (filteredOptions[activeIndex] || customIds.length > 0)
+        ) {
+          console.log('in here');
+          // check if we are in the custom components
+          if (activeIndex <= customIds.length) {
+            // send `onSelect` event to the custom component
+            const selectedId = customIds[activeIndex];
+            const selectedComponent = restChildren.find(
+              (component) =>
+                isInteractiveComboboxCustom(component) &&
+                component.props?.id === selectedId,
+            );
+
+            if (
+              isInteractiveComboboxCustom(selectedComponent) &&
+              selectedComponent.props.onSelect
+            ) {
+              selectedComponent.props.onSelect();
+            }
+          }
+
+          // if we are in the options, find the actual index
+          const valueIndex = activeIndex - customIds.length;
+
+          const option = filteredOptions[valueIndex];
+
+          if (!multiple) {
+            // check if option is already selected, if so, deselect it
+            if (selectedOptions[option?.value]) {
+              setSelectedOptions({});
+              setInputValue('');
+              return;
+            }
+          }
+
+          handleSelectOption(option);
+        }
+        break;
+
+      case 'Backspace':
+        if (
+          inputValue === '' &&
+          multiple &&
+          Object.keys(selectedOptions).length > 0
+        ) {
+          setSelectedOptions((prev) => {
+            const updated = { ...prev };
+            const keys = Object.keys(updated);
+            delete updated[keys[keys.length - 1]];
+            return updated;
+          });
+        }
+        // if we are in single mode, we need to set activeValue to null
+        if (!multiple) {
+          setSelectedOptions({});
+        }
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  const handleKeyDown = useDebounce(handleKeyDownFunc, 20);
+
+  return handleKeyDown;
+};
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index 4dda07b189..8d881e9aac 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -63,7 +63,7 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
     listRef,
     activeIndex,
     virtual: true,
-    scrollItemIntoView: false,
+    scrollItemIntoView: true,
     enabled: open,
   });
 

From 955e8f7df3841e45c7327003e38394e242b7f53c Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 12:44:07 +0200
Subject: [PATCH 16/47] start with adding context

---
 .../src/components/form/Combobox/Combobox.tsx |  94 +++--------
 .../form/Combobox/ComboboxContext.tsx         |  57 +++++++
 .../form/Combobox/ComboboxIdContext.tsx       |  79 ++++++++++
 .../form/Combobox/Custom/Custom.tsx           |  12 +-
 .../components/form/Combobox/Empty/Empty.tsx  |   2 +-
 .../form/Combobox/Option/Option.tsx           | 148 +++++++++---------
 .../Combobox/Option/useComboboxOption.tsx     |   5 +-
 .../form/Combobox/internal/ComboboxChips.tsx  |   2 +-
 .../Combobox/internal/ComboboxClearButton.tsx |   2 +-
 .../form/Combobox/internal/ComboboxInput.tsx  |  11 +-
 .../components/form/Combobox/useCombobox.tsx  |  11 ++
 .../form/Combobox/useComboboxKeyboard.tsx     |  29 ++--
 .../form/Combobox/useFloatingCombobox.tsx     |   9 +-
 13 files changed, 297 insertions(+), 164 deletions(-)
 create mode 100644 packages/react/src/components/form/Combobox/ComboboxContext.tsx
 create mode 100644 packages/react/src/components/form/Combobox/ComboboxIdContext.tsx

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index e9e1f1a63d..9e698908ff 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -1,18 +1,14 @@
 import {
   useState,
   useRef,
-  createContext,
   useEffect,
   useId,
   forwardRef,
+  useCallback,
 } from 'react';
 import type * as React from 'react';
 import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import cl from 'clsx';
-import type {
-  UseFloatingReturn,
-  UseListNavigationProps,
-} from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { Box } from '../../Box';
@@ -33,6 +29,8 @@ import ComboboxNative from './internal/ComboboxNative';
 import ComboboxCustom from './Custom/Custom';
 import { useFloatingCombobox } from './useFloatingCombobox';
 import { useComboboxKeyboard } from './useComboboxKeyboard';
+import { ComboboxIdProvider, useComboboxIdDispatch } from './ComboboxIdContext';
+import { ComboboxContext } from './ComboboxContext';
 
 export type ComboboxProps = {
   /**
@@ -133,7 +131,7 @@ export type ComboboxProps = {
   FormFieldProps &
   Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
-export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
+export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
   (
     {
       value,
@@ -175,9 +173,8 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     const listId = useId();
 
     const [inputValue, setInputValue] = useState<string>(rest.inputValue || '');
-    const [activeDescendant, setActiveDescendant] = useState<
-      string | undefined
-    >(undefined);
+
+    /* const idDispatch = useComboboxIdDispatch(); */
 
     const {
       selectedOptions,
@@ -204,8 +201,6 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       refs,
       floatingStyles,
       context,
-      activeIndex,
-      setActiveIndex,
       getReferenceProps,
       getFloatingProps,
     } = useFloatingCombobox({
@@ -320,7 +315,6 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       selectedOptions,
       readOnly: formFieldProps.readOnly || false,
       disabled: disabled,
-      activeIndex,
       multiple,
       restChildren,
       inputValue,
@@ -328,7 +322,6 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       setInputValue,
       setSelectedOptions,
       handleSelectOption: debouncedHandleSelectOption,
-      setActiveIndex,
     });
 
     const rowVirtualizer = useVirtualizer({
@@ -341,8 +334,14 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       overscan: 1,
     });
 
+    const setActiveOption = useCallback((index: number, id: string) => {
+      if (readOnly) return;
+      if (disabled) return;
+      /* idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+      idDispatch?.({ type: 'SET_ACTIVE_DESCENDANT', payload: id }); */
+    }, []);
+
     console.log('combobox rendered');
-    console.log({ activeIndex });
 
     return (
       <ComboboxContext.Provider
@@ -351,14 +350,12 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           options,
           selectedOptions,
           multiple,
-          activeIndex,
           disabled,
           readOnly,
           open,
           inputRef,
           refs,
           inputValue,
-          activeDescendant,
           error,
           formFieldProps,
           name,
@@ -369,18 +366,12 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
           hideClearButton,
           listId,
           setInputValue,
-          setActiveIndex,
           handleKeyDown,
           setOpen,
           getReferenceProps,
           setSelectedOptions,
           /* Recieves index of option, and the ID of the button element */
-          setActiveOption: (index: number, id: string) => {
-            if (readOnly) return;
-            if (disabled) return;
-            setActiveIndex(index);
-            setActiveDescendant(id);
-          },
+          setActiveOption,
           /* Recieves the value of the option, and searches for it in our values lookup */
           onOptionClick: (value: string) => {
             if (readOnly) return;
@@ -507,54 +498,15 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
   },
 );
 
-type ComboboxContextType = {
-  multiple: NonNullable<ComboboxProps['multiple']>;
-  disabled: NonNullable<ComboboxProps['disabled']>;
-  readOnly: NonNullable<ComboboxProps['readOnly']>;
-  name: ComboboxProps['name'];
-  error: ComboboxProps['error'];
-  htmlSize: ComboboxProps['htmlSize'];
-  hideChips: NonNullable<ComboboxProps['hideChips']>;
-  clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
-  hideClearButton: NonNullable<ComboboxProps['hideClearButton']>;
-  options: {
-    [key: string]: Option;
-  };
-  selectedOptions: {
-    [key: string]: Option;
-  };
-  size: NonNullable<ComboboxProps['size']>;
-  formFieldProps: ReturnType<typeof useFormField>;
-  refs: UseFloatingReturn['refs'];
-  inputRef: React.RefObject<HTMLInputElement>;
-  activeIndex: number | null;
-  open: boolean;
-  inputValue: string;
-  activeDescendant: string | undefined;
-  optionValues: string[];
-  listId: string;
-  setInputValue: React.Dispatch<React.SetStateAction<string>>;
-  setOpen: (open: boolean) => void;
-  handleKeyDown: (event: React.KeyboardEvent) => void;
-  setActiveIndex: (index: number) => void;
-  setActiveOption: (index: number, id: string) => void;
-  getReferenceProps: (
-    props?: Record<string, unknown>,
-  ) => Record<string, unknown>;
-  onOptionClick: (value: string) => void;
-  setSelectedOptions: React.Dispatch<
-    React.SetStateAction<{
-      [key: string]: Option;
-    }>
-  >;
-  chipSrLabel: NonNullable<ComboboxProps['chipSrLabel']>;
-  handleSelectOption: (option: Option) => void;
-  listRef: UseListNavigationProps['listRef'];
-  forwareddRef: React.Ref<HTMLInputElement>;
-};
-
-export const ComboboxContext = createContext<ComboboxContextType | undefined>(
-  undefined,
+export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
+  (props, ref) => (
+    <ComboboxIdProvider>
+      <ComboboxComponent
+        {...props}
+        ref={ref}
+      />
+    </ComboboxIdProvider>
+  ),
 );
 
 Combobox.displayName = 'Combobox';
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
new file mode 100644
index 0000000000..c48cfa3178
--- /dev/null
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -0,0 +1,57 @@
+import type {
+  UseFloatingReturn,
+  UseListNavigationProps,
+} from '@floating-ui/react';
+import { createContext } from 'react';
+
+import type { useFormField } from '../useFormField';
+
+import type { ComboboxProps } from './Combobox';
+import type { Option } from './useCombobox';
+
+type ComboboxContextType = {
+  multiple: NonNullable<ComboboxProps['multiple']>;
+  disabled: NonNullable<ComboboxProps['disabled']>;
+  readOnly: NonNullable<ComboboxProps['readOnly']>;
+  name: ComboboxProps['name'];
+  error: ComboboxProps['error'];
+  htmlSize: ComboboxProps['htmlSize'];
+  hideChips: NonNullable<ComboboxProps['hideChips']>;
+  clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
+  hideClearButton: NonNullable<ComboboxProps['hideClearButton']>;
+  options: {
+    [key: string]: Option;
+  };
+  selectedOptions: {
+    [key: string]: Option;
+  };
+  size: NonNullable<ComboboxProps['size']>;
+  formFieldProps: ReturnType<typeof useFormField>;
+  refs: UseFloatingReturn['refs'];
+  inputRef: React.RefObject<HTMLInputElement>;
+  open: boolean;
+  inputValue: string;
+  optionValues: string[];
+  listId: string;
+  setInputValue: React.Dispatch<React.SetStateAction<string>>;
+  setOpen: (open: boolean) => void;
+  handleKeyDown: (event: React.KeyboardEvent) => void;
+  setActiveOption: (index: number, id: string) => void;
+  getReferenceProps: (
+    props?: Record<string, unknown>,
+  ) => Record<string, unknown>;
+  onOptionClick: (value: string) => void;
+  setSelectedOptions: React.Dispatch<
+    React.SetStateAction<{
+      [key: string]: Option;
+    }>
+  >;
+  chipSrLabel: NonNullable<ComboboxProps['chipSrLabel']>;
+  handleSelectOption: (option: Option) => void;
+  listRef: UseListNavigationProps['listRef'];
+  forwareddRef: React.Ref<HTMLInputElement>;
+};
+
+export const ComboboxContext = createContext<ComboboxContextType | undefined>(
+  undefined,
+);
diff --git a/packages/react/src/components/form/Combobox/ComboboxIdContext.tsx b/packages/react/src/components/form/Combobox/ComboboxIdContext.tsx
new file mode 100644
index 0000000000..5fec36c435
--- /dev/null
+++ b/packages/react/src/components/form/Combobox/ComboboxIdContext.tsx
@@ -0,0 +1,79 @@
+import type { Dispatch } from 'react';
+import { createContext, useContext, useReducer } from 'react';
+
+type ComboboxIdContextType = {
+  activeIndex: number;
+  activeDescendant: string | undefined;
+};
+
+export const ComboboxIdContext = createContext<ComboboxIdContextType>({
+  activeIndex: 0,
+  activeDescendant: undefined,
+});
+
+type SetActiveIndexAction = {
+  type: 'SET_ACTIVE_INDEX';
+  payload: number;
+};
+
+type SetActiveDescendantIdAction = {
+  type: 'SET_ACTIVE_DESCENDANT';
+  payload: string;
+};
+
+type ComboboxIdReducerAction =
+  | SetActiveIndexAction
+  | SetActiveDescendantIdAction;
+
+export const ComboboxIdReducer = (
+  state: ComboboxIdContextType,
+  action: ComboboxIdReducerAction,
+) => {
+  switch (action.type) {
+    case 'SET_ACTIVE_INDEX':
+      return {
+        ...state,
+        activeIndex: action.payload,
+      };
+    case 'SET_ACTIVE_DESCENDANT':
+      return {
+        ...state,
+        activeDescendant: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export const ComboboxIdDispatch = createContext<
+  Dispatch<ComboboxIdReducerAction>
+>(() => {
+  throw new Error('ComboboxIdDispatch must be used within a provider');
+});
+
+export const ComboboxIdProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [state, dispatch] = useReducer(ComboboxIdReducer, {
+    activeIndex: 0,
+    activeDescendant: undefined,
+  });
+
+  return (
+    <ComboboxIdContext.Provider value={state}>
+      <ComboboxIdDispatch.Provider value={dispatch}>
+        {children}
+      </ComboboxIdDispatch.Provider>
+    </ComboboxIdContext.Provider>
+  );
+};
+
+export function useComboboxIdDispatch() {
+  return useContext(ComboboxIdDispatch);
+}
+
+export function useComboboxId() {
+  return useContext(ComboboxIdContext);
+}
diff --git a/packages/react/src/components/form/Combobox/Custom/Custom.tsx b/packages/react/src/components/form/Combobox/Custom/Custom.tsx
index 2203bba00a..6a3e711035 100644
--- a/packages/react/src/components/form/Combobox/Custom/Custom.tsx
+++ b/packages/react/src/components/form/Combobox/Custom/Custom.tsx
@@ -3,8 +3,9 @@ import type * as React from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
-import { ComboboxContext } from '../Combobox';
+import { ComboboxContext } from '../ComboboxContext';
 import { omit } from '../../../../utilities';
+import { ComboboxIdContext, ComboboxIdDispatch } from '../ComboboxIdContext';
 
 import classes from './Custom.module.css';
 
@@ -52,11 +53,18 @@ export const ComboboxCustom = forwardRef<HTMLDivElement, ComboboxCustomProps>(
     const randomId = useId();
 
     const context = useContext(ComboboxContext);
+    const idContext = useContext(ComboboxIdContext);
+    const idDispatch = useContext(ComboboxIdDispatch);
+    const { activeIndex } = idContext;
+
+    const setActiveIndex = (index: number) => {
+      idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+    };
     if (!context) {
       throw new Error('ComboboxCustom must be used within a Combobox');
     }
 
-    const { size, activeIndex, optionValues, setActiveIndex } = context;
+    const { size, optionValues } = context;
 
     const index = useMemo(
       () => (id && optionValues.indexOf(id)) || 0,
diff --git a/packages/react/src/components/form/Combobox/Empty/Empty.tsx b/packages/react/src/components/form/Combobox/Empty/Empty.tsx
index 64c6ac9822..5df86fe46e 100644
--- a/packages/react/src/components/form/Combobox/Empty/Empty.tsx
+++ b/packages/react/src/components/form/Combobox/Empty/Empty.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useContext } from 'react';
 import type * as React from 'react';
 import cl from 'clsx';
 
-import { ComboboxContext } from '../Combobox';
+import { ComboboxContext } from '../ComboboxContext';
 
 import classes from './Empty.module.css';
 
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index e9cdff88a4..6052269905 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -1,10 +1,11 @@
-import { forwardRef, useContext, useId } from 'react';
+import { forwardRef, memo, useContext, useId } from 'react';
 import type * as React from 'react';
 import cl from 'clsx';
 
 import { Label } from '../../../Typography';
 import { omit } from '../../../../utilities';
-import { ComboboxContext } from '../Combobox';
+import { ComboboxContext } from '../ComboboxContext';
+import { ComboboxIdContext } from '../ComboboxIdContext';
 
 import { SelectedIcon } from './Icon/SelectedIcon';
 import classes from './Option.module.css';
@@ -27,77 +28,82 @@ export type ComboboxOptionProps = {
   displayValue?: string;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export const ComboboxOption = forwardRef<
-  HTMLButtonElement,
-  ComboboxOptionProps
->(({ value, description, children, className, ...rest }, forwardedRef) => {
-  const labelId = useId();
+export const ComboboxOption = memo(
+  forwardRef<HTMLButtonElement, ComboboxOptionProps>(
+    ({ value, description, children, className, ...rest }, forwardedRef) => {
+      const labelId = useId();
 
-  const { id, ref, selected, index, onOptionClick } = useComboboxOption({
-    restId: rest.id,
-    ref: forwardedRef,
-    value,
-  });
+      const { id, ref, selected, index, onOptionClick } = useComboboxOption({
+        restId: rest.id,
+        ref: forwardedRef,
+        value,
+      });
 
-  const context = useContext(ComboboxContext);
-  if (!context) {
-    throw new Error('ComboboxOption must be used within a Combobox');
-  }
-  const { activeIndex, setActiveOption, size, multiple } = context;
+      const context = useContext(ComboboxContext);
+      const idContext = useContext(ComboboxIdContext);
+      if (!context) {
+        throw new Error('ComboboxOption must be used within a Combobox');
+      }
+      const { setActiveOption, size, multiple } = context;
+      const { activeIndex } = idContext;
 
-  return (
-    <button
-      id={id}
-      role='option'
-      type='button'
-      aria-selected={!!selected}
-      aria-labelledby={labelId}
-      tabIndex={-1}
-      onClick={(e) => {
-        onOptionClick();
-        rest.onClick?.(e);
-      }}
-      onMouseEnter={(e) => {
-        setActiveOption(index, labelId);
-        rest.onMouseEnter?.(e);
-      }} // Set active index on hover
-      onFocus={(e) => {
-        setActiveOption(index, labelId);
-        rest.onFocus?.(e);
-      }} // Set active index on focus
-      className={cl(
-        classes.option,
-        classes[size],
-        activeIndex === index && classes.active,
-        multiple && classes.multiple,
-        className,
-      )}
-      ref={ref}
-      {...omit(['displayValue'], rest)}
-    >
-      <Label
-        asChild
-        size={size}
-      >
-        <span>
-          <SelectedIcon
-            multiple={multiple}
-            selected={!!selected}
-          />
-        </span>
-      </Label>
-      <Label
-        className={classes.optionText}
-        size={size}
-        id={labelId}
-      >
-        {children}
-        {description && (
-          <ComboboxOptionDescription>{description}</ComboboxOptionDescription>
-        )}
-      </Label>
-    </button>
-  );
-});
+      return (
+        <button
+          id={id}
+          role='option'
+          type='button'
+          aria-selected={!!selected}
+          aria-labelledby={labelId}
+          tabIndex={-1}
+          onClick={(e) => {
+            onOptionClick();
+            rest.onClick?.(e);
+          }}
+          onMouseEnter={(e) => {
+            setActiveOption(index, labelId);
+            rest.onMouseEnter?.(e);
+          }} // Set active index on hover
+          onFocus={(e) => {
+            setActiveOption(index, labelId);
+            rest.onFocus?.(e);
+          }} // Set active index on focus
+          className={cl(
+            classes.option,
+            classes[size],
+            activeIndex === index && classes.active,
+            multiple && classes.multiple,
+            className,
+          )}
+          ref={ref}
+          {...omit(['displayValue'], rest)}
+        >
+          <Label
+            asChild
+            size={size}
+          >
+            <span>
+              <SelectedIcon
+                multiple={multiple}
+                selected={!!selected}
+              />
+            </span>
+          </Label>
+          <Label
+            className={classes.optionText}
+            size={size}
+            id={labelId}
+          >
+            {children}
+            {description && (
+              <ComboboxOptionDescription>
+                {description}
+              </ComboboxOptionDescription>
+            )}
+          </Label>
+        </button>
+      );
+    },
+  ),
+);
 
 ComboboxOption.displayName = 'ComboboxOption';
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
index f66ce75d9f..9fa7dc6f11 100644
--- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -1,8 +1,9 @@
 import { useContext, useEffect, useId, useMemo } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 
-import { ComboboxContext } from '../Combobox';
+import { ComboboxContext } from '../ComboboxContext';
 import useDebounce from '../../../../utilities/useDebounce';
+import { useComboboxId } from '../ComboboxIdContext';
 
 type UseComboboxOptionProps = {
   restId?: string;
@@ -21,12 +22,12 @@ export default function useComboboxOption({
   const id = restId || generatedId;
 
   const context = useContext(ComboboxContext);
+  const { activeIndex } = useComboboxId();
   if (!context) {
     throw new Error('ComboboxOption must be used within a Combobox');
   }
   const {
     selectedOptions,
-    activeIndex,
     setActiveOption,
     onOptionClick,
     listRef,
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
index 788d42798a..eb8424558b 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
 import { ChipRemovable } from '../../../Chip';
-import { ComboboxContext } from '../Combobox';
+import { ComboboxContext } from '../ComboboxContext';
 
 export const ComboboxChips = () => {
   const context = useContext(ComboboxContext);
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
index c957f8fa00..22c14507e0 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import cl from 'clsx';
 
-import { ComboboxContext } from '../Combobox';
+import { ComboboxContext } from '../ComboboxContext';
 import classes from '../Combobox.module.css';
 
 export const ComboboxClearButton = () => {
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index f1c4e5028f..c3ea4dd64c 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -4,11 +4,12 @@ import cl from 'clsx';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '@floating-ui/react';
 
-import { ComboboxContext } from '../Combobox';
+import { ComboboxContext } from '../ComboboxContext';
 import classes from '../Combobox.module.css';
 import { Box } from '../../../Box';
 import textFieldClasses from '../../Textfield/Textfield.module.css';
 import { omit } from '../../../../utilities';
+import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
 
 import ComboboxChips from './ComboboxChips';
 import ComboboxClearButton from './ComboboxClearButton';
@@ -17,11 +18,17 @@ export const ComboboxInput = ({
   ...rest
 }: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>) => {
   const context = useContext(ComboboxContext);
+  const { activeDescendant } = useComboboxId();
+  const idDispatch = useComboboxIdDispatch();
 
   if (!context) {
     throw new Error('ComboboxContext is missing');
   }
 
+  const setActiveIndex = (id: number) => {
+    idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
+  };
+
   const {
     forwareddRef,
     listId,
@@ -32,7 +39,6 @@ export const ComboboxInput = ({
     inputRef,
     refs,
     inputValue,
-    activeDescendant,
     error,
     multiple,
     selectedOptions,
@@ -42,7 +48,6 @@ export const ComboboxInput = ({
     hideChips,
     hideClearButton,
     setOpen,
-    setActiveIndex,
     handleKeyDown,
     getReferenceProps,
     setInputValue,
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 8c4c439ea5..87a0a77c69 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -184,6 +184,17 @@ export default function useCombobox({
     });
   }, [children]);
 
+  console.log({
+    optionsChildren,
+    filteredOptions,
+    optionValues,
+    restChildren,
+    options,
+    customIds,
+    selectedOptions,
+    prevSelectedHash,
+  });
+
   return {
     optionsChildren,
     filteredOptions,
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index ef1f96ecc5..f94b56e148 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react';
+import { useContext, type ReactNode } from 'react';
 
 import useDebounce from '../../../utilities/useDebounce';
 
 import type useCombobox from './useCombobox';
 import { isInteractiveComboboxCustom } from './useCombobox';
 import type { Option } from './useCombobox';
+import { ComboboxIdContext, ComboboxIdDispatch } from './ComboboxIdContext';
 
 type UseComboboxKeyboardProps = {
   customIds: string[];
@@ -13,12 +14,10 @@ type UseComboboxKeyboardProps = {
   selectedOptions: ReturnType<typeof useCombobox>['selectedOptions'];
   readOnly: boolean;
   disabled: boolean;
-  activeIndex: number;
   restChildren: ReactNode[];
   inputValue: string;
   multiple: boolean;
   setOpen: (value: boolean) => void;
-  setActiveIndex: (value: number) => void;
   setSelectedOptions: ReturnType<typeof useCombobox>['setSelectedOptions'];
   setInputValue: (value: string) => void;
   handleSelectOption: (option: Option) => void;
@@ -29,19 +28,25 @@ export const useComboboxKeyboard = ({
   options,
   readOnly,
   disabled,
-  activeIndex,
   restChildren,
   filteredOptions,
   inputValue,
   selectedOptions,
   multiple,
   setOpen,
-  setActiveIndex,
   setInputValue,
   setSelectedOptions,
   handleSelectOption,
 }: UseComboboxKeyboardProps) => {
   console.log('useComboboxKeyboard');
+
+  const context = useContext(ComboboxIdContext);
+  console.log({
+    context,
+  });
+  const dispatch = useContext(ComboboxIdDispatch);
+  const { activeIndex } = context;
+
   // handle keyboard navigation in the list
   const handleKeyDownFunc = (event: React.KeyboardEvent) => {
     const navigateable = customIds.length + Object.keys(options).length;
@@ -54,9 +59,12 @@ export const useComboboxKeyboard = ({
         if (!open) setOpen(true);
 
         if (activeIndex === null) {
-          setActiveIndex(0);
+          dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
         } else {
-          setActiveIndex(Math.min(activeIndex + 1, navigateable - 1));
+          dispatch?.({
+            type: 'SET_ACTIVE_INDEX',
+            payload: Math.min(activeIndex + 1, navigateable - 1),
+          });
         }
 
         break;
@@ -66,10 +74,13 @@ export const useComboboxKeyboard = ({
 
         if (activeIndex === 0) {
           setOpen(false);
-          setActiveIndex(0);
+          dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
         }
 
-        setActiveIndex(Math.max(activeIndex - 1, 0));
+        dispatch?.({
+          type: 'SET_ACTIVE_INDEX',
+          payload: Math.max(activeIndex - 1, 0),
+        });
 
         break;
       case 'Enter':
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index 8d881e9aac..3a80fbfc2c 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -12,6 +12,8 @@ import {
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 
+import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext';
+
 type UseFloatingComboboxProps = {
   listRef: React.MutableRefObject<(HTMLElement | null)[]>;
 };
@@ -19,13 +21,15 @@ type UseFloatingComboboxProps = {
 export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
   console.log('useFloatingCombobox');
   const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
+
+  const { activeIndex } = useComboboxId();
+  const dispatch = useComboboxIdDispatch();
 
   // floating UI
   const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({
     open,
     onOpenChange: (newOpen) => {
-      if (!newOpen) setActiveIndex(0);
+      if (!newOpen) dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
       flushSync(() => {
         if (refs.floating.current && !newOpen) {
           refs.floating.current.scrollTop = 0;
@@ -76,7 +80,6 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
   return {
     open,
     setOpen,
-    setActiveIndex,
     activeIndex,
     refs,
     floatingStyles,

From 69236f42a1b0037b004b47923cfc8be69e38be9c Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 12:56:14 +0200
Subject: [PATCH 17/47] more work on context, and moving around

---
 .../src/components/form/Combobox/Combobox.tsx | 22 ++-----------------
 .../form/Combobox/ComboboxContext.tsx         |  1 -
 .../form/Combobox/Option/Option.tsx           | 13 ++++++-----
 .../Combobox/Option/useComboboxOption.tsx     | 21 ++++++++++++++----
 4 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 9e698908ff..a3d0e650ac 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -1,11 +1,4 @@
-import {
-  useState,
-  useRef,
-  useEffect,
-  useId,
-  forwardRef,
-  useCallback,
-} from 'react';
+import { useState, useRef, useEffect, useId, forwardRef } from 'react';
 import type * as React from 'react';
 import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import cl from 'clsx';
@@ -29,7 +22,7 @@ import ComboboxNative from './internal/ComboboxNative';
 import ComboboxCustom from './Custom/Custom';
 import { useFloatingCombobox } from './useFloatingCombobox';
 import { useComboboxKeyboard } from './useComboboxKeyboard';
-import { ComboboxIdProvider, useComboboxIdDispatch } from './ComboboxIdContext';
+import { ComboboxIdProvider } from './ComboboxIdContext';
 import { ComboboxContext } from './ComboboxContext';
 
 export type ComboboxProps = {
@@ -334,15 +327,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       overscan: 1,
     });
 
-    const setActiveOption = useCallback((index: number, id: string) => {
-      if (readOnly) return;
-      if (disabled) return;
-      /* idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
-      idDispatch?.({ type: 'SET_ACTIVE_DESCENDANT', payload: id }); */
-    }, []);
-
-    console.log('combobox rendered');
-
     return (
       <ComboboxContext.Provider
         value={{
@@ -370,8 +354,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           setOpen,
           getReferenceProps,
           setSelectedOptions,
-          /* Recieves index of option, and the ID of the button element */
-          setActiveOption,
           /* Recieves the value of the option, and searches for it in our values lookup */
           onOptionClick: (value: string) => {
             if (readOnly) return;
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index c48cfa3178..11a04b02c7 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -36,7 +36,6 @@ type ComboboxContextType = {
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   setOpen: (open: boolean) => void;
   handleKeyDown: (event: React.KeyboardEvent) => void;
-  setActiveOption: (index: number, id: string) => void;
   getReferenceProps: (
     props?: Record<string, unknown>,
   ) => Record<string, unknown>;
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 6052269905..0ef006eddf 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -33,18 +33,19 @@ export const ComboboxOption = memo(
     ({ value, description, children, className, ...rest }, forwardedRef) => {
       const labelId = useId();
 
-      const { id, ref, selected, index, onOptionClick } = useComboboxOption({
-        restId: rest.id,
-        ref: forwardedRef,
-        value,
-      });
+      const { id, ref, selected, index, onOptionClick, setActiveOption } =
+        useComboboxOption({
+          restId: rest.id,
+          ref: forwardedRef,
+          value,
+        });
 
       const context = useContext(ComboboxContext);
       const idContext = useContext(ComboboxIdContext);
       if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
       }
-      const { setActiveOption, size, multiple } = context;
+      const { size, multiple } = context;
       const { activeIndex } = idContext;
 
       return (
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
index 9fa7dc6f11..19349e42ae 100644
--- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -3,7 +3,7 @@ import { useMergeRefs } from '@floating-ui/react';
 
 import { ComboboxContext } from '../ComboboxContext';
 import useDebounce from '../../../../utilities/useDebounce';
-import { useComboboxId } from '../ComboboxIdContext';
+import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
 
 type UseComboboxOptionProps = {
   restId?: string;
@@ -23,15 +23,17 @@ export default function useComboboxOption({
 
   const context = useContext(ComboboxContext);
   const { activeIndex } = useComboboxId();
+  const dispatch = useComboboxIdDispatch();
   if (!context) {
     throw new Error('ComboboxOption must be used within a Combobox');
   }
   const {
     selectedOptions,
-    setActiveOption,
     onOptionClick,
     listRef,
     optionValues,
+    readOnly,
+    disabled,
   } = context;
 
   const index = useMemo(
@@ -39,6 +41,13 @@ export default function useComboboxOption({
     [optionValues, value],
   );
 
+  const setActiveOption = (index: number, id: string) => {
+    if (readOnly) return;
+    if (disabled) return;
+    dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+    dispatch?.({ type: 'SET_ACTIVE_DESCENDANT', payload: id });
+  };
+
   const combinedRef = useMergeRefs([
     (node: HTMLElement | null) => {
       listRef.current[index] = node;
@@ -54,8 +63,11 @@ export default function useComboboxOption({
 
   useEffect(() => {
     console.log('option effect');
-    if (activeIndex === index) setActiveOption(index, id);
-  }, [activeIndex, generatedId, index, id, setActiveOption]);
+    if (activeIndex === index) {
+      dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+      dispatch?.({ type: 'SET_ACTIVE_DESCENDANT', payload: id });
+    }
+  }, [activeIndex, generatedId, index, id, dispatch]);
 
   const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
 
@@ -65,5 +77,6 @@ export default function useComboboxOption({
     selected,
     index,
     onOptionClick: onOptionClickDebounced,
+    setActiveOption,
   };
 }

From 9f228e29fe0a2df5ab8cf256645d14722111695a Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 13:05:55 +0200
Subject: [PATCH 18/47] fix keyboard navigation

---
 .../react/src/components/form/Combobox/Combobox.tsx   |  3 ++-
 .../components/form/Combobox/useComboboxKeyboard.tsx  | 11 ++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index a3d0e650ac..3ef0a0add7 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -22,7 +22,7 @@ import ComboboxNative from './internal/ComboboxNative';
 import ComboboxCustom from './Custom/Custom';
 import { useFloatingCombobox } from './useFloatingCombobox';
 import { useComboboxKeyboard } from './useComboboxKeyboard';
-import { ComboboxIdProvider } from './ComboboxIdContext';
+import { ComboboxIdProvider, useComboboxIdDispatch } from './ComboboxIdContext';
 import { ComboboxContext } from './ComboboxContext';
 
 export type ComboboxProps = {
@@ -311,6 +311,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       multiple,
       restChildren,
       inputValue,
+      open,
       setOpen,
       setInputValue,
       setSelectedOptions,
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index f94b56e148..74398cad6e 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -17,6 +17,7 @@ type UseComboboxKeyboardProps = {
   restChildren: ReactNode[];
   inputValue: string;
   multiple: boolean;
+  open: boolean;
   setOpen: (value: boolean) => void;
   setSelectedOptions: ReturnType<typeof useCombobox>['setSelectedOptions'];
   setInputValue: (value: string) => void;
@@ -33,6 +34,7 @@ export const useComboboxKeyboard = ({
   inputValue,
   selectedOptions,
   multiple,
+  open,
   setOpen,
   setInputValue,
   setSelectedOptions,
@@ -49,21 +51,20 @@ export const useComboboxKeyboard = ({
 
   // handle keyboard navigation in the list
   const handleKeyDownFunc = (event: React.KeyboardEvent) => {
-    const navigateable = customIds.length + Object.keys(options).length;
+    const navigatable = customIds.length + Object.keys(options).length;
 
     if (readOnly || disabled) return;
     if (!event) return;
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
-        if (!open) setOpen(true);
-
-        if (activeIndex === null) {
+        if (!open) {
+          setOpen(true);
           dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
         } else {
           dispatch?.({
             type: 'SET_ACTIVE_INDEX',
-            payload: Math.min(activeIndex + 1, navigateable - 1),
+            payload: Math.min(activeIndex + 1, navigatable - 1),
           });
         }
 

From b7f24f9beebeaca3ad1243449cb0e448a7342dfd Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 13:18:13 +0200
Subject: [PATCH 19/47] more keyboard

---
 packages/react/src/components/form/Combobox/Combobox.tsx | 9 +--------
 .../components/form/Combobox/internal/ComboboxInput.tsx  | 5 +++--
 .../src/components/form/Combobox/useComboboxKeyboard.tsx | 5 +----
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 3ef0a0add7..24d4f96c9a 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -22,7 +22,7 @@ import ComboboxNative from './internal/ComboboxNative';
 import ComboboxCustom from './Custom/Custom';
 import { useFloatingCombobox } from './useFloatingCombobox';
 import { useComboboxKeyboard } from './useComboboxKeyboard';
-import { ComboboxIdProvider, useComboboxIdDispatch } from './ComboboxIdContext';
+import { ComboboxIdProvider } from './ComboboxIdContext';
 import { ComboboxContext } from './ComboboxContext';
 
 export type ComboboxProps = {
@@ -213,13 +213,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       'combobox',
     );
 
-    useEffect(() => {
-      console.log('use effect 1');
-      if (rest.inputValue !== undefined) {
-        setInputValue(rest.inputValue);
-      }
-    }, [rest.inputValue]);
-
     // if value is set, set input value to the label of the value
     useEffect(() => {
       console.log('use effect 2');
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index c3ea4dd64c..b19cbae306 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -1,5 +1,5 @@
+import type { ChangeEvent } from 'react';
 import { useContext, useEffect, useState } from 'react';
-import type * as React from 'react';
 import cl from 'clsx';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '@floating-ui/react';
@@ -58,6 +58,7 @@ export const ComboboxInput = ({
 
   // we need to check if input is in focus, to add focus styles to the wrapper
   const [inputInFocus, setInputInFocus] = useState(false);
+
   useEffect(() => {
     const input = inputRef.current;
     const onFocus = () => {
@@ -77,7 +78,7 @@ export const ComboboxInput = ({
   }, [inputRef]);
 
   // onChange function for the input
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setInputValue(value);
     setActiveIndex(0);
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index 74398cad6e..f2cf85a864 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -86,10 +86,7 @@ export const useComboboxKeyboard = ({
         break;
       case 'Enter':
         event.preventDefault();
-        if (
-          activeIndex !== null &&
-          (filteredOptions[activeIndex] || customIds.length > 0)
-        ) {
+        if (open && (filteredOptions[activeIndex] || customIds.length > 0)) {
           console.log('in here');
           // check if we are in the custom components
           if (activeIndex <= customIds.length) {

From 03a6d5080364aa0a3b05994678d2acd1bbefafa3 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 13:44:15 +0200
Subject: [PATCH 20/47] more keyboard that comes from listnav

---
 .../src/components/form/Combobox/Combobox.tsx |  1 -
 .../form/Combobox/Option/Option.tsx           | 24 +++++++++++--------
 .../Combobox/Option/useComboboxOption.tsx     |  6 +++--
 .../form/Combobox/useComboboxKeyboard.tsx     | 21 +---------------
 .../form/Combobox/useFloatingCombobox.tsx     |  3 +++
 5 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 24d4f96c9a..6927b8c50f 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -296,7 +296,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     const handleKeyDown = useComboboxKeyboard({
       customIds,
-      options,
       filteredOptions,
       selectedOptions,
       readOnly: formFieldProps.readOnly || false,
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 0ef006eddf..3eebd7a0a5 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -5,7 +5,6 @@ import cl from 'clsx';
 import { Label } from '../../../Typography';
 import { omit } from '../../../../utilities';
 import { ComboboxContext } from '../ComboboxContext';
-import { ComboboxIdContext } from '../ComboboxIdContext';
 
 import { SelectedIcon } from './Icon/SelectedIcon';
 import classes from './Option.module.css';
@@ -33,20 +32,25 @@ export const ComboboxOption = memo(
     ({ value, description, children, className, ...rest }, forwardedRef) => {
       const labelId = useId();
 
-      const { id, ref, selected, index, onOptionClick, setActiveOption } =
-        useComboboxOption({
-          restId: rest.id,
-          ref: forwardedRef,
-          value,
-        });
+      const {
+        id,
+        ref,
+        selected,
+        index,
+        active,
+        onOptionClick,
+        setActiveOption,
+      } = useComboboxOption({
+        restId: rest.id,
+        ref: forwardedRef,
+        value,
+      });
 
       const context = useContext(ComboboxContext);
-      const idContext = useContext(ComboboxIdContext);
       if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
       }
       const { size, multiple } = context;
-      const { activeIndex } = idContext;
 
       return (
         <button
@@ -71,7 +75,7 @@ export const ComboboxOption = memo(
           className={cl(
             classes.option,
             classes[size],
-            activeIndex === index && classes.active,
+            active && classes.active,
             multiple && classes.multiple,
             className,
           )}
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
index 19349e42ae..1386e02c04 100644
--- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -60,14 +60,15 @@ export default function useComboboxOption({
   }
 
   const selected = selectedOptions[value];
+  const active = activeIndex === index;
 
   useEffect(() => {
     console.log('option effect');
-    if (activeIndex === index) {
+    if (active) {
       dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
       dispatch?.({ type: 'SET_ACTIVE_DESCENDANT', payload: id });
     }
-  }, [activeIndex, generatedId, index, id, dispatch]);
+  }, [generatedId, id, dispatch, active, index]);
 
   const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
 
@@ -75,6 +76,7 @@ export default function useComboboxOption({
     id,
     ref: combinedRef,
     selected,
+    active,
     index,
     onOptionClick: onOptionClickDebounced,
     setActiveOption,
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index f2cf85a864..7ba7725831 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -5,11 +5,10 @@ import useDebounce from '../../../utilities/useDebounce';
 import type useCombobox from './useCombobox';
 import { isInteractiveComboboxCustom } from './useCombobox';
 import type { Option } from './useCombobox';
-import { ComboboxIdContext, ComboboxIdDispatch } from './ComboboxIdContext';
+import { ComboboxIdContext } from './ComboboxIdContext';
 
 type UseComboboxKeyboardProps = {
   customIds: string[];
-  options: ReturnType<typeof useCombobox>['options'];
   filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];
   selectedOptions: ReturnType<typeof useCombobox>['selectedOptions'];
   readOnly: boolean;
@@ -26,7 +25,6 @@ type UseComboboxKeyboardProps = {
 
 export const useComboboxKeyboard = ({
   customIds,
-  options,
   readOnly,
   disabled,
   restChildren,
@@ -46,13 +44,10 @@ export const useComboboxKeyboard = ({
   console.log({
     context,
   });
-  const dispatch = useContext(ComboboxIdDispatch);
   const { activeIndex } = context;
 
   // handle keyboard navigation in the list
   const handleKeyDownFunc = (event: React.KeyboardEvent) => {
-    const navigatable = customIds.length + Object.keys(options).length;
-
     if (readOnly || disabled) return;
     if (!event) return;
     switch (event.key) {
@@ -60,34 +55,20 @@ export const useComboboxKeyboard = ({
         event.preventDefault();
         if (!open) {
           setOpen(true);
-          dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
-        } else {
-          dispatch?.({
-            type: 'SET_ACTIVE_INDEX',
-            payload: Math.min(activeIndex + 1, navigatable - 1),
-          });
         }
 
         break;
       case 'ArrowUp':
         event.preventDefault();
         /* If we are on the first item, close */
-
         if (activeIndex === 0) {
           setOpen(false);
-          dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
         }
 
-        dispatch?.({
-          type: 'SET_ACTIVE_INDEX',
-          payload: Math.max(activeIndex - 1, 0),
-        });
-
         break;
       case 'Enter':
         event.preventDefault();
         if (open && (filteredOptions[activeIndex] || customIds.length > 0)) {
-          console.log('in here');
           // check if we are in the custom components
           if (activeIndex <= customIds.length) {
             // send `onSelect` event to the custom component
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index 3a80fbfc2c..9dc22c099b 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -69,6 +69,9 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
     virtual: true,
     scrollItemIntoView: true,
     enabled: open,
+    onNavigate: (index) => {
+      dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
+    },
   });
 
   const { getReferenceProps, getFloatingProps } = useInteractions([

From 4dffec5f75827edb5fd1eb3d946b1e5444cc2780 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 13:58:57 +0200
Subject: [PATCH 21/47] refactor active descendant

---
 .../form/Combobox/ComboboxIdContext.tsx       | 17 +-----
 .../form/Combobox/Option/Option.tsx           |  4 --
 .../form/Combobox/internal/ComboboxInput.tsx  | 59 ++++++++++---------
 .../form/Combobox/useFloatingCombobox.tsx     |  2 +
 4 files changed, 33 insertions(+), 49 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/ComboboxIdContext.tsx b/packages/react/src/components/form/Combobox/ComboboxIdContext.tsx
index 5fec36c435..73546ba56b 100644
--- a/packages/react/src/components/form/Combobox/ComboboxIdContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxIdContext.tsx
@@ -3,12 +3,10 @@ import { createContext, useContext, useReducer } from 'react';
 
 type ComboboxIdContextType = {
   activeIndex: number;
-  activeDescendant: string | undefined;
 };
 
 export const ComboboxIdContext = createContext<ComboboxIdContextType>({
   activeIndex: 0,
-  activeDescendant: undefined,
 });
 
 type SetActiveIndexAction = {
@@ -16,14 +14,7 @@ type SetActiveIndexAction = {
   payload: number;
 };
 
-type SetActiveDescendantIdAction = {
-  type: 'SET_ACTIVE_DESCENDANT';
-  payload: string;
-};
-
-type ComboboxIdReducerAction =
-  | SetActiveIndexAction
-  | SetActiveDescendantIdAction;
+type ComboboxIdReducerAction = SetActiveIndexAction;
 
 export const ComboboxIdReducer = (
   state: ComboboxIdContextType,
@@ -35,11 +26,6 @@ export const ComboboxIdReducer = (
         ...state,
         activeIndex: action.payload,
       };
-    case 'SET_ACTIVE_DESCENDANT':
-      return {
-        ...state,
-        activeDescendant: action.payload,
-      };
     default:
       return state;
   }
@@ -58,7 +44,6 @@ export const ComboboxIdProvider = ({
 }) => {
   const [state, dispatch] = useReducer(ComboboxIdReducer, {
     activeIndex: 0,
-    activeDescendant: undefined,
   });
 
   return (
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 3eebd7a0a5..a09084b50d 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -68,10 +68,6 @@ export const ComboboxOption = memo(
             setActiveOption(index, labelId);
             rest.onMouseEnter?.(e);
           }} // Set active index on hover
-          onFocus={(e) => {
-            setActiveOption(index, labelId);
-            rest.onFocus?.(e);
-          }} // Set active index on focus
           className={cl(
             classes.option,
             classes[size],
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index b19cbae306..1f09536604 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -9,7 +9,7 @@ import classes from '../Combobox.module.css';
 import { Box } from '../../../Box';
 import textFieldClasses from '../../Textfield/Textfield.module.css';
 import { omit } from '../../../../utilities';
-import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
+import { useComboboxIdDispatch } from '../ComboboxIdContext';
 
 import ComboboxChips from './ComboboxChips';
 import ComboboxClearButton from './ComboboxClearButton';
@@ -18,7 +18,6 @@ export const ComboboxInput = ({
   ...rest
 }: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>) => {
   const context = useContext(ComboboxContext);
-  const { activeDescendant } = useComboboxId();
   const idDispatch = useComboboxIdDispatch();
 
   if (!context) {
@@ -112,34 +111,36 @@ export const ComboboxInput = ({
   const showClearButton =
     multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
 
+  /* Props from floating-ui */
+  const props = getReferenceProps({
+    ref: refs?.setReference,
+    role: null,
+    'aria-controls': null,
+    'aria-expanded': null,
+    'aria-haspopup': null,
+    /* If we click the wrapper, open the list, set index to first option, and focus the input */
+    onClick() {
+      if (disabled) return;
+      if (readOnly) return;
+      setOpen(true);
+      setActiveIndex(0);
+      inputRef.current?.focus();
+    },
+    /* Handles list navigation */
+    onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+      handleKeyDown(event);
+    },
+    // preventDefault on keydown to avoid sending in form
+    onKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+      }
+    },
+  });
+
   return (
     <Box
-      /* Props from floating-ui */
-      {...getReferenceProps({
-        ref: refs?.setReference,
-        role: null,
-        'aria-controls': null,
-        'aria-expanded': null,
-        'aria-haspopup': null,
-        /* If we click the wrapper, open the list, set index to first option, and focus the input */
-        onClick() {
-          if (disabled) return;
-          if (readOnly) return;
-          setOpen(true);
-          setActiveIndex(0);
-          inputRef.current?.focus();
-        },
-        /* Handles list navigation */
-        onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
-          handleKeyDown(event);
-        },
-        // preventDefault on keydown to avoid sending in form
-        onKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-          }
-        },
-      })}
+      {...props}
       aria-disabled={disabled}
       className={cl(
         textFieldClasses.input,
@@ -155,7 +156,7 @@ export const ComboboxInput = ({
         {multiple && !hideChips && <ComboboxChips />}
         <input
           ref={mergedRefs}
-          aria-activedescendant={activeDescendant}
+          aria-activedescendant={props['aria-activedescendant'] as string}
           readOnly={readOnly}
           aria-autocomplete='list'
           role='combobox'
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index 9dc22c099b..5b91b49874 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -69,7 +69,9 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
     virtual: true,
     scrollItemIntoView: true,
     enabled: open,
+    focusItemOnHover: true,
     onNavigate: (index) => {
+      console.log('CALLEDDDD');
       dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
     },
   });

From 1ffac0bbf5e51b38f2782125a8d7a89f4b46da06 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 14:25:10 +0200
Subject: [PATCH 22/47] more list optimization

---
 .../src/components/form/Combobox/Combobox.tsx |  2 ++
 .../form/Combobox/ComboboxContext.tsx         |  8 +++++++
 .../form/Combobox/Option/Option.tsx           | 21 ++++++-------------
 .../Combobox/Option/useComboboxOption.tsx     | 19 +----------------
 .../components/form/Combobox/useCombobox.tsx  | 11 ----------
 .../form/Combobox/useFloatingCombobox.tsx     | 10 ++++-----
 6 files changed, 21 insertions(+), 50 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 6927b8c50f..c2bfc2c9d9 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -196,6 +196,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       context,
       getReferenceProps,
       getFloatingProps,
+      getItemProps,
     } = useFloatingCombobox({
       listRef,
     });
@@ -346,6 +347,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           handleKeyDown,
           setOpen,
           getReferenceProps,
+          getItemProps,
           setSelectedOptions,
           /* Recieves the value of the option, and searches for it in our values lookup */
           onOptionClick: (value: string) => {
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index 11a04b02c7..1e448749b9 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -2,7 +2,9 @@ import type {
   UseFloatingReturn,
   UseListNavigationProps,
 } from '@floating-ui/react';
+import type { HTMLProps } from 'react';
 import { createContext } from 'react';
+import type { ExtendedUserProps } from '@floating-ui/react/src/hooks/useInteractions';
 
 import type { useFormField } from '../useFormField';
 
@@ -39,6 +41,12 @@ type ComboboxContextType = {
   getReferenceProps: (
     props?: Record<string, unknown>,
   ) => Record<string, unknown>;
+  getItemProps: (
+    userProps?:
+      | (Omit<HTMLProps<HTMLElement>, 'selected' | 'active'> &
+          ExtendedUserProps)
+      | undefined,
+  ) => Record<string, unknown>;
   onOptionClick: (value: string) => void;
   setSelectedOptions: React.Dispatch<
     React.SetStateAction<{
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index a09084b50d..1f04419d1c 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -32,15 +32,7 @@ export const ComboboxOption = memo(
     ({ value, description, children, className, ...rest }, forwardedRef) => {
       const labelId = useId();
 
-      const {
-        id,
-        ref,
-        selected,
-        index,
-        active,
-        onOptionClick,
-        setActiveOption,
-      } = useComboboxOption({
+      const { id, ref, selected, active, onOptionClick } = useComboboxOption({
         restId: rest.id,
         ref: forwardedRef,
         value,
@@ -50,10 +42,13 @@ export const ComboboxOption = memo(
       if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
       }
-      const { size, multiple } = context;
+      const { size, multiple, getItemProps } = context;
+
+      const props = getItemProps();
 
       return (
         <button
+          ref={ref}
           id={id}
           role='option'
           type='button'
@@ -64,10 +59,6 @@ export const ComboboxOption = memo(
             onOptionClick();
             rest.onClick?.(e);
           }}
-          onMouseEnter={(e) => {
-            setActiveOption(index, labelId);
-            rest.onMouseEnter?.(e);
-          }} // Set active index on hover
           className={cl(
             classes.option,
             classes[size],
@@ -75,8 +66,8 @@ export const ComboboxOption = memo(
             multiple && classes.multiple,
             className,
           )}
-          ref={ref}
           {...omit(['displayValue'], rest)}
+          {...omit(['onClick'], props)}
         >
           <Label
             asChild
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
index 1386e02c04..6efc75c124 100644
--- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -27,27 +27,13 @@ export default function useComboboxOption({
   if (!context) {
     throw new Error('ComboboxOption must be used within a Combobox');
   }
-  const {
-    selectedOptions,
-    onOptionClick,
-    listRef,
-    optionValues,
-    readOnly,
-    disabled,
-  } = context;
+  const { selectedOptions, onOptionClick, listRef, optionValues } = context;
 
   const index = useMemo(
     () => optionValues.indexOf(value),
     [optionValues, value],
   );
 
-  const setActiveOption = (index: number, id: string) => {
-    if (readOnly) return;
-    if (disabled) return;
-    dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
-    dispatch?.({ type: 'SET_ACTIVE_DESCENDANT', payload: id });
-  };
-
   const combinedRef = useMergeRefs([
     (node: HTMLElement | null) => {
       listRef.current[index] = node;
@@ -66,7 +52,6 @@ export default function useComboboxOption({
     console.log('option effect');
     if (active) {
       dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
-      dispatch?.({ type: 'SET_ACTIVE_DESCENDANT', payload: id });
     }
   }, [generatedId, id, dispatch, active, index]);
 
@@ -77,8 +62,6 @@ export default function useComboboxOption({
     ref: combinedRef,
     selected,
     active,
-    index,
     onOptionClick: onOptionClickDebounced,
-    setActiveOption,
   };
 }
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 87a0a77c69..8c4c439ea5 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -184,17 +184,6 @@ export default function useCombobox({
     });
   }, [children]);
 
-  console.log({
-    optionsChildren,
-    filteredOptions,
-    optionValues,
-    restChildren,
-    options,
-    customIds,
-    selectedOptions,
-    prevSelectedHash,
-  });
-
   return {
     optionsChildren,
     filteredOptions,
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index 5b91b49874..e991f73f46 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -71,16 +71,13 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
     enabled: open,
     focusItemOnHover: true,
     onNavigate: (index) => {
-      console.log('CALLEDDDD');
       dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
     },
   });
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    role,
-    dismiss,
-    listNav,
-  ]);
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [role, dismiss, listNav],
+  );
 
   return {
     open,
@@ -91,5 +88,6 @@ export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
     context,
     getReferenceProps,
     getFloatingProps,
+    getItemProps,
   };
 };

From 32c402cc7403240c7357437d2b39e999a8672d13 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 14:43:31 +0200
Subject: [PATCH 23/47] remove console logs, cleanup

---
 .../react/src/components/form/Combobox/Combobox.tsx  |  4 ----
 .../src/components/form/Combobox/Option/Option.tsx   |  4 ++--
 .../form/Combobox/Option/useComboboxOption.tsx       | 11 ++++-------
 .../src/components/form/Combobox/useCombobox.tsx     |  7 -------
 .../components/form/Combobox/useComboboxKeyboard.tsx | 12 +++---------
 .../components/form/Combobox/useFloatingCombobox.tsx |  1 -
 6 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index c2bfc2c9d9..01d675360d 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -216,7 +216,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // if value is set, set input value to the label of the value
     useEffect(() => {
-      console.log('use effect 2');
       if (value && value.length > 0 && !multiple) {
         const option = options[value[0]];
         setInputValue(option?.label || '');
@@ -225,7 +224,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // Send new value if option was clicked
     useEffect(() => {
-      console.log('use effect 4');
       const selectedHash = JSON.stringify(selectedOptions);
       if (prevSelectedHash === selectedHash) return;
 
@@ -235,7 +233,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
     }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
 
     useEffect(() => {
-      console.log('use effect 5');
       if (value && Object.keys(options).length > 0) {
         const updatedSelectedOptions = value.map((option) => {
           const value = options[option];
@@ -255,7 +252,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // handle click on option, either select or deselect - Handles single or multiple
     const handleSelectOption = (option: Option) => {
-      console.log('handleSelectOption');
       // if option is already selected, remove it
       if (value && value.includes(option.value)) {
         setSelectedOptions((prev) => {
diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx
index 1f04419d1c..3e7597baa2 100644
--- a/packages/react/src/components/form/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/form/Combobox/Option/Option.tsx
@@ -33,7 +33,7 @@ export const ComboboxOption = memo(
       const labelId = useId();
 
       const { id, ref, selected, active, onOptionClick } = useComboboxOption({
-        restId: rest.id,
+        id: rest.id,
         ref: forwardedRef,
         value,
       });
@@ -67,7 +67,7 @@ export const ComboboxOption = memo(
             className,
           )}
           {...omit(['displayValue'], rest)}
-          {...omit(['onClick'], props)}
+          {...omit(['onClick', 'onPointerLeave'], props)}
         >
           <Label
             asChild
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
index 6efc75c124..2883cce350 100644
--- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -6,20 +6,18 @@ import useDebounce from '../../../../utilities/useDebounce';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
 
 type UseComboboxOptionProps = {
-  restId?: string;
+  id?: string;
   ref: React.Ref<HTMLButtonElement>;
   value: string;
 };
 
 export default function useComboboxOption({
-  restId,
+  id,
   ref,
   value,
 }: UseComboboxOptionProps) {
-  console.log('useComboboxOption');
-
   const generatedId = useId();
-  const id = restId || generatedId;
+  const newId = id || generatedId;
 
   const context = useContext(ComboboxContext);
   const { activeIndex } = useComboboxId();
@@ -49,7 +47,6 @@ export default function useComboboxOption({
   const active = activeIndex === index;
 
   useEffect(() => {
-    console.log('option effect');
     if (active) {
       dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
     }
@@ -58,7 +55,7 @@ export default function useComboboxOption({
   const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
 
   return {
-    id,
+    id: newId,
     ref: combinedRef,
     selected,
     active,
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 8c4c439ea5..ded81b3c1d 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -51,10 +51,7 @@ export default function useCombobox({
   },
   initialValue,
 }: UseComboboxProps) {
-  console.log('useCombobox');
-
   const options = useMemo(() => {
-    console.log('options useCombobox');
     const allOptions: {
       [key: string]: Option;
     } = {};
@@ -96,7 +93,6 @@ export default function useCombobox({
       (initialValue || []).reduce<{
         [key: string]: Option;
       }>((acc, value) => {
-        console.log('preSelectedOptions useCombobox');
         const option = options[value];
         if (isOption(option)) {
           acc[value] = option;
@@ -115,7 +111,6 @@ export default function useCombobox({
   );
 
   const { optionsChildren, customIds, filteredOptions } = useMemo(() => {
-    console.log('optionsChildren useCombobox');
     let optionsChildren;
 
     const valuesArray = Object.values(options);
@@ -167,7 +162,6 @@ export default function useCombobox({
   }, [options, children, multiple, inputValue, selectedOptions, filter]);
 
   const optionValues = useMemo(() => {
-    console.log('optionValues useCombobox');
     // create an index map of values from optionsChildren
     const options = optionsChildren.map((child) => {
       const { value } = child.props;
@@ -178,7 +172,6 @@ export default function useCombobox({
   }, [customIds, optionsChildren]);
 
   const restChildren = useMemo(() => {
-    console.log('restChildren useCombobox');
     return Children.toArray(children).filter((child) => {
       return !isComboboxOption(child);
     });
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index 7ba7725831..87eae3c72a 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -1,11 +1,11 @@
-import { useContext, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 import useDebounce from '../../../utilities/useDebounce';
 
 import type useCombobox from './useCombobox';
 import { isInteractiveComboboxCustom } from './useCombobox';
 import type { Option } from './useCombobox';
-import { ComboboxIdContext } from './ComboboxIdContext';
+import { useComboboxId } from './ComboboxIdContext';
 
 type UseComboboxKeyboardProps = {
   customIds: string[];
@@ -38,13 +38,7 @@ export const useComboboxKeyboard = ({
   setSelectedOptions,
   handleSelectOption,
 }: UseComboboxKeyboardProps) => {
-  console.log('useComboboxKeyboard');
-
-  const context = useContext(ComboboxIdContext);
-  console.log({
-    context,
-  });
-  const { activeIndex } = context;
+  const { activeIndex } = useComboboxId();
 
   // handle keyboard navigation in the list
   const handleKeyDownFunc = (event: React.KeyboardEvent) => {
diff --git a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
index e991f73f46..1b2a46c5bd 100644
--- a/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useFloatingCombobox.tsx
@@ -19,7 +19,6 @@ type UseFloatingComboboxProps = {
 };
 
 export const useFloatingCombobox = ({ listRef }: UseFloatingComboboxProps) => {
-  console.log('useFloatingCombobox');
   const [open, setOpen] = useState(false);
 
   const { activeIndex } = useComboboxId();

From dc91645da72f42df89f11a011802021655f90cfc Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 9 Apr 2024 14:47:02 +0200
Subject: [PATCH 24/47] more options on story

---
 .../react/src/components/form/Combobox/Combobox.stories.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
index 90eb6b4bd2..f338d6ea41 100644
--- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -598,7 +598,7 @@ CustomNewValue.args = {
   label: 'Hvor går reisen?',
 };
 
-const items = Array.from({ length: 1500 }, (_, index) => ({
+const items = Array.from({ length: 2000 }, (_, index) => ({
   name: `Option ${index}`,
   value: `option-${index}`,
 }));
@@ -626,3 +626,7 @@ export const ThousandsOfOptions: StoryFn<typeof Combobox> = (args) => {
     </Combobox>
   );
 };
+
+ThousandsOfOptions.args = {
+  virtual: true,
+};

From 6c8e829a7eaadd38b56d8f526503a402885a2fc1 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 10 Apr 2024 08:19:51 +0200
Subject: [PATCH 25/47] fix custom children

---
 .../src/components/form/Combobox/Combobox.tsx |  1 +
 .../form/Combobox/ComboboxContext.tsx         |  1 +
 .../form/Combobox/Custom/Custom.tsx           | 32 +++++++++----------
 .../Combobox/Option/useComboboxOption.tsx     |  9 ++++--
 .../components/form/Combobox/useCombobox.tsx  |  5 +--
 5 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 01d675360d..1346ca07d3 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -339,6 +339,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           clearButtonLabel: cleanButtonLabel || clearButtonLabel,
           hideClearButton,
           listId,
+          customIds,
           setInputValue,
           handleKeyDown,
           setOpen,
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index 1e448749b9..811bb36621 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -35,6 +35,7 @@ type ComboboxContextType = {
   inputValue: string;
   optionValues: string[];
   listId: string;
+  customIds: string[];
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   setOpen: (open: boolean) => void;
   handleKeyDown: (event: React.KeyboardEvent) => void;
diff --git a/packages/react/src/components/form/Combobox/Custom/Custom.tsx b/packages/react/src/components/form/Combobox/Custom/Custom.tsx
index 6a3e711035..16da38bd41 100644
--- a/packages/react/src/components/form/Combobox/Custom/Custom.tsx
+++ b/packages/react/src/components/form/Combobox/Custom/Custom.tsx
@@ -2,10 +2,11 @@ import { forwardRef, useContext, useId, useMemo } from 'react';
 import type * as React from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
+import { useMergeRefs } from '@floating-ui/react';
 
 import { ComboboxContext } from '../ComboboxContext';
 import { omit } from '../../../../utilities';
-import { ComboboxIdContext, ComboboxIdDispatch } from '../ComboboxIdContext';
+import { useComboboxId } from '../ComboboxIdContext';
 
 import classes from './Custom.module.css';
 
@@ -52,41 +53,38 @@ export const ComboboxCustom = forwardRef<HTMLDivElement, ComboboxCustomProps>(
 
     const randomId = useId();
 
+    const { activeIndex } = useComboboxId();
     const context = useContext(ComboboxContext);
-    const idContext = useContext(ComboboxIdContext);
-    const idDispatch = useContext(ComboboxIdDispatch);
-    const { activeIndex } = idContext;
 
-    const setActiveIndex = (index: number) => {
-      idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
-    };
     if (!context) {
       throw new Error('ComboboxCustom must be used within a Combobox');
     }
 
-    const { size, optionValues } = context;
+    const { size, customIds, listRef, getItemProps } = context;
 
     const index = useMemo(
-      () => (id && optionValues.indexOf(id)) || 0,
-      [optionValues, id],
+      () => (id && customIds.indexOf(id)) || 0,
+      [id, customIds],
     );
 
+    const combinedRef = useMergeRefs([
+      (node: HTMLElement | null) => {
+        listRef.current[index] = node;
+      },
+      ref,
+    ]);
+
     return (
       <Component
-        ref={ref}
+        ref={combinedRef}
         tabIndex={-1}
         className={cl(classes.custom, classes[size], className)}
         id={id || randomId}
         role='option'
         aria-selected={activeIndex === index}
         data-active={activeIndex === index}
-        onMouseEnter={() => {
-          typeof index === 'number' && setActiveIndex(index);
-        }} // Set active index on hover
-        onFocus={() => {
-          typeof index === 'number' && setActiveIndex(index);
-        }}
         {...omit(['interactive'], rest)}
+        {...omit(['onClick', 'onPointerLeave'], getItemProps())}
       />
     );
   },
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
index 2883cce350..55562f3d29 100644
--- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -25,11 +25,14 @@ export default function useComboboxOption({
   if (!context) {
     throw new Error('ComboboxOption must be used within a Combobox');
   }
-  const { selectedOptions, onOptionClick, listRef, optionValues } = context;
+  const { selectedOptions, onOptionClick, listRef, optionValues, customIds } =
+    context;
+
+  console.log(customIds);
 
   const index = useMemo(
-    () => optionValues.indexOf(value),
-    [optionValues, value],
+    () => optionValues.indexOf(value) + customIds.length,
+    [customIds, optionValues, value],
   );
 
   const combinedRef = useMergeRefs([
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index ded81b3c1d..71fd1f211a 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -114,7 +114,8 @@ export default function useCombobox({
     let optionsChildren;
 
     const valuesArray = Object.values(options);
-    const children_ = Children.toArray(children).filter((child) =>
+    const allChildren = Children.toArray(children);
+    const children_ = allChildren.filter((child) =>
       isComboboxOption(child),
     ) as ReactElement<ComboboxOptionProps>[];
 
@@ -140,7 +141,7 @@ export default function useCombobox({
       return filter(inputValue, { ...option }) || isSelected;
     });
     // find all custom components with `interactive=true` and generate random values for them
-    const customChildren = children_.filter((child) => {
+    const customChildren = allChildren.filter((child) => {
       return isInteractiveComboboxCustom(child);
     }) as ReactElement<ComboboxCustomProps>[];
 

From 3fb48b12b30a82488033f130069fd7e58aa9ab79 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 10 Apr 2024 11:53:08 +0200
Subject: [PATCH 26/47] refactor filtering

---
 .../src/components/form/Combobox/Combobox.tsx | 14 ++--
 .../form/Combobox/ComboboxContext.tsx         |  3 +-
 .../components/form/Combobox/Empty/Empty.tsx  |  4 +-
 .../Combobox/Option/useComboboxOption.tsx     | 15 ++--
 .../form/Combobox/useCombobox.test.tsx        | 16 ++---
 .../components/form/Combobox/useCombobox.tsx  | 69 +++++++++----------
 .../form/Combobox/useComboboxKeyboard.tsx     | 67 +++++++++---------
 7 files changed, 94 insertions(+), 94 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 1346ca07d3..69e84c4033 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -171,14 +171,15 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     const {
       selectedOptions,
-      setSelectedOptions,
       options,
-      optionsChildren,
       restChildren,
+      interactiveChildren,
       optionValues,
       customIds,
+      filteredOptionsChildren,
       filteredOptions,
       prevSelectedHash,
+      setSelectedOptions,
       setPrevSelectedHash,
     } = useCombobox({
       children,
@@ -300,7 +301,9 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       multiple,
       restChildren,
       inputValue,
+      options,
       open,
+      interactiveChildren,
       setOpen,
       setInputValue,
       setSelectedOptions,
@@ -308,7 +311,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
     });
 
     const rowVirtualizer = useVirtualizer({
-      count: Object.keys(options).length,
+      count: Object.keys(filteredOptionsChildren).length,
       getScrollElement: () => (virtual ? refs.floating.current : null),
       estimateSize: () => 70,
       measureElement: (elem) => {
@@ -340,6 +343,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           hideClearButton,
           listId,
           customIds,
+          filteredOptions,
           setInputValue,
           handleKeyDown,
           setOpen,
@@ -442,7 +446,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
                           transform: `translateY(${virtualRow.start}px)`,
                         }}
                       >
-                        {optionsChildren[virtualRow.index]}
+                        {filteredOptionsChildren[virtualRow.index]}
                       </div>
                     ))}
                   </div>
@@ -460,7 +464,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
                   <>
                     {/* Add the rest of the children */}
                     {restChildren}
-                    {!virtual && optionsChildren}
+                    {!virtual && filteredOptionsChildren}
                   </>
                 )}
               </Box>
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index 811bb36621..42a525803f 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -10,6 +10,7 @@ import type { useFormField } from '../useFormField';
 
 import type { ComboboxProps } from './Combobox';
 import type { Option } from './useCombobox';
+import type useCombobox from './useCombobox';
 
 type ComboboxContextType = {
   multiple: NonNullable<ComboboxProps['multiple']>;
@@ -21,6 +22,7 @@ type ComboboxContextType = {
   hideChips: NonNullable<ComboboxProps['hideChips']>;
   clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
   hideClearButton: NonNullable<ComboboxProps['hideClearButton']>;
+  filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];
   options: {
     [key: string]: Option;
   };
@@ -35,7 +37,6 @@ type ComboboxContextType = {
   inputValue: string;
   optionValues: string[];
   listId: string;
-  customIds: string[];
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   setOpen: (open: boolean) => void;
   handleKeyDown: (event: React.KeyboardEvent) => void;
diff --git a/packages/react/src/components/form/Combobox/Empty/Empty.tsx b/packages/react/src/components/form/Combobox/Empty/Empty.tsx
index 5df86fe46e..edf6556af1 100644
--- a/packages/react/src/components/form/Combobox/Empty/Empty.tsx
+++ b/packages/react/src/components/form/Combobox/Empty/Empty.tsx
@@ -15,10 +15,10 @@ export const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(
       throw new Error('ComboboxEmpty must be used within a Combobox');
     }
 
-    const { optionValues, size } = context;
+    const { filteredOptions, size } = context;
 
     return (
-      optionValues.length === 0 && (
+      filteredOptions.length === 0 && (
         <div
           ref={ref}
           className={cl(classes.empty, classes[size], className)}
diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
index 55562f3d29..27fa8d380d 100644
--- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx
@@ -25,14 +25,17 @@ export default function useComboboxOption({
   if (!context) {
     throw new Error('ComboboxOption must be used within a Combobox');
   }
-  const { selectedOptions, onOptionClick, listRef, optionValues, customIds } =
-    context;
-
-  console.log(customIds);
+  const {
+    selectedOptions,
+    onOptionClick,
+    listRef,
+    customIds,
+    filteredOptions,
+  } = context;
 
   const index = useMemo(
-    () => optionValues.indexOf(value) + customIds.length,
-    [customIds, optionValues, value],
+    () => filteredOptions.indexOf(value) + customIds.length,
+    [customIds.length, filteredOptions, value],
   );
 
   const combinedRef = useMergeRefs([
diff --git a/packages/react/src/components/form/Combobox/useCombobox.test.tsx b/packages/react/src/components/form/Combobox/useCombobox.test.tsx
index 225855a8e4..c1fc9e13b7 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.test.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.test.tsx
@@ -59,7 +59,7 @@ describe('useCombobox', () => {
     });
 
     expect(Object.keys(result.current.options).length).toBe(3);
-    expect(result.current.optionsChildren.length).toBe(3);
+    expect(result.current.filteredOptions.length).toBe(3);
     expect(result.current.restChildren.length).toBe(1);
   });
 
@@ -70,19 +70,19 @@ describe('useCombobox', () => {
     });
 
     expect(Object.keys(result.current.options).length).toBe(3);
-    expect(result.current.optionsChildren.length).toBe(0);
+    expect(result.current.filteredOptions.length).toBe(0);
     expect(result.current.restChildren.length).toBe(1);
   });
 
   it('should show 1 option when we type "3" and have active value "oslo"', () => {
     const { result } = renderUseCombobox({
       inputValue: '3',
-      multiple: false,
+      multiple: true,
       initialValue: ['oslo'],
     });
 
     expect(Object.keys(result.current.options).length).toBe(3);
-    expect(result.current.optionsChildren.length).toBe(1);
+    expect(result.current.filteredOptions.length).toBe(1);
     expect(result.current.restChildren.length).toBe(1);
   });
 
@@ -94,7 +94,7 @@ describe('useCombobox', () => {
     });
 
     expect(Object.keys(result.current.options).length).toBe(3);
-    expect(result.current.optionsChildren.length).toBe(1);
+    expect(result.current.filteredOptions.length).toBe(1);
     expect(result.current.restChildren.length).toBe(1);
   });
 
@@ -105,19 +105,19 @@ describe('useCombobox', () => {
     });
 
     expect(Object.keys(result.current.options).length).toBe(3);
-    expect(result.current.optionsChildren.length).toBe(1);
+    expect(result.current.filteredOptions.length).toBe(1);
     expect(result.current.restChildren.length).toBe(1);
   });
 
   it('should show 2 option when we type "l" and have active value "oslo"', () => {
     const { result } = renderUseCombobox({
       inputValue: 'l',
-      multiple: false,
+      multiple: true,
       initialValue: ['oslo'],
     });
 
     expect(Object.keys(result.current.options).length).toBe(3);
-    expect(result.current.optionsChildren.length).toBe(2);
+    expect(result.current.filteredOptions.length).toBe(2);
     expect(result.current.restChildren.length).toBe(1);
   });
 });
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 71fd1f211a..2d3db5a217 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -110,36 +110,12 @@ export default function useCombobox({
     JSON.stringify(selectedOptions),
   );
 
-  const { optionsChildren, customIds, filteredOptions } = useMemo(() => {
-    let optionsChildren;
-
-    const valuesArray = Object.values(options);
+  const { optionsChildren, customIds } = useMemo(() => {
     const allChildren = Children.toArray(children);
-    const children_ = allChildren.filter((child) =>
+    const optionsChildren = allChildren.filter((child) =>
       isComboboxOption(child),
     ) as ReactElement<ComboboxOptionProps>[];
 
-    const activeValue = valuesArray.find((item) => item.label === inputValue);
-
-    if (activeValue && !multiple) {
-      optionsChildren = children_;
-    }
-    if (inputValue === '' && !multiple) {
-      optionsChildren = children_;
-    }
-
-    optionsChildren = children_.filter((child) => {
-      const { value } = child.props;
-
-      const option = valuesArray.find((item) => item.value === value);
-
-      if (!option) return false;
-
-      const isSelected = selectedOptions[value];
-
-      // show what we search for, and all selected options
-      return filter(inputValue, { ...option }) || isSelected;
-    });
     // find all custom components with `interactive=true` and generate random values for them
     const customChildren = allChildren.filter((child) => {
       return isInteractiveComboboxCustom(child);
@@ -153,14 +129,28 @@ export default function useCombobox({
       return child.props.id;
     });
 
-    const filteredOptions: Option[] = optionsChildren.map((child) => {
-      return options[child.props.value];
-    });
+    return { optionsChildren, customIds };
+  }, [children]);
 
-    return { optionsChildren, customIds, filteredOptions };
+  const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
+    const filteredOptions: string[] = [];
 
-    // ignore filter function in deps array, it causes a lot of re-renders
-  }, [options, children, multiple, inputValue, selectedOptions, filter]);
+    const filteredOptionsChildren = Object.keys(options)
+      .map((option, index) => {
+        if (multiple && selectedOptions[option]) {
+          filteredOptions.push(options[option].value);
+          return optionsChildren[index];
+        }
+        if (filter(inputValue, options[option])) {
+          filteredOptions.push(options[option].value);
+          return optionsChildren[index];
+        }
+      })
+      .filter((child) => child);
+
+    return { filteredOptions, filteredOptionsChildren };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
 
   const optionValues = useMemo(() => {
     // create an index map of values from optionsChildren
@@ -172,22 +162,29 @@ export default function useCombobox({
     return [...customIds, ...options];
   }, [customIds, optionsChildren]);
 
-  const restChildren = useMemo(() => {
-    return Children.toArray(children).filter((child) => {
+  const { restChildren, interactiveChildren } = useMemo(() => {
+    const restChildren = Children.toArray(children).filter((child) => {
       return !isComboboxOption(child);
     });
+
+    const interactiveChildren = restChildren.filter((child) => {
+      return isInteractiveComboboxCustom(child);
+    });
+
+    return { restChildren, interactiveChildren };
   }, [children]);
 
   return {
-    optionsChildren,
+    filteredOptionsChildren,
     filteredOptions,
     optionValues,
     restChildren,
     options,
     customIds,
     selectedOptions,
-    setSelectedOptions,
     prevSelectedHash,
+    interactiveChildren,
+    setSelectedOptions,
     setPrevSelectedHash,
   };
 }
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index 87eae3c72a..7a89ac8695 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -1,5 +1,3 @@
-import { type ReactNode } from 'react';
-
 import useDebounce from '../../../utilities/useDebounce';
 
 import type useCombobox from './useCombobox';
@@ -8,12 +6,12 @@ import type { Option } from './useCombobox';
 import { useComboboxId } from './ComboboxIdContext';
 
 type UseComboboxKeyboardProps = {
-  customIds: string[];
   filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];
   selectedOptions: ReturnType<typeof useCombobox>['selectedOptions'];
+  interactiveChildren: ReturnType<typeof useCombobox>['interactiveChildren'];
+  options: ReturnType<typeof useCombobox>['options'];
   readOnly: boolean;
   disabled: boolean;
-  restChildren: ReactNode[];
   inputValue: string;
   multiple: boolean;
   open: boolean;
@@ -24,15 +22,15 @@ type UseComboboxKeyboardProps = {
 };
 
 export const useComboboxKeyboard = ({
-  customIds,
   readOnly,
   disabled,
-  restChildren,
+  interactiveChildren,
   filteredOptions,
   inputValue,
   selectedOptions,
   multiple,
   open,
+  options,
   setOpen,
   setInputValue,
   setSelectedOptions,
@@ -62,41 +60,38 @@ export const useComboboxKeyboard = ({
         break;
       case 'Enter':
         event.preventDefault();
-        if (open && (filteredOptions[activeIndex] || customIds.length > 0)) {
-          // check if we are in the custom components
-          if (activeIndex <= customIds.length) {
-            // send `onSelect` event to the custom component
-            const selectedId = customIds[activeIndex];
-            const selectedComponent = restChildren.find(
-              (component) =>
-                isInteractiveComboboxCustom(component) &&
-                component.props?.id === selectedId,
-            );
-
-            if (
-              isInteractiveComboboxCustom(selectedComponent) &&
-              selectedComponent.props.onSelect
-            ) {
-              selectedComponent.props.onSelect();
-            }
+        // ignore if it is closed
+        if (!open) break;
+
+        // check if we are in the custom components
+        if (activeIndex <= interactiveChildren.length) {
+          const selectedComponent = interactiveChildren[activeIndex];
+
+          if (
+            isInteractiveComboboxCustom(selectedComponent) &&
+            selectedComponent.props.onSelect
+          ) {
+            selectedComponent.props.onSelect();
+            return;
           }
+        }
 
-          // if we are in the options, find the actual index
-          const valueIndex = activeIndex - customIds.length;
-
-          const option = filteredOptions[valueIndex];
+        // if we are in the options, find the actual index
+        // eslint-disable-next-line no-case-declarations
+        const valueIndex = activeIndex - interactiveChildren.length;
 
-          if (!multiple) {
-            // check if option is already selected, if so, deselect it
-            if (selectedOptions[option?.value]) {
-              setSelectedOptions({});
-              setInputValue('');
-              return;
-            }
+        // eslint-disable-next-line no-case-declarations
+        const option = filteredOptions[valueIndex];
+        if (!multiple) {
+          // check if option is already selected, if so, deselect it
+          if (selectedOptions[option]) {
+            setSelectedOptions({});
+            setInputValue('');
+            return;
           }
-
-          handleSelectOption(option);
         }
+
+        handleSelectOption(options[option]);
         break;
 
       case 'Backspace':

From 1009446a9097c60a08230f8da122c30132b43921 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 10 Apr 2024 11:56:26 +0200
Subject: [PATCH 27/47] fix build errors

---
 packages/react/src/components/form/Combobox/Combobox.tsx        | 2 --
 packages/react/src/components/form/Combobox/ComboboxContext.tsx | 1 +
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 69e84c4033..4eb7e9f3b2 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -293,13 +293,11 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
     const debouncedHandleSelectOption = useDebounce(handleSelectOption, 50);
 
     const handleKeyDown = useComboboxKeyboard({
-      customIds,
       filteredOptions,
       selectedOptions,
       readOnly: formFieldProps.readOnly || false,
       disabled: disabled,
       multiple,
-      restChildren,
       inputValue,
       options,
       open,
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index 42a525803f..b4562d7b5b 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -37,6 +37,7 @@ type ComboboxContextType = {
   inputValue: string;
   optionValues: string[];
   listId: string;
+  customIds: string[];
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   setOpen: (open: boolean) => void;
   handleKeyDown: (event: React.KeyboardEvent) => void;

From e12537d2857c1722009d10e19c4e0571bf5a90f7 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 10 Apr 2024 11:59:30 +0200
Subject: [PATCH 28/47] typescript enchancement

---
 .../react/src/components/form/Combobox/useCombobox.tsx     | 7 ++++---
 .../src/components/form/Combobox/useComboboxKeyboard.tsx   | 7 +------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 2d3db5a217..df27f7f737 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -167,9 +167,10 @@ export default function useCombobox({
       return !isComboboxOption(child);
     });
 
-    const interactiveChildren = restChildren.filter((child) => {
-      return isInteractiveComboboxCustom(child);
-    });
+    const interactiveChildren: ReactElement<ComboboxCustomProps>[] =
+      restChildren.filter((child) => {
+        return isInteractiveComboboxCustom(child);
+      }) as ReactElement<ComboboxCustomProps>[];
 
     return { restChildren, interactiveChildren };
   }, [children]);
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index 7a89ac8695..44313a38f2 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -1,7 +1,6 @@
 import useDebounce from '../../../utilities/useDebounce';
 
 import type useCombobox from './useCombobox';
-import { isInteractiveComboboxCustom } from './useCombobox';
 import type { Option } from './useCombobox';
 import { useComboboxId } from './ComboboxIdContext';
 
@@ -66,11 +65,7 @@ export const useComboboxKeyboard = ({
         // check if we are in the custom components
         if (activeIndex <= interactiveChildren.length) {
           const selectedComponent = interactiveChildren[activeIndex];
-
-          if (
-            isInteractiveComboboxCustom(selectedComponent) &&
-            selectedComponent.props.onSelect
-          ) {
+          if (selectedComponent.props.onSelect) {
             selectedComponent.props.onSelect();
             return;
           }

From 7053ef21822f3f44b3a5ead992811962ee7ad86e Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 10 Apr 2024 12:03:56 +0200
Subject: [PATCH 29/47] fix length check

---
 .../src/components/form/Combobox/useComboboxKeyboard.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index 44313a38f2..cc7aaa1095 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -63,10 +63,10 @@ export const useComboboxKeyboard = ({
         if (!open) break;
 
         // check if we are in the custom components
-        if (activeIndex <= interactiveChildren.length) {
+        if (activeIndex <= interactiveChildren.length - 1) {
           const selectedComponent = interactiveChildren[activeIndex];
           if (selectedComponent.props.onSelect) {
-            selectedComponent.props.onSelect();
+            selectedComponent?.props.onSelect();
             return;
           }
         }

From a51278b820a458316fbe55bd8ae11ca4625ca254 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 22 Apr 2024 10:28:01 +0200
Subject: [PATCH 30/47] fix build error, update floating-ui

---
 packages/react/package.json                   |  2 +-
 .../form/Combobox/ComboboxContext.tsx         | 10 +--
 yarn.lock                                     | 61 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 559a936bac..2f9f39dcb7 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@floating-ui/react": "0.26.4",
+    "@floating-ui/react": "0.26.12",
     "@navikt/aksel-icons": "^5.12.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-virtual": "^3.2.0"
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index b4562d7b5b..5fdcc6b8d4 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -1,10 +1,9 @@
 import type {
   UseFloatingReturn,
   UseListNavigationProps,
+  useInteractions,
 } from '@floating-ui/react';
-import type { HTMLProps } from 'react';
 import { createContext } from 'react';
-import type { ExtendedUserProps } from '@floating-ui/react/src/hooks/useInteractions';
 
 import type { useFormField } from '../useFormField';
 
@@ -44,12 +43,7 @@ type ComboboxContextType = {
   getReferenceProps: (
     props?: Record<string, unknown>,
   ) => Record<string, unknown>;
-  getItemProps: (
-    userProps?:
-      | (Omit<HTMLProps<HTMLElement>, 'selected' | 'active'> &
-          ExtendedUserProps)
-      | undefined,
-  ) => Record<string, unknown>;
+  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
   onOptionClick: (value: string) => void;
   setSelectedOptions: React.Dispatch<
     React.SetStateAction<{
diff --git a/yarn.lock b/yarn.lock
index f594fc5234..2e8cc6c636 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2656,7 +2656,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-react@workspace:packages/react"
   dependencies:
-    "@floating-ui/react": "npm:0.26.4"
+    "@floating-ui/react": "npm:0.26.12"
     "@navikt/aksel-icons": "npm:^5.12.2"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@tanstack/react-virtual": "npm:^3.2.0"
@@ -3075,6 +3075,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "@floating-ui/core@npm:1.6.0"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.1"
+  checksum: d6a47cacde193cd8ccb4c268b91ccc4ca254dffaec6242b07fd9bcde526044cc976d27933a7917f9a671de0a0e27f8d358f46400677dbd0c8199de293e9746e1
+  languageName: node
+  linkType: hard
+
 "@floating-ui/core@npm:^1.4.1":
   version: 1.4.1
   resolution: "@floating-ui/core@npm:1.4.1"
@@ -3094,6 +3103,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/dom@npm:^1.6.1":
+  version: 1.6.3
+  resolution: "@floating-ui/dom@npm:1.6.3"
+  dependencies:
+    "@floating-ui/core": "npm:^1.0.0"
+    "@floating-ui/utils": "npm:^0.2.0"
+  checksum: 83e97076c7a5f55c3506f574bc53f03d38bed6eb8181920c8733076889371e287e9ae6f28c520a076967759b9b6ff425362832a5cdf16a999069530dbb9cce53
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.0":
+  version: 2.0.8
+  resolution: "@floating-ui/react-dom@npm:2.0.8"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.6.1"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: e57b2a498aecf8de0ec28adf434257fca7893bd9bd7e78b63ac98c63b29b9fc086fc175630154352f3610f5c4a0d329823837f4f6c235cc0459fde6417065590
+  languageName: node
+  linkType: hard
+
 "@floating-ui/react-dom@npm:^2.0.3":
   version: 2.0.4
   resolution: "@floating-ui/react-dom@npm:2.0.4"
@@ -3106,6 +3137,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/react@npm:0.26.12":
+  version: 0.26.12
+  resolution: "@floating-ui/react@npm:0.26.12"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.0.0"
+    "@floating-ui/utils": "npm:^0.2.0"
+    tabbable: "npm:^6.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: da77f6b99ed0c8d5169f0ed287304615bef7c66b7a0011e4425e843016f6450a928bc27310a861fb14f8a1e58ef11fbdd92550583440f11af5d1a905968453a6
+  languageName: node
+  linkType: hard
+
 "@floating-ui/react@npm:0.26.4":
   version: 0.26.4
   resolution: "@floating-ui/react@npm:0.26.4"
@@ -3134,6 +3179,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@floating-ui/utils@npm:0.2.1"
+  checksum: 33c9ab346e7b05c5a1e6a95bc902aafcfc2c9d513a147e2491468843bd5607531b06d0b9aa56aa491cbf22a6c2495c18ccfc4c0344baec54a689a7bb8e4898d6
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -20221,6 +20273,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: 980fa73476026e99dcacfc0d6e000d41d42c8e670faf4682496d30c625495e412c4369694f2a15cf1e5252d22de3c396f2b62edbe8d60b5dadc40d09e3f2dde3
+  languageName: node
+  linkType: hard
+
 "tabbable@npm:^6.0.1":
   version: 6.1.1
   resolution: "tabbable@npm:6.1.1"

From ab8232d46b563fdacbbaad239d7d0e84fb115555 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Mon, 22 Apr 2024 15:10:31 +0200
Subject: [PATCH 31/47] check length equal or greater than 0

---
 .../form/Combobox/Combobox.stories.tsx        | 51 +++++++++++++++++++
 .../src/components/form/Combobox/Combobox.tsx |  4 +-
 .../form/Combobox/useComboboxKeyboard.tsx     |  2 +-
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
index f338d6ea41..806744b432 100644
--- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -630,3 +630,54 @@ export const ThousandsOfOptions: StoryFn<typeof Combobox> = (args) => {
 ThousandsOfOptions.args = {
   virtual: true,
 };
+
+export const RemoveAllOptions: StoryFn<typeof Combobox> = (args) => {
+  const [selectedValues, setSelectedValues] = React.useState<string[]>([
+    'test1',
+    'test2',
+  ]);
+  const [values, setValues] = React.useState<string[]>(['test1', 'test2']);
+
+  const handleComboboxChange = (values: string[]) => {
+    setSelectedValues(values);
+  };
+
+  const changeAllValues = (deleteValues: boolean) =>
+    setValues(deleteValues ? [] : ['test1', 'test2']);
+
+  const changeSomeValues = (removeTest2: boolean) =>
+    setValues(removeTest2 ? ['test1'] : ['test1', 'test2']);
+
+  const currentSelectedValues = selectedValues.filter((id) =>
+    values.includes(id),
+  );
+
+  return (
+    <>
+      <Combobox
+        {...args}
+        multiple
+        value={currentSelectedValues}
+        onValueChange={handleComboboxChange}
+      >
+        {values.map((attachment) => {
+          return (
+            <Combobox.Option
+              key={attachment}
+              value={attachment}
+              description={attachment}
+              displayValue={attachment}
+            />
+          );
+        })}
+      </Combobox>
+      <Switch onChange={(event) => changeAllValues(event.target.checked)}>
+        Remove Values (Selected values remain unchanged as the combobox does not
+        update when options are empty.)
+      </Switch>
+      <Switch onChange={(event) => changeSomeValues(event.target.checked)}>
+        Remove test2 (this works)
+      </Switch>
+    </>
+  );
+};
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 4eb7e9f3b2..082bf907ae 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -217,7 +217,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // if value is set, set input value to the label of the value
     useEffect(() => {
-      if (value && value.length > 0 && !multiple) {
+      if (value && value.length >= 0 && !multiple) {
         const option = options[value[0]];
         setInputValue(option?.label || '');
       }
@@ -234,7 +234,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
     }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
 
     useEffect(() => {
-      if (value && Object.keys(options).length > 0) {
+      if (value && Object.keys(options).length >= 0) {
         const updatedSelectedOptions = value.map((option) => {
           const value = options[option];
           return value;
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index cc7aaa1095..8dafe85c86 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -93,7 +93,7 @@ export const useComboboxKeyboard = ({
         if (
           inputValue === '' &&
           multiple &&
-          Object.keys(selectedOptions).length > 0
+          Object.keys(selectedOptions).length >= 0
         ) {
           setSelectedOptions((prev) => {
             const updated = { ...prev };

From 0006fe3820b071bb4b1e948263072af46cf2c604 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 24 Apr 2024 11:04:40 +0200
Subject: [PATCH 32/47] Publish

 - @digdir/designsystemet-css@0.6.1-alpha.0
 - @digdir/designsystemet-react@0.59.1-alpha.0
 - @digdir/design-system-react@0.53.10-alpha.0
---
 packages/css/CHANGELOG.md       | 4 ++++
 packages/css/package.json       | 2 +-
 packages/react-old/CHANGELOG.md | 4 ++++
 packages/react-old/package.json | 2 +-
 packages/react/CHANGELOG.md     | 6 ++++++
 packages/react/package.json     | 2 +-
 6 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
index 28adf7d996..665de5dc23 100644
--- a/packages/css/CHANGELOG.md
+++ b/packages/css/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.1-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-css@0.6.0...@digdir/designsystemet-css@0.6.1-alpha.0) (2024-04-24)
+
+**Note:** Version bump only for package @digdir/designsystemet-css
+
 # [0.6.0](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-css@0.5.0...@digdir/designsystemet-css@0.6.0) (2024-04-23)
 
 ### Bug Fixes
diff --git a/packages/css/package.json b/packages/css/package.json
index 996ee0e496..5e73ec6cc3 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.6.0",
+  "version": "0.6.1-alpha.0",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
diff --git a/packages/react-old/CHANGELOG.md b/packages/react-old/CHANGELOG.md
index 02e3277c8e..927d0d01bc 100644
--- a/packages/react-old/CHANGELOG.md
+++ b/packages/react-old/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.53.10-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.9...@digdir/design-system-react@0.53.10-alpha.0) (2024-04-24)
+
+**Note:** Version bump only for package @digdir/design-system-react
+
 ## [0.53.9](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.8...@digdir/design-system-react@0.53.9) (2024-04-23)
 
 **Note:** Version bump only for package @digdir/design-system-react
diff --git a/packages/react-old/package.json b/packages/react-old/package.json
index 7871628c68..dfd12e34c2 100644
--- a/packages/react-old/package.json
+++ b/packages/react-old/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/design-system-react",
-  "version": "0.53.9",
+  "version": "0.53.10-alpha.0",
   "description": "Legacy React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index bac7f3f500..34231d729e 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.59.1-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-react@0.59.0...@digdir/designsystemet-react@0.59.1-alpha.0) (2024-04-24)
+
+### Bug Fixes
+
+- **Combobox:** Re-renders ([24fa39f](https://github.com/digdir/designsystemet/commit/24fa39f5124c9fc0b01590ad3f1e7960c54e5f35))
+
 # [0.59.0](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-react@0.58.0...@digdir/designsystemet-react@0.59.0) (2024-04-23)
 
 ### Bug Fixes
diff --git a/packages/react/package.json b/packages/react/package.json
index 2f9f39dcb7..22fe9477f1 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "0.59.0",
+  "version": "0.59.1-alpha.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",

From 8e2e8ebf86e3d6dfb495726f5ced9dd58e741080 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 25 Apr 2024 09:04:17 +0200
Subject: [PATCH 33/47] only run children once

---
 .../components/form/Combobox/useCombobox.tsx  | 101 +++++++++---------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index df27f7f737..48c1e5d707 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -51,42 +51,63 @@ export default function useCombobox({
   },
   initialValue,
 }: UseComboboxProps) {
+  const { optionsChildren, customIds } = useMemo(() => {
+    const allChildren = Children.toArray(children);
+    const optionsChildren = allChildren.filter((child) =>
+      isComboboxOption(child),
+    ) as ReactElement<ComboboxOptionProps>[];
+
+    // find all custom components with `interactive=true`
+    const customChildren = allChildren.filter((child) => {
+      return isInteractiveComboboxCustom(child);
+    }) as ReactElement<ComboboxCustomProps>[];
+
+    // return all ids
+    const customIds = customChildren.map((child) => {
+      if (!child.props.id)
+        throw new Error('If ComboboxCustom is interactive, it must have an id');
+
+      return child.props.id;
+    });
+
+    return { optionsChildren, customIds };
+  }, [children]);
+
   const options = useMemo(() => {
     const allOptions: {
       [key: string]: Option;
     } = {};
-    Children.forEach(children, (child) => {
-      if (isComboboxOption(child)) {
-        const props = child.props;
-        let label = props.displayValue || '';
-
-        if (!props.displayValue) {
-          let childrenLabel = '';
-
-          // go over children and find all strings
-          Children.forEach(props.children, (child) => {
-            if (typeof child === 'string') {
-              childrenLabel += child;
-            } else {
-              throw new Error(
-                'If ComboboxOption is not a string, it must have a displayValue prop',
-              );
-            }
-          });
-
-          label = childrenLabel;
-        }
-
-        allOptions[props.value] = {
-          value: props.value,
-          label,
-          displayValue: props.displayValue,
-          description: props.description,
-        };
+    optionsChildren.map((child) => {
+      const props = child.props;
+      let label = props.displayValue || '';
+
+      if (!props.displayValue) {
+        let childrenLabel = '';
+
+        // go over children and find all strings
+        Children.forEach(props.children, (child) => {
+          if (typeof child === 'string') {
+            childrenLabel += child;
+          } else {
+            throw new Error(
+              'If ComboboxOption is not a string, it must have a displayValue prop',
+            );
+          }
+        });
+
+        label = childrenLabel;
       }
+
+      allOptions[props.value] = {
+        value: props.value,
+        label,
+        displayValue: props.displayValue,
+        description: props.description,
+      };
     });
+
     return allOptions;
-  }, [children]);
+  }, [optionsChildren]);
 
   const preSelectedOptions = useMemo(
     () =>
@@ -110,28 +131,6 @@ export default function useCombobox({
     JSON.stringify(selectedOptions),
   );
 
-  const { optionsChildren, customIds } = useMemo(() => {
-    const allChildren = Children.toArray(children);
-    const optionsChildren = allChildren.filter((child) =>
-      isComboboxOption(child),
-    ) as ReactElement<ComboboxOptionProps>[];
-
-    // find all custom components with `interactive=true` and generate random values for them
-    const customChildren = allChildren.filter((child) => {
-      return isInteractiveComboboxCustom(child);
-    }) as ReactElement<ComboboxCustomProps>[];
-
-    // return all ids
-    const customIds = customChildren.map((child) => {
-      if (!child.props.id)
-        throw new Error('If ComboboxCustom is interactive, it must have an id');
-
-      return child.props.id;
-    });
-
-    return { optionsChildren, customIds };
-  }, [children]);
-
   const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
     const filteredOptions: string[] = [];
 

From ca44956f08ab206a0b98c036f5bc433b56d26186 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 25 Apr 2024 09:13:09 +0200
Subject: [PATCH 34/47] reducer for children

---
 .../components/form/Combobox/useCombobox.tsx  | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 48c1e5d707..3c77537c54 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -51,27 +51,39 @@ export default function useCombobox({
   },
   initialValue,
 }: UseComboboxProps) {
-  const { optionsChildren, customIds } = useMemo(() => {
-    const allChildren = Children.toArray(children);
-    const optionsChildren = allChildren.filter((child) =>
-      isComboboxOption(child),
-    ) as ReactElement<ComboboxOptionProps>[];
-
-    // find all custom components with `interactive=true`
-    const customChildren = allChildren.filter((child) => {
-      return isInteractiveComboboxCustom(child);
-    }) as ReactElement<ComboboxCustomProps>[];
-
-    // return all ids
-    const customIds = customChildren.map((child) => {
-      if (!child.props.id)
-        throw new Error('If ComboboxCustom is interactive, it must have an id');
-
-      return child.props.id;
-    });
-
-    return { optionsChildren, customIds };
-  }, [children]);
+  const { optionsChildren, customIds, restChildren, interactiveChildren } =
+    useMemo(() => {
+      const allChildren = Children.toArray(children);
+
+      const result = allChildren.reduce(
+        (acc, child) => {
+          if (isComboboxOption(child)) {
+            acc.optionsChildren.push(child);
+          } else {
+            acc.restChildren.push(child);
+            if (isInteractiveComboboxCustom(child)) {
+              const childElement = child;
+              acc.interactiveChildren.push(childElement);
+              if (!childElement.props.id) {
+                throw new Error(
+                  'If ComboboxCustom is interactive, it must have an id',
+                );
+              }
+              acc.customIds.push(childElement.props.id);
+            }
+          }
+          return acc;
+        },
+        {
+          optionsChildren: [] as ReactElement<ComboboxOptionProps>[],
+          customIds: [] as string[],
+          restChildren: [] as React.ReactNode[],
+          interactiveChildren: [] as ReactElement<ComboboxCustomProps>[],
+        },
+      );
+
+      return result;
+    }, [children]);
 
   const options = useMemo(() => {
     const allOptions: {
@@ -158,22 +170,10 @@ export default function useCombobox({
       return value;
     });
 
+    // interactive custom components are first in the index map
     return [...customIds, ...options];
   }, [customIds, optionsChildren]);
 
-  const { restChildren, interactiveChildren } = useMemo(() => {
-    const restChildren = Children.toArray(children).filter((child) => {
-      return !isComboboxOption(child);
-    });
-
-    const interactiveChildren: ReactElement<ComboboxCustomProps>[] =
-      restChildren.filter((child) => {
-        return isInteractiveComboboxCustom(child);
-      }) as ReactElement<ComboboxCustomProps>[];
-
-    return { restChildren, interactiveChildren };
-  }, [children]);
-
   return {
     filteredOptionsChildren,
     filteredOptions,

From b3defbe39bc8b4cd9fd46b5f5f0cdb8716e2229d Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 25 Apr 2024 09:28:58 +0200
Subject: [PATCH 35/47] early returns

---
 .../form/Combobox/useComboboxKeyboard.tsx     | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index 8dafe85c86..7cc45df1cf 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -44,18 +44,16 @@ export const useComboboxKeyboard = ({
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
-        if (!open) {
-          setOpen(true);
-        }
+        if (open) break;
 
+        setOpen(true);
         break;
       case 'ArrowUp':
         event.preventDefault();
         /* If we are on the first item, close */
-        if (activeIndex === 0) {
-          setOpen(false);
-        }
+        if (activeIndex !== 0) break;
 
+        setOpen(false);
         break;
       case 'Enter':
         event.preventDefault();
@@ -90,11 +88,13 @@ export const useComboboxKeyboard = ({
         break;
 
       case 'Backspace':
-        if (
-          inputValue === '' &&
-          multiple &&
-          Object.keys(selectedOptions).length >= 0
-        ) {
+        // if we are in single mode, we need to set selectedOptions to empty
+        if (!multiple) {
+          setSelectedOptions({});
+          break;
+        }
+
+        if (inputValue === '' && multiple) {
           setSelectedOptions((prev) => {
             const updated = { ...prev };
             const keys = Object.keys(updated);
@@ -102,10 +102,6 @@ export const useComboboxKeyboard = ({
             return updated;
           });
         }
-        // if we are in single mode, we need to set activeValue to null
-        if (!multiple) {
-          setSelectedOptions({});
-        }
         break;
 
       default:

From 40b8216a5d13939320ef50a43da010a16d8542b8 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 25 Apr 2024 09:33:06 +0200
Subject: [PATCH 36/47] fix single input reset

---
 .../src/components/form/Combobox/Combobox.stories.tsx  | 10 +---------
 .../react/src/components/form/Combobox/Combobox.tsx    |  4 +---
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
index 806744b432..3663f00924 100644
--- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -604,16 +604,8 @@ const items = Array.from({ length: 2000 }, (_, index) => ({
 }));
 
 export const ThousandsOfOptions: StoryFn<typeof Combobox> = (args) => {
-  const [value, setValue] = React.useState<string[]>([]);
-
   return (
-    <Combobox
-      {...args}
-      value={value}
-      onValueChange={(value) => {
-        setValue(value);
-      }}
-    >
+    <Combobox {...args}>
       <Combobox.Empty>Fant ingen treff</Combobox.Empty>
       {items.map((item, index) => (
         <Combobox.Option
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 082bf907ae..5631968621 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -167,8 +167,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     const [inputValue, setInputValue] = useState<string>(rest.inputValue || '');
 
-    /* const idDispatch = useComboboxIdDispatch(); */
-
     const {
       selectedOptions,
       options,
@@ -217,7 +215,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
     // if value is set, set input value to the label of the value
     useEffect(() => {
-      if (value && value.length >= 0 && !multiple) {
+      if (value && value.length > 0 && !multiple) {
         const option = options[value[0]];
         setInputValue(option?.label || '');
       }

From cff4b8b9f4eda45c868ab0700922fa148ef76f34 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 25 Apr 2024 11:59:47 +0200
Subject: [PATCH 37/47] types

---
 .../src/components/form/Combobox/useCombobox.tsx  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 3c77537c54..422dea2ba3 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -55,7 +55,12 @@ export default function useCombobox({
     useMemo(() => {
       const allChildren = Children.toArray(children);
 
-      const result = allChildren.reduce(
+      const result = allChildren.reduce<{
+        optionsChildren: ReactElement<ComboboxOptionProps>[];
+        customIds: string[];
+        restChildren: React.ReactNode[];
+        interactiveChildren: ReactElement<ComboboxCustomProps>[];
+      }>(
         (acc, child) => {
           if (isComboboxOption(child)) {
             acc.optionsChildren.push(child);
@@ -75,10 +80,10 @@ export default function useCombobox({
           return acc;
         },
         {
-          optionsChildren: [] as ReactElement<ComboboxOptionProps>[],
-          customIds: [] as string[],
-          restChildren: [] as React.ReactNode[],
-          interactiveChildren: [] as ReactElement<ComboboxCustomProps>[],
+          optionsChildren: [],
+          customIds: [],
+          restChildren: [],
+          interactiveChildren: [],
         },
       );
 

From 3bbb62d1435fe1be576ce56e4649a3b7c4afea48 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 25 Apr 2024 14:29:50 +0200
Subject: [PATCH 38/47] remove old prop

---
 packages/react/src/components/form/Combobox/Combobox.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index 5631968621..dbd02de623 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -66,12 +66,6 @@ export type ComboboxProps = {
    * @default false
    */
   hideChips?: boolean;
-  /**
-   * Label for the clear button
-   * @default 'Fjern alt'
-   * @deprecated Use `clearButtonLabel` instead
-   */
-  cleanButtonLabel?: string;
   /**
    * Hides the clear button
    * @default false
@@ -138,7 +132,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       disabled = false,
       readOnly = false,
       hideChips = false,
-      cleanButtonLabel = 'Fjern alt',
       clearButtonLabel = 'Fjern alt',
       hideClearButton = false,
       error,
@@ -335,7 +328,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           htmlSize,
           optionValues,
           hideChips,
-          clearButtonLabel: cleanButtonLabel || clearButtonLabel,
+          clearButtonLabel,
           hideClearButton,
           listId,
           customIds,

From 226fc5ee7101d5efb049f881ddfe3617e4796ceb Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Fri, 26 Apr 2024 09:00:10 +0200
Subject: [PATCH 39/47] Remove focus state from `ComboboxInput`

---
 .../form/Combobox/Combobox.module.css         |  2 +-
 .../src/components/form/Combobox/Combobox.tsx |  1 -
 .../form/Combobox/internal/ComboboxInput.tsx  | 24 +------------------
 3 files changed, 2 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.module.css b/packages/react/src/components/form/Combobox/Combobox.module.css
index 1a914fb5cc..4ab66af204 100644
--- a/packages/react/src/components/form/Combobox/Combobox.module.css
+++ b/packages/react/src/components/form/Combobox/Combobox.module.css
@@ -188,7 +188,7 @@
   /**
    * Apply a focus outline on an element when it is focused with keyboard
    */
-  .inFocus {
+  .inputWrapper:has(input:focus) {
     --fds-focus-border-width: 3px;
 
     outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index dbd02de623..a5051f4b8b 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -255,7 +255,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       }
 
       if (multiple) {
-        /* setSelectedOptions([...selectedOptions, option]); */
         setSelectedOptions((prev) => {
           const updated = { ...prev };
           updated[option.value] = option;
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index 1f09536604..11bd224ad9 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -1,5 +1,5 @@
 import type { ChangeEvent } from 'react';
-import { useContext, useEffect, useState } from 'react';
+import { useContext } from 'react';
 import cl from 'clsx';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '@floating-ui/react';
@@ -55,27 +55,6 @@ export const ComboboxInput = ({
 
   const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
 
-  // we need to check if input is in focus, to add focus styles to the wrapper
-  const [inputInFocus, setInputInFocus] = useState(false);
-
-  useEffect(() => {
-    const input = inputRef.current;
-    const onFocus = () => {
-      setInputInFocus(true);
-    };
-    const onBlur = () => {
-      setInputInFocus(false);
-    };
-
-    input?.addEventListener('focus', onFocus);
-    input?.addEventListener('blur', onBlur);
-
-    return () => {
-      input?.removeEventListener('focus', onFocus);
-      input?.removeEventListener('blur', onBlur);
-    };
-  }, [inputRef]);
-
   // onChange function for the input
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -146,7 +125,6 @@ export const ComboboxInput = ({
         textFieldClasses.input,
         classes.inputWrapper,
         classes[size],
-        inputInFocus && classes.inFocus,
         readOnly && classes.readonly,
         error && classes.error,
       )}

From c60908d34bc34f9ee44e3b0fc08907eeec95fd33 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Fri, 26 Apr 2024 09:08:51 +0200
Subject: [PATCH 40/47] remove duplicate code

---
 .../form/Combobox/internal/ComboboxInput.tsx  | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index 11bd224ad9..082826e85c 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -61,30 +61,12 @@ export const ComboboxInput = ({
     setInputValue(value);
     setActiveIndex(0);
 
-    if (typeof value === 'string') {
-      setOpen(true);
-    } else {
-      setOpen(false);
-    }
-
     // check if input value is the same as a label, if so, select it
-    const option = options[value];
+    const option = options[value.toLowerCase()];
     if (!option) return;
     if (selectedOptions[option.value]) return;
 
     handleSelectOption(option);
-
-    if (multiple) {
-      inputRef.current?.focus();
-    } else {
-      // move cursor to the end of the input
-      setTimeout(() => {
-        inputRef.current?.setSelectionRange(
-          option?.label?.length || 0,
-          option?.label?.length || 0,
-        );
-      }, 0);
-    }
   };
 
   const showClearButton =
@@ -106,9 +88,7 @@ export const ComboboxInput = ({
       inputRef.current?.focus();
     },
     /* Handles list navigation */
-    onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
-      handleKeyDown(event);
-    },
+    onKeyDown: handleKeyDown,
     // preventDefault on keydown to avoid sending in form
     onKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
       if (event.key === 'Enter') {

From 43ead3776465c7d36a3d1ddb3decc0af4c2973ee Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Fri, 26 Apr 2024 09:58:36 +0200
Subject: [PATCH 41/47] rework handle value changing

---
 .../form/Combobox/Combobox.test.tsx           | 15 ++--
 .../src/components/form/Combobox/Combobox.tsx | 71 +++++++++++--------
 .../form/Combobox/ComboboxContext.tsx         |  8 ++-
 .../form/Combobox/internal/ComboboxChips.tsx  | 20 ++----
 .../Combobox/internal/ComboboxClearButton.tsx | 18 ++---
 .../form/Combobox/internal/ComboboxInput.tsx  |  2 +-
 .../components/form/Combobox/useCombobox.tsx  |  6 --
 .../form/Combobox/useComboboxKeyboard.tsx     | 36 +++++-----
 8 files changed, 85 insertions(+), 91 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.test.tsx b/packages/react/src/components/form/Combobox/Combobox.test.tsx
index 47a29fd520..282af156f9 100644
--- a/packages/react/src/components/form/Combobox/Combobox.test.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.test.tsx
@@ -181,8 +181,12 @@ describe('Combobox', () => {
     await wait(100);
     await userEvent.click(screen.getByText('Leikanger'));
     await wait(500);
+    expect(onValueChange).toHaveBeenCalledWith(['leikanger']);
+    await wait(500);
     await userEvent.click(screen.getByText('Oslo'));
     await wait(500);
+    expect(onValueChange).toHaveBeenCalledWith(['leikanger', 'oslo']);
+    await wait(500);
     await user.click(document.body);
     await wait(500);
     expect(screen.getByText('Leikanger')).toBeInTheDocument();
@@ -197,12 +201,13 @@ describe('Combobox', () => {
       throw new Error('Could not find clear button');
     }
     await userEvent.click(clearButton);
+    await userEvent.click(document.body);
 
-    setTimeout(() => {
-      expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
-      expect(screen.queryByText('Oslo')).not.toBeInTheDocument();
-      expect(onValueChange).toHaveBeenCalledWith([]);
-    }, 1000);
+    await wait(500);
+
+    expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
+    expect(screen.queryByText('Oslo')).not.toBeInTheDocument();
+    expect(onValueChange).toHaveBeenCalledWith([]);
   });
 
   it('should show "Fant ingen treff", when input does not match any values', async () => {
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index a5051f4b8b..f46fd6e8d6 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -169,9 +169,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       customIds,
       filteredOptionsChildren,
       filteredOptions,
-      prevSelectedHash,
       setSelectedOptions,
-      setPrevSelectedHash,
     } = useCombobox({
       children,
       inputValue,
@@ -214,16 +212,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       }
     }, [multiple, value, options]);
 
-    // Send new value if option was clicked
-    useEffect(() => {
-      const selectedHash = JSON.stringify(selectedOptions);
-      if (prevSelectedHash === selectedHash) return;
-
-      const values = Object.keys(selectedOptions);
-      onValueChange?.(values);
-      setPrevSelectedHash(selectedHash);
-    }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
-
     useEffect(() => {
       if (value && Object.keys(options).length >= 0) {
         const updatedSelectedOptions = value.map((option) => {
@@ -240,32 +228,51 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           }, {}),
         );
       }
-    }, [multiple, prevSelectedHash, value, options, setSelectedOptions]);
+    }, [multiple, value, options, setSelectedOptions]);
 
     // handle click on option, either select or deselect - Handles single or multiple
-    const handleSelectOption = (option: Option) => {
-      // if option is already selected, remove it
-      if (value && value.includes(option.value)) {
-        setSelectedOptions((prev) => {
-          const updated = { ...prev };
-          delete updated[option.value];
-          return updated;
-        });
+    const handleSelectOption = (args: {
+      option: Option | null;
+      remove?: boolean;
+      clear?: boolean;
+    }) => {
+      const { option, clear, remove } = args;
+      if (clear) {
+        setSelectedOptions({});
+        setInputValue('');
+        console.log('calling new value with: ', []);
+        onValueChange?.([]);
         return;
       }
 
+      console.log('I am here');
+
+      if (!option) return;
+
+      if (remove) {
+        const newSelectedOptions = { ...selectedOptions };
+        delete newSelectedOptions[option.value];
+        setSelectedOptions(newSelectedOptions);
+        console.log(
+          'calling new value with: ',
+          Object.keys(newSelectedOptions),
+        );
+        onValueChange?.(Object.keys(newSelectedOptions));
+        return;
+      }
+
+      const newSelectedOptions = { ...selectedOptions };
+
       if (multiple) {
-        setSelectedOptions((prev) => {
-          const updated = { ...prev };
-          updated[option.value] = option;
-          return updated;
-        });
+        if (newSelectedOptions[option.value]) {
+          delete newSelectedOptions[option.value];
+        } else {
+          newSelectedOptions[option.value] = option;
+        }
         setInputValue('');
         inputRef.current?.focus();
       } else {
-        setSelectedOptions({
-          [option.value]: option,
-        });
+        newSelectedOptions[option.value] = option;
         setInputValue(option?.label || '');
         // move cursor to the end of the input
         setTimeout(() => {
@@ -276,6 +283,10 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
         }, 0);
       }
 
+      setSelectedOptions(newSelectedOptions);
+      console.log('calling new value with: ', Object.keys(newSelectedOptions));
+      onValueChange?.(Object.keys(newSelectedOptions));
+
       !multiple && setOpen(false);
       refs.domReference.current?.focus();
     };
@@ -343,7 +354,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
             if (readOnly) return;
             if (disabled) return;
             const option = options[value];
-            debouncedHandleSelectOption(option);
+            debouncedHandleSelectOption({ option: option });
           },
           handleSelectOption: debouncedHandleSelectOption,
           chipSrLabel,
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index 5fdcc6b8d4..99280f7dee 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -11,7 +11,7 @@ import type { ComboboxProps } from './Combobox';
 import type { Option } from './useCombobox';
 import type useCombobox from './useCombobox';
 
-type ComboboxContextType = {
+export type ComboboxContextType = {
   multiple: NonNullable<ComboboxProps['multiple']>;
   disabled: NonNullable<ComboboxProps['disabled']>;
   readOnly: NonNullable<ComboboxProps['readOnly']>;
@@ -51,7 +51,11 @@ type ComboboxContextType = {
     }>
   >;
   chipSrLabel: NonNullable<ComboboxProps['chipSrLabel']>;
-  handleSelectOption: (option: Option) => void;
+  handleSelectOption: (args: {
+    option: Option | null;
+    remove?: boolean;
+    clear?: boolean;
+  }) => void;
   listRef: UseListNavigationProps['listRef'];
   forwareddRef: React.Ref<HTMLInputElement>;
 };
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
index eb8424558b..ad78056f8f 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx
@@ -15,8 +15,8 @@ export const ComboboxChips = () => {
     readOnly,
     disabled,
     selectedOptions,
-    setSelectedOptions,
     chipSrLabel,
+    handleSelectOption,
     inputRef,
   } = context;
 
@@ -33,10 +33,9 @@ export const ComboboxChips = () => {
               if (disabled) return;
               if (e.key === 'Enter') {
                 e.stopPropagation();
-                setSelectedOptions((prev) => {
-                  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                  const { [value]: _, ...rest } = prev;
-                  return rest;
+                handleSelectOption({
+                  option: selectedOptions[value],
+                  remove: true,
                 });
                 inputRef.current?.focus();
               }
@@ -45,16 +44,11 @@ export const ComboboxChips = () => {
               if (readOnly) return;
               if (disabled) return;
               /* If we click a chip, filter the active values and remove the one we clicked */
-              setSelectedOptions((prev) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { [value]: _, ...rest } = prev;
-                return rest;
+              handleSelectOption({
+                option: selectedOptions[value],
+                remove: true,
               });
             }}
-            style={{
-              /* We already set the opacity on Combobox */
-              opacity: 1,
-            }}
             aria-label={chipSrLabel(selectedOptions[value])}
           >
             {selectedOptions[value].label}
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
index 22c14507e0..ecade07782 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
@@ -12,15 +12,8 @@ export const ComboboxClearButton = () => {
     throw new Error('ComboboxContext is missing');
   }
 
-  const {
-    size,
-    readOnly,
-    disabled,
-    clearButtonLabel,
-    inputRef,
-    setSelectedOptions,
-    setInputValue,
-  } = context;
+  const { size, readOnly, disabled, clearButtonLabel, handleSelectOption } =
+    context;
 
   return (
     <button
@@ -29,17 +22,14 @@ export const ComboboxClearButton = () => {
       onClick={() => {
         if (readOnly) return;
         if (disabled) return;
-        setSelectedOptions({});
-        setInputValue('');
+        handleSelectOption({ option: null, clear: true });
       }}
       onKeyDown={(e) => {
         if (readOnly) return;
         if (disabled) return;
         if (e.key === 'Enter') {
           e.stopPropagation();
-          setSelectedOptions({});
-          setInputValue('');
-          inputRef.current?.focus();
+          handleSelectOption({ option: null, clear: true });
         }
       }}
       type='button'
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index 082826e85c..f3fb32cebf 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -66,7 +66,7 @@ export const ComboboxInput = ({
     if (!option) return;
     if (selectedOptions[option.value]) return;
 
-    handleSelectOption(option);
+    handleSelectOption({ option: option });
   };
 
   const showClearButton =
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 422dea2ba3..2072214487 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -144,10 +144,6 @@ export default function useCombobox({
     [key: string]: Option;
   }>(preSelectedOptions);
 
-  const [prevSelectedHash, setPrevSelectedHash] = useState(
-    JSON.stringify(selectedOptions),
-  );
-
   const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
     const filteredOptions: string[] = [];
 
@@ -187,9 +183,7 @@ export default function useCombobox({
     options,
     customIds,
     selectedOptions,
-    prevSelectedHash,
     interactiveChildren,
     setSelectedOptions,
-    setPrevSelectedHash,
   };
 }
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index 7cc45df1cf..c9d1c77888 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -1,8 +1,8 @@
 import useDebounce from '../../../utilities/useDebounce';
 
 import type useCombobox from './useCombobox';
-import type { Option } from './useCombobox';
 import { useComboboxId } from './ComboboxIdContext';
+import type { ComboboxContextType } from './ComboboxContext';
 
 type UseComboboxKeyboardProps = {
   filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];
@@ -17,7 +17,7 @@ type UseComboboxKeyboardProps = {
   setOpen: (value: boolean) => void;
   setSelectedOptions: ReturnType<typeof useCombobox>['setSelectedOptions'];
   setInputValue: (value: string) => void;
-  handleSelectOption: (option: Option) => void;
+  handleSelectOption: ComboboxContextType['handleSelectOption'];
 };
 
 export const useComboboxKeyboard = ({
@@ -31,8 +31,6 @@ export const useComboboxKeyboard = ({
   open,
   options,
   setOpen,
-  setInputValue,
-  setSelectedOptions,
   handleSelectOption,
 }: UseComboboxKeyboardProps) => {
   const { activeIndex } = useComboboxId();
@@ -75,32 +73,30 @@ export const useComboboxKeyboard = ({
 
         // eslint-disable-next-line no-case-declarations
         const option = filteredOptions[valueIndex];
-        if (!multiple) {
-          // check if option is already selected, if so, deselect it
-          if (selectedOptions[option]) {
-            setSelectedOptions({});
-            setInputValue('');
-            return;
-          }
-        }
 
-        handleSelectOption(options[option]);
+        handleSelectOption({ option: options[option] });
         break;
 
       case 'Backspace':
         // if we are in single mode, we need to set selectedOptions to empty
         if (!multiple) {
-          setSelectedOptions({});
+          const lastOption = Object.keys(selectedOptions).pop();
+          lastOption &&
+            handleSelectOption({
+              option: selectedOptions[lastOption],
+              remove: true,
+            });
           break;
         }
 
         if (inputValue === '' && multiple) {
-          setSelectedOptions((prev) => {
-            const updated = { ...prev };
-            const keys = Object.keys(updated);
-            delete updated[keys[keys.length - 1]];
-            return updated;
-          });
+          const lastOption = Object.keys(selectedOptions).pop();
+          /* Remove last option, and use handleSelectOption */
+          lastOption &&
+            handleSelectOption({
+              option: selectedOptions[lastOption],
+              remove: true,
+            });
         }
         break;
 

From a8d7c59337147a3bfec1db64838dafada1321f77 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Fri, 26 Apr 2024 11:41:56 +0200
Subject: [PATCH 42/47] move props, and remove unused

---
 .../src/components/form/Combobox/Combobox.tsx | 14 +++++--------
 .../form/Combobox/ComboboxContext.tsx         | 11 ----------
 .../form/Combobox/internal/ComboboxInput.tsx  | 21 +++++++++++++------
 .../components/form/Combobox/useCombobox.tsx  | 12 -----------
 .../form/Combobox/useComboboxKeyboard.tsx     |  1 -
 5 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index f46fd6e8d6..dcd44c212a 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -165,7 +165,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       options,
       restChildren,
       interactiveChildren,
-      optionValues,
       customIds,
       filteredOptionsChildren,
       filteredOptions,
@@ -305,7 +304,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       interactiveChildren,
       setOpen,
       setInputValue,
-      setSelectedOptions,
       handleSelectOption: debouncedHandleSelectOption,
     });
 
@@ -332,23 +330,16 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           inputRef,
           refs,
           inputValue,
-          error,
           formFieldProps,
           name,
           htmlSize,
-          optionValues,
-          hideChips,
           clearButtonLabel,
-          hideClearButton,
-          listId,
           customIds,
           filteredOptions,
           setInputValue,
-          handleKeyDown,
           setOpen,
           getReferenceProps,
           getItemProps,
-          setSelectedOptions,
           /* Recieves the value of the option, and searches for it in our values lookup */
           onOptionClick: (value: string) => {
             if (readOnly) return;
@@ -390,6 +381,11 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           />
           <ComboboxInput
             {...omit(['inputValue'], rest)}
+            hideClearButton={hideClearButton}
+            listId={listId}
+            error={error}
+            hideChips={hideChips}
+            handleKeyDown={handleKeyDown}
             aria-busy={loading}
           />
           <ComboboxError
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index 99280f7dee..45e4f24902 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -16,11 +16,8 @@ export type ComboboxContextType = {
   disabled: NonNullable<ComboboxProps['disabled']>;
   readOnly: NonNullable<ComboboxProps['readOnly']>;
   name: ComboboxProps['name'];
-  error: ComboboxProps['error'];
   htmlSize: ComboboxProps['htmlSize'];
-  hideChips: NonNullable<ComboboxProps['hideChips']>;
   clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
-  hideClearButton: NonNullable<ComboboxProps['hideClearButton']>;
   filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];
   options: {
     [key: string]: Option;
@@ -34,22 +31,14 @@ export type ComboboxContextType = {
   inputRef: React.RefObject<HTMLInputElement>;
   open: boolean;
   inputValue: string;
-  optionValues: string[];
-  listId: string;
   customIds: string[];
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   setOpen: (open: boolean) => void;
-  handleKeyDown: (event: React.KeyboardEvent) => void;
   getReferenceProps: (
     props?: Record<string, unknown>,
   ) => Record<string, unknown>;
   getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
   onOptionClick: (value: string) => void;
-  setSelectedOptions: React.Dispatch<
-    React.SetStateAction<{
-      [key: string]: Option;
-    }>
-  >;
   chipSrLabel: NonNullable<ComboboxProps['chipSrLabel']>;
   handleSelectOption: (args: {
     option: Option | null;
diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index f3fb32cebf..b9a680e6d1 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -10,13 +10,27 @@ import { Box } from '../../../Box';
 import textFieldClasses from '../../Textfield/Textfield.module.css';
 import { omit } from '../../../../utilities';
 import { useComboboxIdDispatch } from '../ComboboxIdContext';
+import type { ComboboxProps } from '../Combobox';
 
 import ComboboxChips from './ComboboxChips';
 import ComboboxClearButton from './ComboboxClearButton';
 
+type ComboboxInputProps = {
+  hideClearButton: ComboboxProps['hideClearButton'];
+  listId: string;
+  error: ComboboxProps['error'];
+  hideChips: NonNullable<ComboboxProps['hideChips']>;
+  handleKeyDown: (event: React.KeyboardEvent) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
 export const ComboboxInput = ({
+  hideClearButton,
+  listId,
+  error,
+  hideChips,
+  handleKeyDown,
   ...rest
-}: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>) => {
+}: ComboboxInputProps) => {
   const context = useContext(ComboboxContext);
   const idDispatch = useComboboxIdDispatch();
 
@@ -30,7 +44,6 @@ export const ComboboxInput = ({
 
   const {
     forwareddRef,
-    listId,
     size,
     readOnly,
     disabled,
@@ -38,16 +51,12 @@ export const ComboboxInput = ({
     inputRef,
     refs,
     inputValue,
-    error,
     multiple,
     selectedOptions,
     formFieldProps,
     htmlSize,
     options,
-    hideChips,
-    hideClearButton,
     setOpen,
-    handleKeyDown,
     getReferenceProps,
     setInputValue,
     handleSelectOption,
diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx
index 2072214487..e974312489 100644
--- a/packages/react/src/components/form/Combobox/useCombobox.tsx
+++ b/packages/react/src/components/form/Combobox/useCombobox.tsx
@@ -164,21 +164,9 @@ export default function useCombobox({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
 
-  const optionValues = useMemo(() => {
-    // create an index map of values from optionsChildren
-    const options = optionsChildren.map((child) => {
-      const { value } = child.props;
-      return value;
-    });
-
-    // interactive custom components are first in the index map
-    return [...customIds, ...options];
-  }, [customIds, optionsChildren]);
-
   return {
     filteredOptionsChildren,
     filteredOptions,
-    optionValues,
     restChildren,
     options,
     customIds,
diff --git a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
index c9d1c77888..e10bc3a663 100644
--- a/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
+++ b/packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx
@@ -15,7 +15,6 @@ type UseComboboxKeyboardProps = {
   multiple: boolean;
   open: boolean;
   setOpen: (value: boolean) => void;
-  setSelectedOptions: ReturnType<typeof useCombobox>['setSelectedOptions'];
   setInputValue: (value: string) => void;
   handleSelectOption: ComboboxContextType['handleSelectOption'];
 };

From a3debdac62b7d3cb83270eff05a1598b5690dc93 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Fri, 26 Apr 2024 13:57:46 +0200
Subject: [PATCH 43/47] some more work on props

---
 packages/react/src/components/form/Combobox/Combobox.tsx        | 1 -
 packages/react/src/components/form/Combobox/ComboboxContext.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index dcd44c212a..ea769769cb 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -331,7 +331,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           refs,
           inputValue,
           formFieldProps,
-          name,
           htmlSize,
           clearButtonLabel,
           customIds,
diff --git a/packages/react/src/components/form/Combobox/ComboboxContext.tsx b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
index 45e4f24902..3a3dbc5d87 100644
--- a/packages/react/src/components/form/Combobox/ComboboxContext.tsx
+++ b/packages/react/src/components/form/Combobox/ComboboxContext.tsx
@@ -15,7 +15,6 @@ export type ComboboxContextType = {
   multiple: NonNullable<ComboboxProps['multiple']>;
   disabled: NonNullable<ComboboxProps['disabled']>;
   readOnly: NonNullable<ComboboxProps['readOnly']>;
-  name: ComboboxProps['name'];
   htmlSize: ComboboxProps['htmlSize'];
   clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
   filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];

From 00619b1cc6c33cf35ef8e0eeb6e3d4e7903e4a3c Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Fri, 26 Apr 2024 13:59:06 +0200
Subject: [PATCH 44/47] remove console logs

---
 packages/react/src/components/form/Combobox/Combobox.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index ea769769cb..5397af840e 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -239,23 +239,16 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       if (clear) {
         setSelectedOptions({});
         setInputValue('');
-        console.log('calling new value with: ', []);
         onValueChange?.([]);
         return;
       }
 
-      console.log('I am here');
-
       if (!option) return;
 
       if (remove) {
         const newSelectedOptions = { ...selectedOptions };
         delete newSelectedOptions[option.value];
         setSelectedOptions(newSelectedOptions);
-        console.log(
-          'calling new value with: ',
-          Object.keys(newSelectedOptions),
-        );
         onValueChange?.(Object.keys(newSelectedOptions));
         return;
       }

From 7dd6017948040e0f5c5579bf55a2ec784fbbf3c7 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Fri, 26 Apr 2024 14:10:17 +0200
Subject: [PATCH 45/47] built css

---
 packages/css/react-css-modules.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
index 7961d0fb92..bde682dcbf 100644
--- a/packages/css/react-css-modules.css
+++ b/packages/css/react-css-modules.css
@@ -2905,7 +2905,7 @@
   /**
    * Apply a focus outline on an element when it is focused with keyboard
    */
-  .fds-combobox-inFocus-249a725c {
+  .fds-combobox-inputWrapper-249a725c:has(input:focus) {
     --fds-focus-border-width: 3px;
 
     outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);

From 7e9e9ba1eed73f95f9edb4cc4226167a551e92aa Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Fri, 26 Apr 2024 14:10:37 +0200
Subject: [PATCH 46/47] Publish

 - @digdir/designsystemet-css@0.6.1-alpha.1
 - @digdir/designsystemet-react@0.59.1-alpha.1
 - @digdir/design-system-react@0.53.10-alpha.1
---
 packages/css/CHANGELOG.md       | 6 ++++++
 packages/css/package.json       | 2 +-
 packages/react-old/CHANGELOG.md | 4 ++++
 packages/react-old/package.json | 2 +-
 packages/react/CHANGELOG.md     | 6 ++++++
 packages/react/package.json     | 2 +-
 6 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
index 665de5dc23..b49c9f9f6d 100644
--- a/packages/css/CHANGELOG.md
+++ b/packages/css/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.1-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-css@0.6.1-alpha.0...@digdir/designsystemet-css@0.6.1-alpha.1) (2024-04-26)
+
+### Bug Fixes
+
+- **Modal:** fix close button position ([#1877](https://github.com/digdir/designsystemet/issues/1877)) ([c866710](https://github.com/digdir/designsystemet/commit/c866710cc00760a8f1a4f1676e2c8a5eda235a72))
+
 ## [0.6.1-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-css@0.6.0...@digdir/designsystemet-css@0.6.1-alpha.0) (2024-04-24)
 
 **Note:** Version bump only for package @digdir/designsystemet-css
diff --git a/packages/css/package.json b/packages/css/package.json
index 5e73ec6cc3..24b2ca2d4e 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.6.1-alpha.0",
+  "version": "0.6.1-alpha.1",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
diff --git a/packages/react-old/CHANGELOG.md b/packages/react-old/CHANGELOG.md
index 927d0d01bc..c9231cebd5 100644
--- a/packages/react-old/CHANGELOG.md
+++ b/packages/react-old/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.53.10-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.10-alpha.0...@digdir/design-system-react@0.53.10-alpha.1) (2024-04-26)
+
+**Note:** Version bump only for package @digdir/design-system-react
+
 ## [0.53.10-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.9...@digdir/design-system-react@0.53.10-alpha.0) (2024-04-24)
 
 **Note:** Version bump only for package @digdir/design-system-react
diff --git a/packages/react-old/package.json b/packages/react-old/package.json
index dfd12e34c2..b75851e15c 100644
--- a/packages/react-old/package.json
+++ b/packages/react-old/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/design-system-react",
-  "version": "0.53.10-alpha.0",
+  "version": "0.53.10-alpha.1",
   "description": "Legacy React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 34231d729e..f6ea06d82a 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.59.1-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-react@0.59.1-alpha.0...@digdir/designsystemet-react@0.59.1-alpha.1) (2024-04-26)
+
+### Bug Fixes
+
+- **Modal:** fix close button position ([#1877](https://github.com/digdir/designsystemet/issues/1877)) ([c866710](https://github.com/digdir/designsystemet/commit/c866710cc00760a8f1a4f1676e2c8a5eda235a72))
+
 ## [0.59.1-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/designsystemet-react@0.59.0...@digdir/designsystemet-react@0.59.1-alpha.0) (2024-04-24)
 
 ### Bug Fixes
diff --git a/packages/react/package.json b/packages/react/package.json
index 22fe9477f1..d7c0c7462d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "0.59.1-alpha.0",
+  "version": "0.59.1-alpha.1",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",

From 1031476576d97c7a68529770d0914cc147f66c8c Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 7 May 2024 15:11:36 +0200
Subject: [PATCH 47/47] fix closed when typing

---
 .../src/components/form/Combobox/internal/ComboboxInput.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
index 864eb0b03a..f44e8b0b8a 100644
--- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -135,6 +135,7 @@ export const ComboboxInput = ({
           {...formFieldProps.inputProps}
           onChange={(e) => {
             onChange(e);
+            !open && setOpen(true);
             rest.onChange && rest.onChange(e);
           }}
         />