chore(clerk-js): Use data-1p-ignore for better UX in Clerk Components with 1password (clerk#2731)

* chore(clerk-js): Use data-1p-ignore for better UX in Clerk Components with 1password

* chore(clerk-js): Use data-1p-ignore for better UX in Clerk Components with 1password

Author: panteliselef

.changeset/curly-cycles-march.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add data-1p-ignore to input fields that do not benefit from password manager suggestions.

packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx

@@ -176,6 +176,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
               onChange={onChangeName}
               isRequired
               autoFocus
+              ignorePasswordManager
             />
           </Form.ControlRow>
           <Form.ControlRow elementId={slugField.id}>
@@ -184,6 +185,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
               onChange={onChangeSlug}
               isRequired
               pattern='^[a-z0-9\-]+$'
+              ignorePasswordManager
             />
           </Form.ControlRow>
           <FormButtonContainer sx={t => ({ marginTop: t.space.$none })}>

packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx

@@ -68,6 +68,7 @@ export const AddDomainForm = withCardStateProvider((props: AddDomainFormProps) =
             <Form.PlainInput
               {...nameField.props}
               autoFocus
+              ignorePasswordManager
               isRequired
             />
           </Form.ControlRow>

packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx

@@ -84,12 +84,14 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
             {...nameField.props}
             autoFocus
             isRequired
+            ignorePasswordManager
           />
         </Form.ControlRow>
         <Form.ControlRow elementId={slugField.id}>
           <Form.PlainInput
             {...slugField.props}
             onChange={onChangeSlug}
+            ignorePasswordManager
           />
         </Form.ControlRow>
         <FormButtons

packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainForm.tsx

@@ -135,6 +135,7 @@ export const VerifyDomainForm = withCardStateProvider((props: VerifyDomainFormPr
               {...emailField.props}
               autoFocus
               groupSuffix={emailDomainSuffix}
+              ignorePasswordManager
             />
           </Form.ControlRow>
           <FormButtons

packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx

@@ -53,7 +53,10 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
         </Col>
 
         <Form.ControlRow elementId={confirmationField.id}>
-          <Form.PlainInput {...confirmationField.props} />
+          <Form.PlainInput
+            {...confirmationField.props}
+            ignorePasswordManager
+          />
         </Form.ControlRow>
         <FormButtons
           submitLabel={localizationKeys('userProfile.deletePage.confirm')}

packages/clerk-js/src/ui/primitives/Input.tsx

@@ -44,7 +44,11 @@ export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVar
 export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const fieldControl = useFormField() || {};
   // @ts-expect-error Typescript is complaining that `errorMessageId` does not exist. We are clearly passing them from above.
-  const { errorMessageId, ...fieldControlProps } = sanitizeInputProps(fieldControl, ['errorMessageId']);
+  const { errorMessageId, ignorePasswordManager, ...fieldControlProps } = sanitizeInputProps(fieldControl, [
+    'errorMessageId',
+    'ignorePasswordManager',
+  ]);
+
   const propsWithoutVariants = filterProps({
     ...props,
     hasError: props.hasError || fieldControlProps.hasError,
@@ -66,10 +70,17 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
         }
       : { type };
 
+  const passwordManagerProps = ignorePasswordManager
+    ? {
+        'data-1p-ignore': true,
+      }
+    : undefined;
+
   return (
     <input
       {...rest}
       {...typeProps}
+      {...passwordManagerProps}
       ref={ref}
       onChange={onChange}
       disabled={isDisabled}

packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx

@@ -140,6 +140,7 @@ export const sanitizeInputProps = (
     clearFeedback,
     infoText,
     debouncedFeedback,
+    ignorePasswordManager,
     ...inputProps
   } = obj;
   /* eslint-enable */

packages/clerk-js/src/ui/utils/useFormControl.ts

@@ -60,6 +60,7 @@ type FieldStateProps<Id> = {
   clearFeedback: () => void;
   hasPassedComplexity: boolean;
   isFocused: boolean;
+  ignorePasswordManager?: boolean;
 } & Omit<Options, 'defaultChecked'>;
 
 export type FormControlState<Id = string> = FieldStateProps<Id> & {