Redirect to errof field (#145)

Author: manni497

.gitignore

@@ -29,4 +29,7 @@ storybook-static
 .terraform
 terraform
 
-.npmrc
+.npmrc
+
+# Ignore vs folder
+.vs

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix for `StaticTypeaheadInput`, `ColorPicker` and `AsyncTypeaheadInput` to redirect to `input field` in case of error
+
 ## [3.10.0] - 2025-09-05
 
 ### Added

src/lib/AsyncTypeaheadInput.tsx

@@ -225,6 +225,7 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
             loadMoreOptions={loadMoreOptions}
             setPage={setPage}
             {...params}
+            inputRef={(elem) => field.ref(elem)}
           />
         )}
         renderTags={createTagRenderer(fixedOptions, autocompleteProps)}

src/lib/StaticTypeaheadInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { useEffect, useMemo, useState } from "react";
 import { FieldValues, useController } from "react-hook-form";
 import { useSafeNameId } from "src/lib/hooks/useSafeNameId";
@@ -189,6 +190,7 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
             loadMoreOptions={loadMoreOptions}
             setPage={setPage}
             {...params}
+            inputRef={(elem) => field.ref(elem)}
           />
         )}
         renderTags={createTagRenderer(fixedOptions, autocompleteProps)}

src/lib/components/ColorPicker/ColorPicker.tsx

@@ -51,7 +51,9 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
     hideValidationMessages,
   } = useFormContext();
   const focusHandler = useMarkOnFocusHandler(markAllOnFocus);
-  const { field } = useController({
+  const {
+    field: { ref, ...field },
+  } = useController({
     name,
     control,
     rules: {
@@ -115,6 +117,7 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
                 ),
               },
             }}
+            inputRef={ref}
           />
           <Popover
             {...bindPopover(popupState)}

src/lib/components/Typeahead/TypeaheadTextField.tsx

@@ -1,4 +1,4 @@
-import TextField from "@mui/material/TextField";
+import TextField, { BaseTextFieldProps } from "@mui/material/TextField";
 import { textFieldBootstrapStyle } from "../../helpers/mui";
 import InputAdornment from "@mui/material/InputAdornment";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -12,7 +12,8 @@ import { useFormContext } from "../../context/FormContext";
 
 interface TypeaheadTextFieldProps<T extends FieldValues, TRenderAddon>
   extends Omit<CommonTypeaheadProps<T>, "id" | "disabled" | "onChange">,
-    AutocompleteRenderInputParams {
+    AutocompleteRenderInputParams,
+    Pick<BaseTextFieldProps, "inputRef"> {
   isLoading: boolean;
   setPage: React.Dispatch<React.SetStateAction<number>>;
   loadMoreOptions: boolean;