Better autoComplete typings

src/lib/components/RegisterUserProfile.tsx

@@ -149,15 +149,6 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
                             </div>
                             <div className={cx(props.kcInputWrapperClass)}>
                                 <input
-                                    autoComplete={(() => {
-                                        switch (attribute.name) {
-                                            case "password-confirm":
-                                            case "password":
-                                                return "new-password";
-                                            default:
-                                                return undefined;
-                                        }
-                                    })()}
                                     type={(() => {
                                         switch (attribute.name) {
                                             case "password-confirm":
@@ -174,11 +165,7 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
                                     className={cx(props.kcInputClass)}
                                     aria-invalid={displayableErrors.length !== 0}
                                     disabled={attribute.readOnly}
-                                    {...(attribute.autocomplete === undefined
+                                    autoComplete={attribute.autocomplete}
-                                        ? {}
-                                        : {
-                                              "autoComplete": attribute.autocomplete,
-                                          })}
                                     onBlur={onBlurFactory(attribute.name)}
                                 />
                                 {displayableErrors.length !== 0 && (

src/lib/getKcContext/KcContextBase.ts

@@ -217,10 +217,64 @@ export type Attribute = {
     groupDisplayHeader?: string;
     groupDisplayDescription?: string;
     readOnly: boolean;
-    autocomplete?: string;
     validators: Validators;
     annotations: Record<string, string>;
     groupAnnotations: Record<string, string>;
+    autocomplete?:
+        | "on"
+        | "off"
+        | "name"
+        | "honorific-prefix"
+        | "given-name"
+        | "additional-name"
+        | "family-name"
+        | "honorific-suffix"
+        | "nickname"
+        | "email"
+        | "username"
+        | "new-password"
+        | "current-password"
+        | "one-time-code"
+        | "organization-title"
+        | "organization"
+        | "street-address"
+        | "address-line1"
+        | "address-line2"
+        | "address-line3"
+        | "address-level4"
+        | "address-level3"
+        | "address-level2"
+        | "address-level1"
+        | "country"
+        | "country-name"
+        | "postal-code"
+        | "cc-name"
+        | "cc-given-name"
+        | "cc-additional-name"
+        | "cc-family-name"
+        | "cc-number"
+        | "cc-exp"
+        | "cc-exp-month"
+        | "cc-exp-year"
+        | "cc-csc"
+        | "cc-type"
+        | "transaction-currency"
+        | "transaction-amount"
+        | "language"
+        | "bday"
+        | "bday-day"
+        | "bday-month"
+        | "bday-year"
+        | "sex"
+        | "tel"
+        | "tel-country-code"
+        | "tel-national"
+        | "tel-area-code"
+        | "tel-local"
+        | "tel-extension"
+        | "impp"
+        | "url"
+        | "photo";
 };
 
 export type Validators = Partial<{

src/lib/useFormValidationSlice.tsx

@@ -312,6 +312,7 @@ export function useFormValidationSlice(params: {
                                             "validators": passwordValidators,
                                             "annotations": {},
                                             "groupAnnotations": {},
+                                            "autocomplete": "new-password",
                                         }),
                                         id<Attribute>({
                                             "name": "password-confirm",
@@ -328,6 +329,7 @@ export function useFormValidationSlice(params: {
                                             },
                                             "annotations": {},
                                             "groupAnnotations": {},
+                                            "autocomplete": "new-password",
                                         }),
                                     ]),
                           ],