Disable autocomplete on TextInput & InputField (#830)

liquity · Feb 11, 2025 · d116669 · d116669
1 parent 39f55da
commit d116669
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/frontend/uikit/src/Input/TextInput.tsx b/frontend/uikit/src/Input/TextInput.tsx
@@ -2,6 +2,7 @@
 
 import type { ComponentPropsWithoutRef } from "react";
 
+import { useId } from "react";
 import { css, cx } from "../../styled-system/css";
 
 export function TextInput({
@@ -11,13 +12,15 @@ export function TextInput({
 }: Omit<ComponentPropsWithoutRef<"input">, "onChange"> & {
   onChange?: (value: string) => void;
 }) {
+  const id = useId();
   return (
     <input
       type="text"
       {...props}
       onChange={(event) => {
         onChange?.(event.target.value);
       }}
+      name={`input-${id}`}
       className={cx(
         css({
           width: "100%",

diff --git a/frontend/uikit/src/InputField/InputField.tsx b/frontend/uikit/src/InputField/InputField.tsx
@@ -3,8 +3,7 @@
 import type { ReactNode } from "react";
 
 import { a, useSpring, useTransition } from "@react-spring/web";
-import { useEffect, useState } from "react";
-import { forwardRef, useId, useRef } from "react";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { css, cx } from "../../styled-system/css";
 import { IconCross } from "../icons";
 import { useElementSize } from "../react-utils";
@@ -248,6 +247,7 @@ const InputField = forwardRef<HTMLInputElement, {
           <input
             ref={ref}
             id={id}
+            name={autoId}
             disabled={disabled}
             onBlur={() => {
               setFocused(false);