Merge e3f1b0c into aca5143

navikt · Aug 29, 2024 · 8cd4ca0 · 8cd4ca0
2 parents aca5143 + e3f1b0c
commit 8cd4ca0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/fast-beans-repeat.md b/.changeset/fast-beans-repeat.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox :children_crossing: single select now hides selected value when typing, onBlur clears input
diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
@@ -99,6 +99,7 @@
   border: none;
   padding: 0;
   margin: 0;
+  margin-left: var(--a-spacing-1);
   min-width: 10ch;
   width: 100%;
   height: var(--__ac-combobox-input-height);

diff --git a/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx b/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx
@@ -21,7 +21,7 @@ const ComboboxWrapper = ({
   inputSize,
   toggleIsListOpen,
 }: ComboboxWrapperProps) => {
-  const { toggleOpenButtonRef } = useInputContext();
+  const { toggleOpenButtonRef, clearInput } = useInputContext();
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
@@ -40,6 +40,7 @@ const ComboboxWrapper = ({
     if (!wrapperRef.current?.contains(e.relatedTarget)) {
       toggleIsListOpen(false);
       setHasFocusWithin(false);
+      clearInput(e);
     }
   }
 

diff --git a/@navikt/core/react/src/form/combobox/SelectedOptions/SelectedOptions.tsx b/@navikt/core/react/src/form/combobox/SelectedOptions/SelectedOptions.tsx
@@ -36,9 +36,11 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
   size,
   children,
 }) => {
+  const { value } = useInputContext();
+  const { isMultiSelect } = useSelectedOptionsContext();
   return (
     <Chips className="navds-combobox__selected-options" size={size}>
-      {selectedOptions.length
+      {value.length === 0 || (isMultiSelect && selectedOptions.length)
         ? selectedOptions.map((option, i) => (
             <Option key={option.label + i} option={option} />
           ))