Combobox: Fixed aria-describedby and some types (#3065)

.changeset/plenty-ants-tickle.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox: Description is now connected to the input field via aria-describedby

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

@@ -10,7 +10,10 @@ import { ComboboxProps } from "./types";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
-  Omit<ComboboxProps, "onChange" | "options" | "size" | "onClear" | "value">
+  Omit<
+    ComboboxProps,
+    "onChange" | "options" | "size" | "onClear" | "value" | "disabled"
+  >
 >((props, ref) => {
   const { className, hideLabel = false, description, label, ...rest } = props;
 

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

@@ -35,6 +35,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       allowNewValues = false,
       children,
       defaultValue,
+      disabled,
       error,
       errorId,
       filteredOptions: externalFilteredOptions,
@@ -60,6 +61,8 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       <InputContextProvider
         value={{
           defaultValue,
+          description: rest.description,
+          disabled,
           error,
           errorId,
           id,

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

@@ -6,7 +6,7 @@ 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;
@@ -24,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,
@@ -69,21 +86,14 @@ const InputProvider = ({ children, value: props }) => {
     [externalValue, externalOnChange],
   );
 
-  const setValue = useCallback(
-    (text: string) => {
-      setInternalValue(text);
-    },
-    [setInternalValue],
-  );
-
   const clearInput = useCallback(
     (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
       onClear?.(event);
       externalOnChange?.("");
-      setValue("");
+      setInternalValue("");
       setSearchTerm("");
     },
-    [externalOnChange, onClear, setValue],
+    [externalOnChange, onClear, setInternalValue],
   );
 
   const focusInput = useCallback(() => {
@@ -103,7 +113,7 @@ const InputProvider = ({ children, value: props }) => {
     focusInput,
     inputRef,
     value,
-    setValue,
+    setValue: setInternalValue,
     onChange,
     searchTerm,
     setSearchTerm,

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

@@ -13,7 +13,7 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
 import { useInputContext } from "./Input.context";
 
 interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled"> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
   value?: string;

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

@@ -24,6 +24,7 @@ export const InputController = forwardRef<
     | "size"
     | "onClear"
     | "value"
+    | "disabled"
   >
 >((props, ref) => {
   const {

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

@@ -46,6 +46,12 @@ Default.args = {
   onChange: console.log,
 };
 Default.argTypes = {
+  description: {
+    control: { type: "text" },
+  },
+  disabled: {
+    control: { type: "boolean" },
+  },
   isListOpen: {
     control: { type: "boolean" },
   },
@@ -403,6 +409,16 @@ export const WithError: StoryFn = () => {
   );
 };
 
+export const Disabled: StoryFn = () => {
+  return (
+    <UNSAFE_Combobox
+      options={options}
+      label="Hva er dine favorittfrukter?"
+      disabled
+    />
+  );
+};
+
 export const Chromatic: StoryFn = () => {
   const H2 = (props: { children: string; style?: React.CSSProperties }) => (
     <h2 style={{ marginBottom: "-0.25rem", ...props.style }}>
@@ -433,6 +449,8 @@ export const Chromatic: StoryFn = () => {
       <MaxSelectedOptions open />
       <H2 style={{ marginTop: "20rem" }}>WithError</H2>
       <WithError />
+      <H2>Disabled</H2>
+      <Disabled />
     </VStack>
   );
 };

@navikt/core/react/src/form/combobox/types.ts

@@ -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.
    */
@@ -153,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;
 }