chore: add autocomplete for inputs - name, phone, location (#24422)

* add autocomplete for inputs - name, phone, location

* Addressed coderabits comments

* autocomplete for email and url

---------

Co-authored-by: Anik Dhabal Babu <[email protected]>

Author: dhairyashiil

packages/features/components/phone-input/PhoneInput.tsx

@@ -68,6 +68,7 @@ function BasePhoneInput({
         name,
         required: rest.required,
         placeholder: rest.placeholder,
+        autoComplete: "tel",
       }}
       onChange={(val: string) => {
         onChange(`+${val}`);
@@ -118,6 +119,7 @@ function BasePhoneInputWeb({
         name,
         required: rest.required,
         placeholder: rest.placeholder,
+        autoComplete: "tel",
       }}
       onChange={(val: string) => {
         onChange(`+${val}`);

packages/features/form-builder/Components.tsx

@@ -145,6 +145,7 @@ export const Components: Record<FieldType, Component> = {
             value={value}
             required={variantField.required}
             type="text"
+            autoComplete="name"
             onChange={(e) => {
               props.setValue(e.target.value);
             }}
@@ -174,6 +175,13 @@ export const Components: Record<FieldType, Component> = {
               value={value[variantField.name as keyof typeof value]}
               required={variantField.required}
               type="text"
+              autoComplete={
+                variantField.name === "firstName"
+                  ? "given-name"
+                  : variantField.name === "lastName"
+                  ? "family-name"
+                  : undefined
+              }
               onChange={(e) => onChange(variantField.name, e.target.value)}
             />
           ))}
@@ -211,6 +219,7 @@ export const Components: Record<FieldType, Component> = {
           type="email"
           id={props.name}
           noLabel={true}
+          autoComplete="email"
           {...props}
           onChange={(e) => props.setValue(e.target.value)}
         />
@@ -543,7 +552,7 @@ export const Components: Record<FieldType, Component> = {
   url: {
     propsType: propsTypes.url,
     factory: (props) => {
-      return <Widgets.TextWidget type="url" noLabel={true} {...props} />;
+      return <Widgets.TextWidget type="url" autoComplete="url" noLabel={true} {...props} />;
     },
   },
 } as const;

packages/ui/components/address/AddressInput.tsx

@@ -22,6 +22,7 @@ function AddressInput({ value, onChange, ...rest }: AddressInputProps) {
       />
       <Input
         {...rest}
+        autoComplete="address-line1"
         value={value}
         onChange={(e) => {
           onChange(e.target.value);