@navikt/ds-react 6.13.0 → 6.15.0

package/src/form/combobox/FilteredOptions/NoSearchHitsMessage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useInputContext } from "../Input/Input.context";
+import filteredOptionsUtil from "./filtered-options-util";
+
+const NoSearchHitsMessage = () => {
+  const {
+    inputProps: { id },
+  } = useInputContext();
+  return (
+    <div
+      className="navds-combobox__list-item--no-options"
+      id={filteredOptionsUtil.getNoHitsId(id)}
+    >
+      Ingen søketreff
+    </div>
+  );
+};
+
+export default NoSearchHitsMessage;

package/src/form/combobox/FilteredOptions/filtered-options-util.ts

@@ -4,11 +4,18 @@ const normalizeText = (text: string): string =>
   typeof text === "string" ? text.toLocaleLowerCase().trim() : "";
 
 const isPartOfText = (value: string, text: string) =>
-  normalizeText(text).startsWith(normalizeText(value ?? ""));
+  normalizeText(text).includes(normalizeText(value ?? ""));
 
 const getMatchingValuesFromList = (value: string, list: ComboboxOption[]) =>
   list.filter((listItem) => isPartOfText(value, listItem.label));
 
+const getFirstValueStartingWith = (text: string, list: ComboboxOption[]) => {
+  const normalizedText = normalizeText(text);
+  return list.find((listItem) =>
+    normalizeText(listItem.label).startsWith(normalizedText),
+  );
+};
+
 const getFilteredOptionsId = (comboboxId: string) =>
   `${comboboxId}-filtered-options`;
 
@@ -37,4 +44,5 @@ export default {
   getIsLoadingId,
   getNoHitsId,
   getMaxSelectedOptionsId,
+  getFirstValueStartingWith,
 };

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -106,16 +106,19 @@ const FilteredOptionsProvider = ({
   }, [allowNewValues, customOptions, id, options, value]);
 
   useClientLayoutEffect(() => {
+    const autoCompleteCandidate =
+      filteredOptionsUtils.getFirstValueStartingWith(
+        searchTerm,
+        filteredOptions,
+      )?.label;
     if (
       shouldAutocomplete &&
-      filteredOptionsUtils.normalizeText(searchTerm) !== "" &&
-      (previousSearchTerm?.length || 0) < searchTerm.length &&
-      filteredOptions.length > 0
+      autoCompleteCandidate &&
+      (previousSearchTerm?.length || 0) < searchTerm.length
     ) {
       setValue(
-        `${searchTerm}${filteredOptions[0].label.substring(searchTerm.length)}`,
+        `${searchTerm}${autoCompleteCandidate.substring(searchTerm.length)}`,
       );
-      setSearchTerm(searchTerm);
     }
   }, [
     filteredOptions,

package/src/form/combobox/Input/Input.context.tsx

@@ -1,11 +1,4 @@
-import React, {
-  ChangeEvent,
-  ChangeEventHandler,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { createContext } from "../../../util/create-context";
 import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
@@ -13,12 +6,12 @@ import { ComboboxProps } from "../types";
 
 interface InputContextValue extends FormFieldType {
   clearInput: NonNullable<ComboboxProps["onClear"]>;
-  error?: string;
+  error?: ComboboxProps["error"];
   focusInput: () => void;
   inputRef: React.RefObject<HTMLInputElement>;
   value: string;
   setValue: (text: string) => void;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (newValue: string) => void;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
@@ -31,7 +24,24 @@ const [InputContextProvider, useInputContext] =
     errorMessage: "useInputContext must be used within an InputContextProvider",
   });
 
-const InputProvider = ({ children, value: props }) => {
+interface Props {
+  children: React.ReactNode;
+  value: {
+    defaultValue: ComboboxProps["defaultValue"];
+    description: ComboboxProps["description"];
+    disabled: ComboboxProps["disabled"];
+    error: ComboboxProps["error"];
+    errorId: ComboboxProps["errorId"];
+    id: ComboboxProps["id"];
+    value: ComboboxProps["value"];
+    onChange: ComboboxProps["onChange"];
+    onClear: ComboboxProps["onClear"];
+    shouldAutocomplete: ComboboxProps["shouldAutocomplete"];
+    size: ComboboxProps["size"];
+  };
+}
+
+const InputProvider = ({ children, value: props }: Props) => {
   const {
     defaultValue = "",
     description,
@@ -68,30 +78,22 @@ const InputProvider = ({ children, value: props }) => {
   const [searchTerm, setSearchTerm] = useState(value);
 
   const onChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const newValue = event.currentTarget.value;
+    (newValue: string) => {
       externalValue ?? setInternalValue(newValue);
-      externalOnChange?.(event);
       setSearchTerm(newValue);
+      externalOnChange?.(newValue);
     },
     [externalValue, externalOnChange],
   );
 
-  const setValue = useCallback(
-    (text) => {
-      setInternalValue(text);
-    },
-    [setInternalValue],
-  );
-
   const clearInput = useCallback(
     (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
       onClear?.(event);
-      externalOnChange?.(null, "");
-      setValue("");
+      externalOnChange?.("");
+      setInternalValue("");
       setSearchTerm("");
     },
-    [externalOnChange, onClear, setValue],
+    [externalOnChange, onClear, setInternalValue],
   );
 
   const focusInput = useCallback(() => {
@@ -111,7 +113,7 @@ const InputProvider = ({ children, value: props }) => {
     focusInput,
     inputRef,
     value,
-    setValue,
+    setValue: setInternalValue,
     onChange,
     searchTerm,
     setSearchTerm,

package/src/form/combobox/Input/Input.tsx

@@ -1,26 +1,38 @@
 import cl from "clsx";
 import React, {
-  ChangeEvent,
   InputHTMLAttributes,
   forwardRef,
   useCallback,
+  useRef,
 } from "react";
 import { omit } from "../../../util";
+import { useMergeRefs } from "../../../util/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "./Input.context";
 
 interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled"> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
+  shouldShowSelectedOptions?: boolean;
   value?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ inputClassName, ...rest }, ref) => {
-    const { clearInput, inputProps, onChange, size, value } = useInputContext();
+  ({ inputClassName, shouldShowSelectedOptions, ...rest }, ref) => {
+    const internalRef = useRef<HTMLInputElement>(null);
+    const mergedRefs = useMergeRefs(ref, internalRef);
+    const {
+      clearInput,
+      inputProps,
+      onChange,
+      size,
+      value,
+      searchTerm,
+      setValue,
+    } = useInputContext();
     const {
       selectedOptions,
       removeSelectedOption,
@@ -56,7 +68,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (!isMultiSelect && !isTextInSelectedOptions(currentOption.label)) {
             toggleIsListOpen(false);
           }
-        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
+        } else if (isTextInSelectedOptions(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
@@ -67,13 +79,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             allowNewValues && isValueNew
               ? { label: value, value }
               : filteredOptions[0];
+
+          if (!selectedValue) {
+            return;
+          }
+
           toggleOption(selectedValue, event);
-          if (
-            !isMultiSelect &&
-            !isTextInSelectedOptions(
-              filteredOptions[0].label || selectedValue.label,
-            )
-          ) {
+          if (!isMultiSelect && !isTextInSelectedOptions(selectedValue.label)) {
             toggleIsListOpen(false);
           }
         }
@@ -96,10 +108,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
       e.preventDefault();
       switch (e.key) {
-        case "Escape":
-          clearInput(e);
-          toggleIsListOpen(false);
-          break;
         case "Enter":
         case "Accept":
           onEnter(e);
@@ -118,10 +126,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     };
 
     const handleKeyDown = useCallback(
-      (e) => {
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
         setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
-          if (value === "") {
+          if (value === "" && shouldShowSelectedOptions) {
             const lastSelectedOption =
               selectedOptions[selectedOptions.length - 1];
             if (lastSelectedOption) {
@@ -132,17 +140,34 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (activeDecendantId || value) {
             e.preventDefault();
           }
+        } else if (e.key === "Escape") {
+          if (isListOpen || value) {
+            e.preventDefault(); // Prevents closing an encasing Modal, as Combobox reacts on keyup.
+            clearInput(e);
+            toggleIsListOpen(false);
+          }
+        } else if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
+          /**
+           * In case user has an active selection and 'completes' the selection with ArrowLeft or ArrowRight
+           * we need to make sure to update the filter.
+           */
+          if (value !== "" && value !== searchTerm) {
+            onChange(value);
+          }
         } else if (e.key === "ArrowDown") {
-          // Check that cursor position is at the end of the input field,
-          // so we don't interfere with text editing
-          if (e.target.selectionStart === value?.length) {
-            e.preventDefault();
-            if (virtualFocus.activeElement === null || !isListOpen) {
-              toggleIsListOpen(true);
-            }
-            virtualFocus.moveFocusDown();
+          // Reset the value to the search term to cancel autocomplete
+          // if the user moves focus down to the FilteredOptions
+          if (value !== searchTerm) {
+            setValue(searchTerm);
           }
+          if (virtualFocus.activeElement === null || !isListOpen) {
+            toggleIsListOpen(true);
+          }
+          virtualFocus.moveFocusDown();
         } else if (e.key === "ArrowUp") {
+          if (value !== "" && value !== searchTerm) {
+            onChange(value);
+          }
           // Check that the FilteredOptions list is open and has virtual focus.
           // Otherwise ignore keystrokes, so it doesn't interfere with text editing
           if (isListOpen && activeDecendantId) {
@@ -161,13 +186,18 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         isListOpen,
         activeDecendantId,
         setIsMouseLastUsedInputDevice,
+        clearInput,
         toggleIsListOpen,
+        onChange,
         virtualFocus,
+        setValue,
+        searchTerm,
+        shouldShowSelectedOptions,
       ],
     );
 
     const onChangeHandler = useCallback(
-      (event: ChangeEvent<HTMLInputElement>) => {
+      (event: React.ChangeEvent<HTMLInputElement>) => {
         const newValue = event.target.value;
         if (newValue && newValue !== "") {
           toggleIsListOpen(true);
@@ -175,7 +205,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           toggleIsListOpen(false);
         }
         virtualFocus.moveFocusToTop();
-        onChange(event);
+        onChange(newValue);
       },
       [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen],
     );
@@ -184,10 +214,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <input
         {...rest}
         {...omit(inputProps, ["aria-invalid"])}
-        ref={ref}
+        ref={mergedRefs}
         value={value}
         onBlur={() => virtualFocus.moveFocusToTop()}
-        onChange={onChangeHandler}
+        onClick={() => value !== searchTerm && onChange(value)}
+        onInput={onChangeHandler}
         type="text"
         role="combobox"
         onKeyUp={handleKeyUp}

package/src/form/combobox/Input/InputController.tsx

@@ -24,6 +24,7 @@ export const InputController = forwardRef<
     | "size"
     | "onClear"
     | "value"
+    | "disabled"
   >
 >((props, ref) => {
   const {
@@ -72,6 +73,7 @@ export const InputController = forwardRef<
             id={inputProps.id}
             ref={mergedInputRef}
             inputClassName={inputClassName}
+            shouldShowSelectedOptions={shouldShowSelectedOptions}
             {...rest}
           />
         </SelectedOptions>

package/src/form/combobox/__tests__/combobox.test.tsx

@@ -8,6 +8,7 @@ import { UNSAFE_Combobox } from "../index";
 const options = [
   "banana",
   "apple",
+  "apple pie",
   "tangerine",
   "pear",
   "grape",
@@ -71,86 +72,193 @@ describe("Render combobox", () => {
     });
   });
 
-  test("Should show loading icon when loading (used for async search)", async () => {
-    render(<App options={[]} isListOpen isLoading />);
+  describe("Combobox state-handling", () => {
+    test("Should show loading icon when loading (used for async search)", async () => {
+      render(<App options={[]} isListOpen isLoading />);
 
-    expect(await screen.findByText("Søker...")).toBeInTheDocument();
-  });
-});
+      expect(await screen.findByText("Søker...")).toBeInTheDocument();
+    });
 
-describe("Combobox state-handling", () => {
-  test("Should not select previous focused element when closes", async () => {
-    render(<App options={options} />);
+    test("Should not select previous focused element when closes", async () => {
+      render(<App options={options} />);
 
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-      );
-    });
-    await act(async () => {
-      await userEvent.type(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "ban",
-      );
-      await userEvent.keyboard("{ArrowDown}");
-      await userEvent.keyboard("{ArrowUp}");
-      await userEvent.keyboard("{Enter}");
+      await act(async () => {
+        await userEvent.click(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+        );
+      });
+      await act(async () => {
+        await userEvent.type(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+          "ban",
+        );
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{Enter}");
+      });
+
+      expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
     });
 
-    expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
-  });
+    test("Should reset list when resetting input (ESC)", async () => {
+      render(<App options={options} />);
 
-  test("Should reset list when resetting input (ESC)", async () => {
-    render(<App options={options} />);
+      await act(async () => {
+        await userEvent.click(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+        );
+      });
+      await act(async () => {
+        await userEvent.type(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+          "apple",
+        );
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Escape}");
+        await userEvent.keyboard("{ArrowDown}");
+      });
+
+      expect(
+        await screen.findByRole("option", { name: "banana" }),
+      ).toBeInTheDocument();
+    });
 
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+    test("Should handle complex options with label and value", async () => {
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={[
+            { label: "Hjelpemidler [HJE]", value: "HJE" },
+            { label: "Oppfølging [OPP]", value: "OPP" },
+            { label: "Sykepenger [SYK]", value: "SYK" },
+            { label: "Sykemelding [SYM]", value: "SYM" },
+          ]}
+          onToggleSelected={onToggleSelected}
+        />,
       );
+
+      expect(screen.getByRole("combobox")).toBeInTheDocument();
+      const bananaOption = screen.getByRole("option", {
+        name: "Hjelpemidler [HJE]",
+        selected: false,
+      });
+      await act(async () => {
+        await userEvent.click(bananaOption);
+      });
+      expect(onToggleSelected).toHaveBeenCalledWith("HJE", true, false);
+      expect(
+        screen.getByRole("option", {
+          name: "Hjelpemidler [HJE]",
+          selected: true,
+        }),
+      ).toBeInTheDocument();
     });
-    await act(async () => {
-      await userEvent.type(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "apple",
+
+    test("should trigger onChange for every character typed or removed", async () => {
+      const onChange = vi.fn();
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={["Apple", "Orange", "Banana", "Lemon"]}
+          onChange={onChange}
+          onToggleSelected={onToggleSelected}
+          shouldAutocomplete
+        />,
       );
-      await userEvent.keyboard("{ArrowDown}");
-      await userEvent.keyboard("{Escape}");
-      await userEvent.keyboard("{ArrowDown}");
+      const combobox = screen.getByRole("combobox");
+      expect(combobox).toBeInTheDocument();
+
+      await act(async () => {
+        await userEvent.click(combobox);
+        await userEvent.type(combobox, "Lemon");
+      });
+      expect(onChange).toHaveBeenNthCalledWith(1, "L");
+      expect(onChange).toHaveBeenNthCalledWith(2, "Le");
+      expect(onChange).toHaveBeenNthCalledWith(3, "Lem");
+      expect(onChange).toHaveBeenNthCalledWith(4, "Lemo");
+      expect(onChange).toHaveBeenNthCalledWith(5, "Lemon");
     });
 
-    expect(
-      await screen.findByRole("option", { name: "banana" }),
-    ).toBeInTheDocument();
-  });
+    test("should trigger onChange while typing and on accepting autocomplete suggestions", async () => {
+      const onChange = vi.fn();
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={[
+            "Hjelpemidler [HJE]",
+            "Oppfølging [OPP]",
+            "Sykepenger [SYK]",
+            "Sykemelding [SYM]",
+          ]}
+          onChange={onChange}
+          onToggleSelected={onToggleSelected}
+          shouldAutocomplete
+        />,
+      );
+      const combobox = screen.getByRole("combobox");
+      expect(combobox).toBeInTheDocument();
 
-  test("Should handle complex options with label and value", async () => {
-    const onToggleSelected = vi.fn();
-    render(
-      <App
-        options={[
-          { label: "Hjelpemidler [HJE]", value: "HJE" },
-          { label: "Oppfølging [OPP]", value: "OPP" },
-          { label: "Sykepenger [SYK]", value: "SYK" },
-          { label: "Sykemelding [SYM]", value: "SYM" },
-        ]}
-        onToggleSelected={onToggleSelected}
-      />,
-    );
-
-    expect(screen.getByRole("combobox")).toBeInTheDocument();
-    const bananaOption = screen.getByRole("option", {
-      name: "Hjelpemidler [HJE]",
-      selected: false,
+      await act(async () => {
+        await userEvent.click(combobox);
+        await userEvent.type(combobox, "Syke");
+        await userEvent.keyboard("{ArrowRight}");
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Enter}");
+      });
+      expect(onChange).toHaveBeenNthCalledWith(1, "S");
+      expect(onChange).toHaveBeenNthCalledWith(2, "Sy");
+      expect(onChange).toHaveBeenNthCalledWith(3, "Syk");
+      expect(onChange).toHaveBeenNthCalledWith(4, "Syke");
+      expect(onChange).toHaveBeenNthCalledWith(5, "Sykepenger [SYK]");
+      expect(onChange).toHaveBeenCalledWith("");
+      expect(onToggleSelected).toHaveBeenCalledOnce();
+      expect(onToggleSelected).toHaveBeenCalledWith(
+        "Sykepenger [SYK]",
+        true,
+        false,
+      );
     });
-    await act(async () => {
-      await userEvent.click(bananaOption);
+  });
+
+  describe("search", () => {
+    test("should find matched anywhere in the label", async () => {
+      render(<App options={options} />);
+
+      const combobox = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+      await act(async () => {
+        await userEvent.click(combobox);
+
+        await userEvent.type(combobox, "p");
+      });
+
+      const searchHits = [
+        "apple",
+        "apple pie",
+        "pear",
+        "grape",
+        "passion fruit",
+        "pineapple",
+        "grape fruit",
+      ];
+      searchHits.forEach((label) => {
+        expect(screen.getByRole("option", { name: label })).toBeInTheDocument();
+      });
+      screen.getAllByRole("option").forEach((option) => {
+        expect(
+          option.textContent && searchHits.includes(option.textContent),
+        ).toBe(true);
+      });
     });
-    expect(onToggleSelected).toHaveBeenCalledWith("HJE", true, false);
-    expect(
-      screen.getByRole("option", {
-        name: "Hjelpemidler [HJE]",
-        selected: true,
-      }),
-    ).toBeInTheDocument();
   });
 });

package/src/form/combobox/types.ts

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
 /**
@@ -29,7 +29,10 @@ export type MaxSelected = {
 
 export interface ComboboxProps
   extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      "size" | "onChange" | "value" | "defaultValue"
+    > {
   /**
    * Combobox label.
    */
@@ -89,12 +92,9 @@ export interface ComboboxProps
   /**
    * Callback function triggered whenever the value of the input field is triggered.
    *
-   * @param event
+   * @param value The value after change
    */
-  onChange?: (
-    event: ChangeEvent<HTMLInputElement> | null,
-    value?: string,
-  ) => void;
+  onChange?: (value: string) => void;
   /**
    * Callback function triggered whenever the input field is cleared.
    *
@@ -156,4 +156,8 @@ export interface ComboboxProps
    * This converts the input to a controlled input, so you have to use onChange to update the value.
    */
   value?: string;
+  /**
+   * Initial value of the input field. Only works when the input is uncontrolled.
+   */
+  defaultValue?: string;
 }