fix(autocomplete): return value instead of label in form submission

.changeset/purple-pillows-beg.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/autocomplete": patch
+---
+
+return autocomplete value instead of label in form submission (#3353, #3343)

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -729,6 +729,7 @@ describe("Autocomplete with React Hook Form", () => {
   let submitButton: HTMLButtonElement;
   let wrapper: any;
   let onSubmit: () => void;
+  let getReactHookFormValues: (key: string) => any;
 
   beforeEach(() => {
     const {result} = renderHook(() =>
@@ -745,10 +746,13 @@ describe("Autocomplete with React Hook Form", () => {
       handleSubmit,
       register,
       formState: {errors},
+      getValues,
     } = result.current;
 
     onSubmit = jest.fn();
 
+    getReactHookFormValues = getValues;
+
     wrapper = render(
       <form className="flex w-full max-w-xs flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
         <Autocomplete
@@ -822,4 +826,26 @@ describe("Autocomplete with React Hook Form", () => {
 
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
+
+  it("should have correct form values", async () => {
+    const user = userEvent.setup();
+
+    await user.click(autocomplete3);
+
+    expect(autocomplete3).toHaveAttribute("aria-expanded", "true");
+
+    let listboxItems = wrapper.getAllByRole("option");
+
+    await user.click(listboxItems[1]);
+
+    expect(autocomplete3).toHaveValue("Dog");
+
+    await user.click(submitButton);
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+
+    expect(getReactHookFormValues("withDefaultValue")).toEqual("cat");
+    expect(getReactHookFormValues("withoutDefaultValue")).toEqual("");
+    expect(getReactHookFormValues("requiredField")).toEqual("dog");
+  });
 });

packages/components/autocomplete/package.json

@@ -55,6 +55,7 @@
     "@nextui-org/use-safe-layout-effect": "workspace:*",
     "@react-aria/combobox": "3.10.3",
     "@react-aria/focus": "3.18.2",
+    "@react-aria/form": "3.0.5",
     "@react-aria/i18n": "3.12.2",
     "@react-aria/interactions": "3.22.2",
     "@react-aria/utils": "3.25.2",

packages/components/autocomplete/src/autocomplete.tsx

@@ -9,6 +9,7 @@ import {ForwardedRef, ReactElement, Ref} from "react";
 import {AnimatePresence} from "framer-motion";
 
 import {UseAutocompleteProps, useAutocomplete} from "./use-autocomplete";
+import {HiddenInput} from "./hidden-input";
 
 interface Props<T> extends UseAutocompleteProps<T> {}
 
@@ -29,6 +30,7 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
     getClearButtonProps,
     getListBoxWrapperProps,
     getEndContentWrapperProps,
+    getHiddenInputProps,
   } = useAutocomplete<T>({...props, ref});
 
   const listboxProps = getListBoxProps();
@@ -45,6 +47,7 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
 
   return (
     <Component {...getBaseProps()}>
+      <HiddenInput {...getHiddenInputProps()} />
       <Input
         {...getInputProps()}
         endContent={

packages/components/autocomplete/src/hidden-input.tsx

@@ -0,0 +1,85 @@
+import type {ComboBoxState} from "@react-stately/combobox";
+
+import React, {ReactNode, RefObject} from "react";
+import {useFormReset} from "@react-aria/utils";
+import {useFormValidation} from "@react-aria/form";
+
+import {inputData} from "./use-autocomplete";
+
+export interface AriaHiddenInputProps {
+  /**
+   * Describes the type of autocomplete functionality the input should provide if any.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   */
+  autoComplete?: string;
+  /** The text label for the input. */
+  label?: ReactNode;
+  /** HTML form input name. */
+  name?: string;
+  /** Sets the disabled state of the input. */
+  isDisabled?: boolean;
+  /** Whether the input is required. */
+  isRequired?: boolean;
+}
+
+type NativeHTMLInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  keyof AriaHiddenInputProps
+>;
+
+type CombinedAriaInputProps = NativeHTMLInputProps & AriaHiddenInputProps;
+
+export interface HiddenInputProps<T> extends CombinedAriaInputProps {
+  /** State for the input. */
+  state: ComboBoxState<T>;
+  /** A ref to the hidden `<input>` element. */
+  hiddenInputRef?: RefObject<HTMLInputElement>;
+  /** A ref to the `<input>` element. */
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export function useHiddenInput<T>(props: HiddenInputProps<T>) {
+  const data = inputData.get(props.state) || {};
+
+  const {
+    state,
+    autoComplete,
+    name = data.name,
+    isDisabled = data.isDisabled,
+    hiddenInputRef,
+    inputRef,
+    onChange,
+  } = props;
+
+  const {validationBehavior, isRequired} = data;
+
+  useFormReset(inputRef!, state.selectedKey, state.setSelectedKey);
+  useFormValidation(
+    {
+      validationBehavior,
+      focus: () => inputRef?.current?.focus(),
+    },
+    state,
+    inputRef,
+  );
+
+  return {
+    name,
+    ref: hiddenInputRef,
+    type: "hidden",
+    disabled: isDisabled,
+    required: isRequired,
+    autoComplete,
+    value: state.selectedKey ?? inputRef?.current?.value ?? "",
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      state.setSelectedKey(e.target.value);
+      onChange?.(e);
+    },
+  };
+}
+
+export function HiddenInput<T>(props: HiddenInputProps<T>) {
+  const inputProps = useHiddenInput(props);
+
+  return <input {...inputProps} />;
+}