Merge 7f6a6d9 into 09828a4

navikt · Aug 7, 2024 · e31d947 · e31d947
2 parents 09828a4 + 7f6a6d9
commit e31d947
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/.changeset/strong-gorillas-grow.md b/.changeset/strong-gorillas-grow.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox: Can no longer remove options with backspace when shouldShowSelectedOptions is false
diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx
@@ -16,11 +16,12 @@ interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled"> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
+  shouldShowSelectedOptions?: boolean;
   value?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ inputClassName, ...rest }, ref) => {
+  ({ inputClassName, shouldShowSelectedOptions, ...rest }, ref) => {
     const internalRef = useRef<HTMLInputElement>(null);
     const mergedRefs = useMergeRefs(ref, internalRef);
     const {
@@ -128,7 +129,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
         setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
-          if (value === "") {
+          if (value === "" && shouldShowSelectedOptions) {
             const lastSelectedOption =
               selectedOptions[selectedOptions.length - 1];
             if (lastSelectedOption) {
@@ -191,6 +192,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         virtualFocus,
         setValue,
         searchTerm,
+        shouldShowSelectedOptions,
       ],
     );
 

diff --git a/@navikt/core/react/src/form/combobox/Input/InputController.tsx b/@navikt/core/react/src/form/combobox/Input/InputController.tsx
@@ -73,6 +73,7 @@ export const InputController = forwardRef<
             id={inputProps.id}
             ref={mergedInputRef}
             inputClassName={inputClassName}
+            shouldShowSelectedOptions={shouldShowSelectedOptions}
             {...rest}
           />
         </SelectedOptions>

diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx
@@ -143,7 +143,7 @@ export const WithAddNewOptions: StoryFn = ({ open }: { open?: boolean }) => {
       allowNewValues={true}
       shouldAutocomplete={true}
       value={value}
-      onChange={(newValue) => setValue(newValue)}
+      onChange={setValue}
       isListOpen={open ?? (comboboxRef.current ? true : undefined)}
       ref={comboboxRef}
     />
@@ -167,7 +167,7 @@ export const MultiSelectWithAddNewOptions: StoryFn = ({
       allowNewValues={true}
       value={value}
       selectedOptions={selectedOptions}
-      onChange={(newValue) => setValue(newValue)}
+      onChange={setValue}
       onToggleSelected={(option, isSelected) =>
         isSelected
           ? setSelectedOptions([...selectedOptions, option])
@@ -197,8 +197,7 @@ export const MultiSelectWithExternalChips: StoryFn = () => {
           {selectedOptions.map((option) => (
             <Chips.Removable
               key={option}
-              onPointerUp={() => toggleSelected(option)}
-              onKeyUp={(e) => e.key === "Enter" && toggleSelected(option)}
+              onClick={() => toggleSelected(option)}
             >
               {option}
             </Chips.Removable>
@@ -212,7 +211,7 @@ export const MultiSelectWithExternalChips: StoryFn = () => {
         onToggleSelected={(option) => toggleSelected(option)}
         isMultiSelect
         value={value}
-        onChange={(newValue) => setValue(newValue || "")}
+        onChange={setValue}
         label="Komboboks"
         size="medium"
         shouldShowSelectedOptions={false}
@@ -240,7 +239,7 @@ export const ComboboxWithNoHits: StoryFn = () => {
       label="Komboboks (uten søketreff)"
       options={options}
       value={value}
-      onChange={(newValue) => setValue(newValue)}
+      onChange={setValue}
       isListOpen={true}
     />
   );
@@ -279,7 +278,7 @@ export const Controlled: StoryFn = () => {
         filteredOptions={filteredOptions}
         isMultiSelect
         options={options}
-        onChange={(newValue) => setValue(newValue || "")}
+        onChange={setValue}
         onToggleSelected={onToggleSelected}
         selectedOptions={selectedOptions}
         value={value}
@@ -386,7 +385,7 @@ export const MaxSelectedOptions: StoryFn = ({ open }: { open?: boolean }) => {
       allowNewValues
       isListOpen={open ?? (comboboxRef.current ? undefined : true)}
       value={value}
-      onChange={(newValue) => setValue(newValue)}
+      onChange={setValue}
       ref={comboboxRef}
     />
   );