Feature/combobox error message (#2182)

Co-authored-by: Ken <[email protected]>

.changeset/beige-keys-roll.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Add support for error messages to combobox

@navikt/core/react/src/form/combobox/Combobox.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef } from "react";
-import { BodyShort, Label, mergeRefs } from "../..";
+import { BodyShort, ErrorMessage, Label, mergeRefs } from "../..";
 import ClearButton from "./ClearButton";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -39,12 +39,15 @@ export const Combobox = forwardRef<
 
   const {
     clearInput,
+    error,
+    errorId,
     focusInput,
     hasError,
     inputDescriptionId,
     inputProps,
     inputRef,
     value,
+    showErrorMsg,
     size = "medium",
   } = useInputContext();
 
@@ -129,6 +132,14 @@ export const Combobox = forwardRef<
         </div>
         <FilteredOptions />
       </div>
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
+        {showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
+      </div>
     </ComboboxWrapper>
   );
 });

@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
   useLayoutEffect,
 } from "react";
+import cl from "clsx";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import usePrevious from "../../../util/usePrevious";
@@ -58,7 +59,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
   } = props;
   const filteredOptionsRef = useRef<HTMLUListElement | null>(null);
   const {
-    inputProps: { id },
+    inputProps: { "aria-describedby": partialAriaDescribedBy, id },
     value,
     searchTerm,
     setValue,
@@ -124,18 +125,26 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
   }, [allowNewValues, isValueNew]);
 
   const ariaDescribedBy = useMemo(() => {
+    let activeOption;
     if (!isLoading && filteredOptions.length === 0) {
-      return `${id}-no-hits`;
+      activeOption = `${id}-no-hits`;
     } else if ((value && value !== "") || isLoading) {
       if (shouldAutocomplete && filteredOptions[0]) {
-        return `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
-      } else if (isLoading) {
-        return `${id}-is-loading`;
+        activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
+      } else if (isListOpen && isLoading) {
+        activeOption = `${id}-is-loading`;
       }
-    } else {
-      return undefined;
     }
-  }, [isLoading, value, shouldAutocomplete, filteredOptions, id]);
+    return cl(activeOption, partialAriaDescribedBy) || undefined;
+  }, [
+    isListOpen,
+    isLoading,
+    value,
+    partialAriaDescribedBy,
+    shouldAutocomplete,
+    filteredOptions,
+    id,
+  ]);
 
   const currentOption = useMemo(() => {
     if (filteredOptionsIndex == null) {

@navikt/core/react/src/form/combobox/Input/Input.tsx

@@ -170,6 +170,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         aria-autocomplete={shouldAutocomplete ? "both" : "list"}
         aria-activedescendant={activeDecendantId}
         aria-describedby={ariaDescribedBy}
+        aria-invalid={inputProps["aria-invalid"]}
         className={cl(
           inputClassName,
           "navds-combobox__input",

@navikt/core/react/src/form/combobox/Input/inputContext.tsx

@@ -13,6 +13,7 @@ import { useFormField, FormFieldType } from "../../useFormField";
 
 interface InputContextType extends FormFieldType {
   clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
+  error?: string;
   focusInput: () => void;
   inputRef: React.RefObject<HTMLInputElement>;
   value: string;
@@ -101,6 +102,7 @@ export const InputContextProvider = ({ children, value: props }) => {
       value={{
         ...formFieldProps,
         clearInput,
+        error,
         focusInput,
         inputRef,
         value,

@navikt/core/react/src/form/combobox/combobox.stories.tsx

@@ -316,6 +316,33 @@ ComboboxSizes.args = {
   options,
 };
 
+export const WithError = {
+  args: {
+    error: "Du må velge en favorittfrukt.",
+    isLoading: true,
+  },
+  render: (props) => {
+    const [hasSelectedValue, setHasSelectedValue] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          filteredOptions={isLoading ? [] : undefined}
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          error={!hasSelectedValue && props.error}
+          isLoading={isLoading}
+          onChange={() => {
+            setIsLoading(true);
+            setTimeout(() => setIsLoading(false), 2000);
+          }}
+          onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)}
+        />
+      </DemoContainer>
+    );
+  },
+};
+
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

aksel.nav.no/website/pages/eksempler/combobox/with-error.tsx

@@ -0,0 +1,36 @@
+import { UNSAFE_Combobox } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const initialOptions = [
+  "banana",
+  "apple",
+  "tangerine",
+  "pear",
+  "grape",
+  "kiwi",
+  "mango",
+  "passion fruit",
+  "pineapple",
+  "strawberry",
+  "watermelon",
+  "grape fruit",
+];
+
+export const Example = () => {
+  return (
+    <div>
+      <UNSAFE_Combobox
+        label="Hva er din favorittfrukt?"
+        options={initialOptions}
+        error="Du må velge en favorittfrukt."
+      />
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+export const args = {
+  index: 0,
+  desc: "Ved Single Select velger brukeren kun ett valg fra nedtrekkslisten.",
+};