feat: autocomplete

Author: bbohlender

examples/auth/src/components/user-auth-form.tsx

@@ -9,8 +9,8 @@ export function UserAuthForm(props: React.ComponentPropsWithoutRef<typeof Contai
     <Container flexDirection="column" gap={24} {...props}>
       <Container flexDirection="column" gap={8}>
         <Container flexDirection="column" gap={4}>
-          <Input placeholder="name@example.com" />
-          <Input type="password" placeholder="password" />
+          <Input autocomplete="email" placeholder="name@example.com" />
+          <Input autocomplete="current-password" type="password" placeholder="password" />
         </Container>
         <Button>
           <Text>Sign In with Email</Text>

packages/kits/apfel/src/input.tsx

@@ -30,6 +30,7 @@ export const Input: (props: InputProperties & RefAttributes<ContainerRef>) => Re
       tabIndex,
       disabled,
       type,
+      autocomplete,
       ...props
     },
     ref,
@@ -79,6 +80,7 @@ export const Input: (props: InputProperties & RefAttributes<ContainerRef>) => Re
             )}
             <InputImpl
               ref={setInternal}
+              autocomplete={autocomplete}
               height="100%"
               width="100%"
               verticalAlign="center"

packages/kits/default/src/input.tsx

@@ -18,7 +18,18 @@ type _InputProperties = InputProperties
 
 export const Input: (props: InputProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
   (
-    { panelMaterialClass, value, defaultValue, onValueChange, tabIndex, disabled, placeholder, type, ...props },
+    {
+      autocomplete,
+      panelMaterialClass,
+      value,
+      defaultValue,
+      onValueChange,
+      tabIndex,
+      disabled,
+      placeholder,
+      type,
+      ...props
+    },
     ref,
   ) => {
     const [internal, setInternal] = useState<InputInternals | null>(null)
@@ -43,6 +54,7 @@ export const Input: (props: InputProperties & RefAttributes<ContainerRef>) => Re
         >
           <InputImpl
             ref={setInternal}
+            autocomplete={autocomplete}
             borderRadius={borderRadius.md}
             backgroundColor={colors.background}
             borderColor={colors.input}

packages/uikit/src/components/input.ts

@@ -68,7 +68,8 @@ export type InheritableInputProperties = WithClasses<
             DisabledProperties &
             VisibilityProperties &
             UpdateMatrixWorldProperties &
-            PointerEventsProperties
+            PointerEventsProperties &
+            AutocompleteProperties
         >
       >
     >
@@ -79,6 +80,10 @@ export type DisabledProperties = {
   disabled?: boolean
 }
 
+export type AutocompleteProperties = {
+  autocomplete?: AutoFill
+}
+
 const cancelSet = new Set<unknown>()
 
 function cancelBlur(event: unknown) {
@@ -363,6 +368,7 @@ export function setupInput<EM extends ThreeEventMap = ThreeEventMap>(
     state.type,
     state.disabled,
     computedNonInheritableProperty(style, properties, 'tabIndex', 0),
+    computedNonInheritableProperty<AutoFill>(style, properties, 'autocomplete', ''),
     abortSignal,
   )
 
@@ -507,6 +513,7 @@ function setupHtmlInputElement(
   type: Signal<InputType>,
   disabled: Signal<boolean>,
   tabIndex: Signal<number>,
+  autocomplete: Signal<AutoFill>,
   abortSignal: AbortSignal,
 ) {
   document.body.appendChild(element)
@@ -515,6 +522,7 @@ function setupHtmlInputElement(
   abortableEffect(() => void (element.value = value.value), abortSignal)
   abortableEffect(() => void (element.disabled = disabled.value), abortSignal)
   abortableEffect(() => void (element.tabIndex = tabIndex.value), abortSignal)
+  abortableEffect(() => void (element.autocomplete = autocomplete.value), abortSignal)
   abortableEffect(() => element.setAttribute('type', type.value), abortSignal)
 }