add autocomplete to textarea and select (#190)

Author: tim-x-y-z

src/npm-fastui/src/components/FormField.tsx

@@ -51,7 +51,7 @@ interface FormFieldTextareaProps extends FormFieldTextarea {
 }
 
 export const FormFieldTextareaComp: FC<FormFieldTextareaProps> = (props) => {
-  const { name, placeholder, required, locked, rows, cols } = props
+  const { name, placeholder, required, locked, rows, cols, autocomplete } = props
   return (
     <div className={useClassName(props)}>
       <Label {...props} />
@@ -66,6 +66,7 @@ export const FormFieldTextareaComp: FC<FormFieldTextareaProps> = (props) => {
         disabled={locked}
         placeholder={placeholder}
         aria-describedby={descId(props)}
+        autoComplete={autocomplete}
       />
       <ErrorDescription {...props} />
     </div>
@@ -141,7 +142,7 @@ export const FormFieldSelectComp: FC<FormFieldSelectProps> = (props) => {
 }
 
 export const FormFieldSelectVanillaComp: FC<FormFieldSelectProps> = (props) => {
-  const { name, required, locked, options, multiple, initial, placeholder, onChange } = props
+  const { name, required, locked, options, multiple, initial, placeholder, onChange, autocomplete } = props
 
   const className = useClassName(props)
   const classNameSelect = useClassName(props, { el: 'select' })
@@ -159,6 +160,7 @@ export const FormFieldSelectVanillaComp: FC<FormFieldSelectProps> = (props) => {
         aria-describedby={descId(props)}
         placeholder={placeholder}
         onChange={() => onChange && onChange()}
+        autoComplete={autocomplete}
       >
         {multiple ? null : <option></option>}
         {options.map((option, i) => (

src/npm-fastui/src/models.d.ts

@@ -366,6 +366,7 @@ export interface FormFieldTextarea {
   cols?: number
   initial?: string
   placeholder?: string
+  autocomplete?: string
   type: 'FormFieldTextarea'
 }
 export interface FormFieldBoolean {
@@ -408,6 +409,7 @@ export interface FormFieldSelect {
   initial?: string[] | string
   vanilla?: boolean
   placeholder?: string
+  autocomplete?: string
   type: 'FormFieldSelect'
 }
 export interface SelectOption {

src/python-fastui/fastui/components/forms.py

@@ -40,6 +40,7 @@ class FormFieldTextarea(BaseFormField):
     cols: _t.Union[int, None] = None
     initial: _t.Union[str, None] = None
     placeholder: _t.Union[str, None] = None
+    autocomplete: _t.Union[str, None] = None
     type: _t.Literal['FormFieldTextarea'] = 'FormFieldTextarea'
 
 
@@ -61,6 +62,7 @@ class FormFieldSelect(BaseFormField):
     initial: _t.Union[_t.List[str], str, None] = None
     vanilla: _t.Union[bool, None] = None
     placeholder: _t.Union[str, None] = None
+    autocomplete: _t.Union[str, None] = None
     type: _t.Literal['FormFieldSelect'] = 'FormFieldSelect'
 
 

src/python-fastui/fastui/json_schema.py

@@ -257,6 +257,7 @@ def special_string_field(
                 placeholder=schema.get('placeholder'),
                 initial=schema.get('initial'),
                 description=schema.get('description'),
+                autocomplete=schema.get('autocomplete'),
             )
         elif enum := schema.get('enum'):
             enum_labels = schema.get('enum_labels', {})
@@ -269,6 +270,7 @@ def special_string_field(
                 options=[SelectOption(value=v, label=enum_labels.get(v) or as_title(v)) for v in enum],
                 initial=schema.get('default'),
                 description=schema.get('description'),
+                autocomplete=schema.get('autocomplete'),
             )
         elif search_url := schema.get('search_url'):
             return FormFieldSelectSearch(