Support inputRef on Checkbox, Radio, Select, Button, Typography and Link OKTA-670770

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

@@ -17,3 +17,7 @@ export interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {
     FC<WithForwardRefProps<T>>
   >;
 }
+
+export type FocusHandle = {
+  focus: () => void;
+};

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

@@ -12,11 +12,18 @@
 
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { memo, ReactElement, useCallback } from "react";
+import {
+  memo,
+  ReactElement,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react";
 
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 import type { SeleniumProps } from "./SeleniumProps";
+import { FocusHandle } from "./@types/react-augment";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -41,6 +48,10 @@ export type ButtonProps = {
    * The ID of the element that describes the Button
    */
   ariaDescribedBy?: string;
+  /**
+   * The ref forwarded to the Button to expose focus()
+   */
+  buttonFocusRef?: React.RefObject<FocusHandle>;
   /**
    * The icon element to display at the end of the Button
    */
@@ -108,6 +119,7 @@ const Button = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
+  buttonFocusRef,
   endIcon,
   id,
   isDisabled,
@@ -123,6 +135,20 @@ const Button = ({
 }: ButtonProps) => {
   const muiProps = useMuiProps();
 
+  const ref = useRef<HTMLButtonElement>(null);
+  useImperativeHandle(
+    buttonFocusRef,
+    () => {
+      const element = ref.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
   const renderButton = useCallback(
     (muiProps) => (
       <MuiButton
@@ -136,6 +162,7 @@ const Button = ({
         fullWidth={isFullWidth}
         id={id}
         onClick={onClick}
+        ref={ref}
         size={size}
         startIcon={startIcon}
         type={type}

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

@@ -11,7 +11,7 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { memo, useCallback, useMemo, useRef } from "react";
+import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
 import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
@@ -25,6 +25,7 @@ import { Typography } from "./Typography";
 import type { SeleniumProps } from "./SeleniumProps";
 import { ComponentControlledState, getControlState } from "./inputUtils";
 import { CheckedFieldProps } from "./FormCheckedProps";
+import { FocusHandle } from "./@types/react-augment";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
@@ -41,6 +42,10 @@ export type CheckboxProps = {
    * The id of the `input` element.
    */
   id?: string;
+  /**
+   * The ref forwarded to the Checkbox to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * Determines whether the Checkbox is disabled
    */
@@ -81,6 +86,7 @@ const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
   id: idOverride,
+  inputFocusRef,
   isChecked,
   isDefaultChecked,
   isDisabled,
@@ -109,6 +115,20 @@ const Checkbox = ({
     return { defaultChecked: isDefaultChecked };
   }, [isDefaultChecked, isChecked]);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(
+    inputFocusRef,
+    () => {
+      const element = inputRef.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
   const label = useMemo(() => {
     return (
       <>
@@ -158,6 +178,7 @@ const Checkbox = ({
           indeterminate={isIndeterminate}
           onChange={onChange}
           required={isRequired}
+          inputRef={inputRef}
           sx={() => ({
             marginBlockStart: "2px",
           })}

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

@@ -10,11 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement } from "react";
+import { memo, ReactElement, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
 import type { SeleniumProps } from "./SeleniumProps";
 
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
+import { FocusHandle } from "./@types/react-augment";
 
 export const linkVariantValues = ["default", "monochrome"] as const;
 
@@ -31,6 +32,10 @@ export type LinkProps = {
    * An optional Icon component at the start of the Link
    */
   icon?: ReactElement;
+  /**
+   * The ref forwarded to the TextField to expose focus()
+   */
+  linkFocusRef?: React.RefObject<FocusHandle>;
   /**
    * The click event handler for the Link
    */
@@ -58,31 +63,49 @@ const Link = ({
   children,
   href,
   icon,
+  linkFocusRef,
   rel,
   target,
   testId,
   variant,
   onClick,
-}: LinkProps) => (
-  <MuiLink
-    data-se={testId}
-    href={href}
-    rel={rel}
-    target={target}
-    variant={variant}
-    onClick={onClick}
-  >
-    {icon && <span className="Link-icon">{icon}</span>}
+}: LinkProps) => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  useImperativeHandle(
+    linkFocusRef,
+    () => {
+      const element = ref.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
+  return (
+    <MuiLink
+      data-se={testId}
+      href={href}
+      ref={ref}
+      rel={rel}
+      target={target}
+      variant={variant}
+      onClick={onClick}
+    >
+      {icon && <span className="Link-icon">{icon}</span>}
 
-    {children}
+      {children}
 
-    {target === "_blank" && (
-      <span className="Link-indicator" role="presentation">
-        <ExternalLinkIcon />
-      </span>
-    )}
-  </MuiLink>
-);
+      {target === "_blank" && (
+        <span className="Link-indicator" role="presentation">
+          <ExternalLinkIcon />
+        </span>
+      )}
+    </MuiLink>
+  );
+};
 
 const MemoizedLink = memo(Link);
 

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

@@ -17,6 +17,7 @@ import {
   forwardRef,
   memo,
   useCallback,
+  useImperativeHandle,
   useRef,
   useState,
 } from "react";
@@ -27,6 +28,7 @@ import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 import { useTranslation } from "react-i18next";
 import { getControlState, useInputValues } from "./inputUtils";
+import { FocusHandle } from "./@types/react-augment";
 
 export type PasswordFieldProps = {
   /**
@@ -47,6 +49,10 @@ export type PasswordFieldProps = {
    * If `true`, the show/hide icon is not shown to the user
    */
   hasShowPassword?: boolean;
+  /**
+   * The ref forwarded to the TextField to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * The label for the `input` element.
    */
@@ -83,6 +89,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       hasInitialFocus,
       hint,
       id: idOverride,
+      inputFocusRef,
       isDisabled = false,
       isFullWidth = false,
       isOptional = false,
@@ -120,6 +127,20 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       controlState: controlledStateRef.current,
     });
 
+    const inputRef = useRef<HTMLInputElement>(null);
+    useImperativeHandle(
+      inputFocusRef,
+      () => {
+        const element = inputRef.current;
+        return {
+          focus: () => {
+            element && element.focus();
+          },
+        };
+      },
+      []
+    );
+
     const onChange = useCallback<
       ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>
     >(
@@ -161,6 +182,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
             // role: "textbox" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.
             role: "textbox",
           }}
+          inputRef={inputRef}
           name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}

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

@@ -16,12 +16,17 @@ import {
   Radio as MuiRadio,
   RadioProps as MuiRadioProps,
 } from "@mui/material";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useRef, useImperativeHandle } from "react";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
+import { FocusHandle } from "./@types/react-augment";
 
 export type RadioProps = {
+  /**
+   * The ref forwarded to the Radio to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * If `true`, the Radio is selected
    */
@@ -50,6 +55,7 @@ export type RadioProps = {
   SeleniumProps;
 
 const Radio = ({
+  inputFocusRef,
   isChecked,
   isDisabled,
   isInvalid,
@@ -60,6 +66,20 @@ const Radio = ({
   onChange: onChangeProp,
   onBlur: onBlurProp,
 }: RadioProps) => {
+  const ref = useRef<HTMLInputElement>(null);
+  useImperativeHandle(
+    inputFocusRef,
+    () => {
+      const element = ref.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
   const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
     (event, checked) => {
       onChangeProp?.(event, checked);
@@ -78,7 +98,7 @@ const Radio = ({
     <FormControlLabel
       checked={isChecked}
       className={isInvalid ? "Mui-error" : ""}
-      control={<MuiRadio onChange={onChange} />}
+      control={<MuiRadio inputRef={ref} onChange={onChange} />}
       data-se={testId}
       disabled={isDisabled}
       label={label}