From e7cb3753a01c73a5cf9d25094c609711e6ed2f74 Mon Sep 17 00:00:00 2001
From: Lars Eirik Korsgaard Hansen
 <71271458+larseirikhansen@users.noreply.github.com>
Date: Thu, 17 Aug 2023 11:38:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Combobox=20,=20SingleSele?=
 =?UTF-8?q?ct:=20allow=20custom=20options=20(#2180)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
---
 .changeset/poor-buckets-collect.md            |  5 +++++
 @navikt/core/css/form/combobox.css            |  5 +++++
 .../selectedOptionsContext.tsx                | 19 ++++++++++++++++---
 .../form/combobox/customOptionsContext.tsx    | 12 ++++++++++--
 4 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/poor-buckets-collect.md

diff --git a/.changeset/poor-buckets-collect.md b/.changeset/poor-buckets-collect.md
new file mode 100644
index 0000000000..d84a01892f
--- /dev/null
+++ b/.changeset/poor-buckets-collect.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: Combobox, SingleSelect: fix adding custom options
diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
index 70fcf4cfd9..1c13798402 100644
--- a/@navikt/core/css/form/combobox.css
+++ b/@navikt/core/css/form/combobox.css
@@ -253,6 +253,11 @@
   padding-left: calc(var(--a-spacing-3) - 4px);
 }
 
+.navds-form-field--small .navds-combobox__list-item--focus,
+.navds-form-field--small .navds-combobox__list-item:hover {
+  padding-left: calc(var(--a-spacing-2) - 4px);
+}
+
 .navds-combobox__list-item--selected {
   background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
 }
diff --git a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
index bf67351672..576d957318 100644
--- a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
+++ b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
@@ -42,8 +42,12 @@ export const SelectedOptionsProvider = ({
   >;
 }) => {
   const { clearInput, focusInput } = useInputContext();
-  const { customOptions, removeCustomOption, addCustomOption } =
-    useCustomOptionsContext();
+  const {
+    customOptions,
+    removeCustomOption,
+    addCustomOption,
+    setCustomOptions,
+  } = useCustomOptionsContext();
   const {
     allowNewValues,
     isMultiSelect,
@@ -65,6 +69,7 @@ export const SelectedOptionsProvider = ({
         .includes(option?.toLowerCase?.());
       if (isCustomOption) {
         allowNewValues && addCustomOption(option);
+        !isMultiSelect && setSelectedOptions([]);
       } else if (isMultiSelect) {
         setSelectedOptions((prevSelectedOptions) => [
           ...prevSelectedOptions,
@@ -72,10 +77,18 @@ export const SelectedOptionsProvider = ({
         ]);
       } else {
         setSelectedOptions([option]);
+        setCustomOptions([]);
       }
       onToggleSelected?.(option, true, isCustomOption);
     },
-    [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]
+    [
+      addCustomOption,
+      allowNewValues,
+      isMultiSelect,
+      onToggleSelected,
+      options,
+      setCustomOptions,
+    ]
   );
 
   const removeSelectedOption = useCallback(
diff --git a/@navikt/core/react/src/form/combobox/customOptionsContext.tsx b/@navikt/core/react/src/form/combobox/customOptionsContext.tsx
index e5a24de944..dae70fbf11 100644
--- a/@navikt/core/react/src/form/combobox/customOptionsContext.tsx
+++ b/@navikt/core/react/src/form/combobox/customOptionsContext.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useCallback, createContext, useContext } from "react";
 import { useInputContext } from "./Input/inputContext";
+import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
 
 type CustomOptionsContextType = {
   customOptions: string[];
   removeCustomOption: (option: string) => void;
   addCustomOption: (option: string) => void;
+  setCustomOptions: React.Dispatch<React.SetStateAction<string[]>>;
 };
 
 const CustomOptionsContext = createContext<CustomOptionsContextType>(
@@ -14,6 +16,7 @@ const CustomOptionsContext = createContext<CustomOptionsContextType>(
 export const CustomOptionsProvider = ({ children }) => {
   const [customOptions, setCustomOptions] = useState<string[]>([]);
   const { focusInput } = useInputContext();
+  const { isMultiSelect } = useSelectedOptionsContext();
 
   const removeCustomOption = useCallback(
     (option) => {
@@ -27,16 +30,21 @@ export const CustomOptionsProvider = ({ children }) => {
 
   const addCustomOption = useCallback(
     (option) => {
-      setCustomOptions((prevOptions) => [...prevOptions, option]);
+      if (isMultiSelect) {
+        setCustomOptions((prevOptions) => [...prevOptions, option]);
+      } else {
+        setCustomOptions([option]);
+      }
       focusInput();
     },
-    [focusInput, setCustomOptions]
+    [focusInput, isMultiSelect, setCustomOptions]
   );
 
   const customOptionsState = {
     customOptions,
     removeCustomOption,
     addCustomOption,
+    setCustomOptions,
   };
 
   return (