Disable aria-autocomplete (#139)

Some browsers like Edge bypass the auto-complete feature via Password
Managers, Wallets etc.
This PR aims to totally disable autofill values stored in the user's
browser

Author: Michele-Masciave

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- hide all browser user profile suggestions when `autoComplete` is set to `off`
+
 ## [3.7.0] - 2025-07-08
 
 ### Added

src/lib/Form.tsx

@@ -75,11 +75,12 @@ const Form = <T extends FieldValues>({
     ? (JSON.parse(JSON.stringify(defaultValues), jsonIsoDateReviver) as DeepPartial<T>)
     : defaultValues;
 
+  const disableAriaAutocomplete = autoComplete === "off";
   const formMethods = useForm<T>({ resolver, defaultValues: revivedDefaultValues });
   const autoSubmitHandler = useAutoSubmit({ onSubmit, formMethods, autoSubmitConfig });
 
   return (
-    <FormContext.Provider value={{ requiredFields, disabled, hideValidationMessages, ...formMethods }}>
+    <FormContext.Provider value={{ requiredFields, disabled, hideValidationMessages, disableAriaAutocomplete, ...formMethods }}>
       <form
         ref={(elem) => {
           if (formRef) {
@@ -90,7 +91,9 @@ const Form = <T extends FieldValues>({
         method="POST"
         autoComplete={autoComplete}
       >
-        {children instanceof Function ? children({ ...formMethods, disabled, requiredFields, hideValidationMessages }) : children}
+        {children instanceof Function
+          ? children({ ...formMethods, disabled, requiredFields, hideValidationMessages, disableAriaAutocomplete })
+          : children}
       </form>
     </FormContext.Provider>
   );

src/lib/components/Input/InputInternal.tsx

@@ -37,6 +37,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
     register,
     formState: { errors },
     disabled: formDisabled,
+    disableAriaAutocomplete,
   } = useFormContext();
 
   const { ref, ...rest } = register(name, {
@@ -59,6 +60,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
           }
           ref(elem);
         }}
+        aria-autocomplete={disableAriaAutocomplete ? "none" : undefined}
         min={rangeMin}
         max={rangeMax}
         minLength={minLength}

src/lib/context/FormContext.tsx

@@ -5,6 +5,7 @@ export interface FormContextProps<T extends FieldValues> extends UseFormReturn<T
   requiredFields: FieldPath<T>[];
   disabled: boolean;
   hideValidationMessages: boolean;
+  disableAriaAutocomplete: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any