Static/AsyncTypeahead innerRef

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- support to specify `innerRef` into `StaticTypeaheadInput` and `AsyncTypeaheadInput`.
+
 ## [3.14.0] - 2025-12-10
 
 ### Added

cypress/cypress/component/Typeahead/AsyncTypeaheadInput.cy.tsx

@@ -929,3 +929,38 @@ it("works with fixed options excluded", () => {
   cy.get("input[type=submit]").click({ force: true });
   cy.get("@onSubmitSpy").should("be.calledOnceWith", { [name]: [] });
 });
+
+it("innerRef works correctly", () => {
+  const { simpleOptions } = generateOptions();
+  const name = faker.random.alpha(10);
+  const options = generateOptions();
+
+  const InputWithRef = () => {
+    const ref = useRef<HTMLInputElement>(null);
+
+    return (
+      <div className="p-4">
+        <Form
+          onSubmit={() => {
+            // Nothing to do
+          }}
+        >
+          <AsyncTypeaheadInput
+            queryFn={async (query: string) => await fetchMock(options.objectOptions, query, false)}
+            autocompleteProps={{ openOnFocus: true }}
+            innerRef={ref}
+            name={name}
+            label={name}
+          />
+          <button title="focus" onClick={() => ref.current?.focus()}>
+            Focus
+          </button>
+        </Form>
+      </div>
+    );
+  };
+
+  cy.mount(<InputWithRef />);
+  cy.get("button[title=focus]").click();
+  cy.get(`#${name}`).should("be.focused");
+});

cypress/cypress/component/Typeahead/StaticTypeaheadInput.cy.tsx

@@ -4,7 +4,7 @@ import { faker, Sex } from "@faker-js/faker";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { generateOptions } from "../../helpers/typeahead";
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 const selectOption = (name: string, text: string) => {
   cy.get(`#${name}`).clear();
@@ -593,3 +593,31 @@ it("works with fixed options excluded", () => {
   cy.get("input[type=submit]").click({ force: true });
   cy.get("@onSubmitSpy").should("be.calledOnceWith", { [name]: [] });
 });
+
+it("innerRef works correctly", () => {
+  const { simpleOptions } = generateOptions();
+  const name = faker.random.alpha(10);
+
+  const InputWithRef = () => {
+    const ref = useRef<HTMLInputElement>(null);
+
+    return (
+      <div className="p-4">
+        <Form
+          onSubmit={() => {
+            // Nothing to do
+          }}
+        >
+          <StaticTypeaheadInput autocompleteProps={{ openOnFocus: true }} innerRef={ref} name={name} label={name} options={simpleOptions} />
+          <button title="focus" onClick={() => ref.current?.focus()}>
+            Focus
+          </button>
+        </Form>
+      </div>
+    );
+  };
+
+  cy.mount(<InputWithRef />);
+  cy.get("button[title=focus]").click();
+  cy.get(`#${name}`).should("be.focused");
+});

src/lib/AsyncTypeaheadInput.tsx

@@ -39,6 +39,7 @@ interface AsyncTypeaheadInputProps<T extends FieldValues> extends CommonTypeahea
 const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputProps<T>) => {
   const {
     inputRef,
+    innerRef,
     multiple,
     disabled,
     variant,
@@ -227,7 +228,12 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
             loadMoreOptions={loadMoreOptions}
             setPage={setPage}
             {...params}
-            inputRef={(elem) => ref(elem)}
+            inputRef={(elem) => {
+              if (innerRef) {
+                innerRef.current = elem as HTMLInputElement;
+              }
+              ref(elem);
+            }}
           />
         )}
         renderTags={createTagRenderer(fixedOptions, autocompleteProps)}

src/lib/StaticTypeaheadInput.tsx

@@ -65,6 +65,7 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
     autocompleteProps,
     fixedOptions,
     withFixedOptionsInValue = true,
+    innerRef,
   } = props;
 
   const [page, setPage] = useState(1);
@@ -192,7 +193,12 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
             loadMoreOptions={loadMoreOptions}
             setPage={setPage}
             {...params}
-            inputRef={(elem) => ref(elem)}
+            inputRef={(elem) => {
+              if (innerRef) {
+                innerRef.current = elem as HTMLInputElement;
+              }
+              ref(elem);
+            }}
           />
         )}
         renderTags={createTagRenderer(fixedOptions, autocompleteProps)}

src/lib/types/Typeahead.ts

@@ -1,4 +1,4 @@
-import { ReactNode, SyntheticEvent } from "react";
+import { MutableRefObject, ReactNode, SyntheticEvent } from "react";
 import { FieldValues } from "react-hook-form";
 import { CommonInputProps } from "./CommonInputProps";
 import { LabelValueOption } from "./LabelValueOption";
@@ -24,6 +24,7 @@ interface CommonTypeaheadProps<T extends FieldValues>
   useBootstrapStyle?: boolean;
   fixedOptions?: TypeaheadOptions;
   withFixedOptionsInValue?: boolean;
+  innerRef?: MutableRefObject<HTMLInputElement | null>;
   getOptionDisabled?: (option: TypeaheadOption) => boolean;
   onChange?: (selected: string | string[]) => void;
   onInputChange?: (text: string, reason: AutocompleteInputChangeReason) => void;
@@ -53,6 +54,7 @@ type AsyncTypeaheadAutocompleteProps = Omit<
   | "getOptionDisabled"
   | "autoSelect"
   | "autoHighlight"
+  | "ref"
 >;
 
 type StaticTypeaheadAutocompleteProps = Omit<
@@ -76,6 +78,7 @@ type StaticTypeaheadAutocompleteProps = Omit<
   | "onChange"
   | "autoSelect"
   | "autoHighlight"
+  | "ref"
 >;
 
 export { CommonTypeaheadProps, AsyncTypeaheadAutocompleteProps, StaticTypeaheadAutocompleteProps };