fix(ui): correctly thread through the autoComplete attribute from admin config to the text input (#12473)

We've already supported `autoComplete` on admin config for text fields
but it wasn't being threaded through to the text input element so it
couldn't be applied.

Author: paulpopus

packages/ui/src/elements/EmailAndUsername/index.tsx

@@ -52,6 +52,9 @@ export function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps)
         <TextField
           field={{
             name: 'username',
+            admin: {
+              autoComplete: 'off',
+            },
             label: t('authentication:username'),
             required: loginWithUsername && loginWithUsername.requireUsername,
           }}

packages/ui/src/fields/Text/Input.tsx

@@ -25,6 +25,7 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
     description,
     Error,
     hasMany,
+    htmlAttributes,
     inputRef,
     Label,
     label,
@@ -158,6 +159,7 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
             ref={inputRef}
             type="text"
             value={value || ''}
+            {...(htmlAttributes ?? {})}
           />
         )}
         {AfterInput}

packages/ui/src/fields/Text/index.tsx

@@ -21,7 +21,7 @@ const TextFieldComponent: TextFieldClientComponent = (props) => {
   const {
     field,
     field: {
-      admin: { className, description, placeholder, rtl } = {},
+      admin: { autoComplete, className, description, placeholder, rtl } = {},
       hasMany,
       label,
       localized,
@@ -123,6 +123,9 @@ const TextFieldComponent: TextFieldClientComponent = (props) => {
       description={description}
       Error={Error}
       hasMany={hasMany}
+      htmlAttributes={{
+        autoComplete: autoComplete || undefined,
+      }}
       inputRef={inputRef}
       Label={Label}
       label={label}

packages/ui/src/fields/Text/types.ts

@@ -1,5 +1,5 @@
 import type { StaticDescription, StaticLabel } from 'payload'
-import type { ChangeEvent } from 'react'
+import type { ChangeEvent, JSX } from 'react'
 import type React from 'react'
 
 import type { Option, ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'
@@ -21,6 +21,9 @@ export type TextInputProps = {
   readonly Description?: React.ReactNode
   readonly description?: StaticDescription
   readonly Error?: React.ReactNode
+  readonly htmlAttributes?: {
+    autoComplete?: JSX.IntrinsicElements['input']['autoComplete']
+  }
   readonly inputRef?: React.RefObject<HTMLInputElement>
   readonly Label?: React.ReactNode
   readonly label?: StaticLabel