fix: move testId to inputProps for all input components

packages/odyssey-react-mui/src/@types/react-augment.d.ts

@@ -11,13 +11,17 @@
  */
 
 import { FC } from "react";
-
 export interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {
   <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
     FC<WithForwardRefProps<T>>
   >;
 }
 
-export type FocusHandle = {
-  focus: () => void;
-};
+declare module "react" {
+  type DataAttributeKey = `data-${string}`;
+  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+    // Allows data-* props to be passed to inputProps in nested MUI components
+    // see: https://github.com/mui/material-ui/issues/20160
+    [dataAttribute: DataAttributeKey]: string | undefined;
+  }
+}

packages/odyssey-react-mui/src/Autocomplete.tsx

@@ -267,6 +267,7 @@ const Autocomplete = <
               ...params.inputProps,
               "aria-errormessage": errorMessageElementId,
               "aria-labelledby": labelElementId,
+              "data-se": testId,
             }}
             aria-describedby={ariaDescribedBy}
             id={id}
@@ -284,6 +285,7 @@ const Autocomplete = <
       isOptional,
       label,
       nameOverride,
+      testId,
     ]
   );
   const onChange = useCallback<
@@ -324,7 +326,6 @@ const Autocomplete = <
       {...inputValueProp}
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
-      data-se={testId}
       disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}

packages/odyssey-react-mui/src/Button.tsx

@@ -23,7 +23,7 @@ import {
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 import type { AllowedProps } from "./AllowedProps";
-import { FocusHandle } from "./@types/react-augment";
+import { FocusHandle } from "./inputUtils";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -49,9 +49,9 @@ export type ButtonProps = {
    */
   ariaDescribedBy?: string;
   /**
-   * The ref forwarded to the Button to expose focus()
+   * The ref forwarded to the Button
    */
-  buttonFocusRef?: React.RefObject<FocusHandle>;
+  buttonRef?: React.RefObject<FocusHandle>;
   /**
    * The icon element to display at the end of the Button
    */
@@ -119,7 +119,7 @@ const Button = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
-  buttonFocusRef,
+  buttonRef,
   endIcon,
   id,
   isDisabled,
@@ -136,14 +136,13 @@ const Button = ({
 }: ButtonProps) => {
   const muiProps = useMuiProps();
 
-  const ref = useRef<HTMLButtonElement>(null);
+  const localButtonRef = useRef<HTMLButtonElement>(null);
   useImperativeHandle(
-    buttonFocusRef,
+    buttonRef,
     () => {
-      const element = ref.current;
       return {
         focus: () => {
-          element && element.focus();
+          localButtonRef.current?.focus();
         },
       };
     },
@@ -163,7 +162,7 @@ const Button = ({
         fullWidth={isFullWidth}
         id={id}
         onClick={onClick}
-        ref={ref}
+        ref={localButtonRef}
         size={size}
         startIcon={startIcon}
         translate={translate}

packages/odyssey-react-mui/src/Checkbox.tsx

@@ -23,9 +23,12 @@ import {
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Typography } from "./Typography";
 import type { AllowedProps } from "./AllowedProps";
-import { ComponentControlledState, getControlState } from "./inputUtils";
+import {
+  ComponentControlledState,
+  FocusHandle,
+  getControlState,
+} from "./inputUtils";
 import { CheckedFieldProps } from "./FormCheckedProps";
-import { FocusHandle } from "./@types/react-augment";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
@@ -43,9 +46,9 @@ export type CheckboxProps = {
    */
   id?: string;
   /**
-   * The ref forwarded to the Checkbox to expose focus()
+   * The ref forwarded to the Checkbox
    */
-  inputFocusRef?: React.RefObject<FocusHandle>;
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * Determines whether the Checkbox is disabled
    */
@@ -86,7 +89,7 @@ const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
   id: idOverride,
-  inputFocusRef,
+  inputRef,
   isChecked,
   isDefaultChecked,
   isDisabled,
@@ -116,14 +119,13 @@ const Checkbox = ({
     return { defaultChecked: isDefaultChecked };
   }, [isDefaultChecked, isChecked]);
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const localInputRef = useRef<HTMLInputElement>(null);
   useImperativeHandle(
-    inputFocusRef,
+    inputRef,
     () => {
-      const element = inputRef.current;
       return {
         focus: () => {
-          element && element.focus();
+          localInputRef.current?.focus();
         },
       };
     },
@@ -179,13 +181,15 @@ const Checkbox = ({
           indeterminate={isIndeterminate}
           onChange={onChange}
           required={isRequired}
-          inputRef={inputRef}
+          inputProps={{
+            "data-se": testId,
+          }}
+          inputRef={localInputRef}
           sx={() => ({
             marginBlockStart: "2px",
           })}
         />
       }
-      data-se={testId}
       disabled={isDisabled}
       id={idOverride}
       label={label}

packages/odyssey-react-mui/src/Link.tsx

@@ -13,9 +13,9 @@
 import { memo, ReactElement, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
 import type { AllowedProps } from "./AllowedProps";
+import { FocusHandle } from "./inputUtils";
 
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
-import { FocusHandle } from "./@types/react-augment";
 
 export const linkVariantValues = ["default", "monochrome"] as const;
 
@@ -33,9 +33,9 @@ export type LinkProps = {
    */
   icon?: ReactElement;
   /**
-   * The ref forwarded to the TextField to expose focus()
+   * The ref forwarded to the TextField
    */
-  linkFocusRef?: React.RefObject<FocusHandle>;
+  linkRef?: React.RefObject<FocusHandle>;
   /**
    * The click event handler for the Link
    */
@@ -63,22 +63,21 @@ const Link = ({
   children,
   href,
   icon,
-  linkFocusRef,
+  linkRef,
   rel,
   target,
   testId,
   translate,
   variant,
   onClick,
 }: LinkProps) => {
-  const ref = useRef<HTMLAnchorElement>(null);
+  const localLinkRef = useRef<HTMLAnchorElement>(null);
   useImperativeHandle(
-    linkFocusRef,
+    linkRef,
     () => {
-      const element = ref.current;
       return {
         focus: () => {
-          element && element.focus();
+          localLinkRef.current?.focus();
         },
       };
     },
@@ -89,7 +88,7 @@ const Link = ({
     <MuiLink
       data-se={testId}
       href={href}
-      ref={ref}
+      ref={localLinkRef}
       rel={rel}
       target={target}
       translate={translate}

packages/odyssey-react-mui/src/NativeSelect.tsx

@@ -11,10 +11,12 @@
  */
 
 import React, {
+  InputHTMLAttributes,
   ReactElement,
   forwardRef,
   memo,
   useCallback,
+  useImperativeHandle,
   useMemo,
   useRef,
 } from "react";
@@ -25,7 +27,7 @@ import {
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { AllowedProps } from "./AllowedProps";
-import { getControlState, useInputValues } from "./inputUtils";
+import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
 import { ForwardRefWithType } from "./@types/react-augment";
 
 export type NativeSelectOption = {
@@ -41,6 +43,12 @@ export type NativeSelectProps<
   Value extends NativeSelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 > = {
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
+   */
+  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
   /**
    * The options or optgroup elements within the NativeSelect
    */
@@ -53,6 +61,10 @@ export type NativeSelectProps<
    * If `true`, the Select allows multiple selections
    */
   hasMultipleChoices?: HasMultipleChoices;
+  /**
+   * The ref forwarded to the NativeSelect
+   */
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * @deprecated Use `hasMultipleChoices` instead
    */
@@ -98,13 +110,15 @@ const NativeSelect: ForwardRefWithType = forwardRef(
     HasMultipleChoices extends boolean
   >(
     {
+      autoCompleteType,
       defaultValue,
       errorMessage,
       errorMessageList,
       hasMultipleChoices: hasMultipleChoicesProp,
       hint,
       HintLinkComponent,
       id: idOverride,
+      inputRef,
       isDisabled = false,
       isFullWidth = false,
       isMultiSelect,
@@ -126,6 +140,20 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         uncontrolledValue: defaultValue,
       })
     );
+    const localInputRef = useRef<HTMLSelectElement>(null);
+
+    useImperativeHandle(
+      inputRef,
+      () => {
+        return {
+          focus: () => {
+            localInputRef.current?.focus();
+          },
+        };
+      },
+      []
+    );
+
     const inputValues = useInputValues({
       defaultValue,
       value,
@@ -153,13 +181,15 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         <MuiSelect
           {...inputValues}
           aria-describedby={ariaDescribedBy}
+          autoComplete={autoCompleteType}
           children={children}
-          data-se={testId}
           id={idOverride}
           inputProps={{
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
+            "data-se": testId,
           }}
+          inputRef={localInputRef}
           name={idOverride}
           multiple={hasMultipleChoices}
           native={true}
@@ -171,6 +201,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         />
       ),
       [
+        autoCompleteType,
         children,
         idOverride,
         inputValues,