From 8f8d2b3cceb7da03247c97ce730cf31af9916f16 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Tue, 6 Feb 2024 12:11:59 +0200
Subject: [PATCH 1/2] chore(clerk-js): Use data-1p-ignore for better UX in
 Clerk Components with 1password

---
 .../CreateOrganization/CreateOrganizationForm.tsx   |  2 ++
 .../OrganizationProfile/AddDomainForm.tsx           |  1 +
 .../components/OrganizationProfile/ProfileForm.tsx  |  2 ++
 .../OrganizationProfile/VerifyDomainForm.tsx        |  1 +
 .../ui/components/UserProfile/DeleteUserForm.tsx    |  5 ++++-
 packages/clerk-js/src/ui/primitives/Input.tsx       | 13 ++++++++++++-
 .../src/ui/primitives/hooks/useFormControl.tsx      |  1 +
 packages/clerk-js/src/ui/utils/useFormControl.ts    |  1 +
 8 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index b8e9f46369a..c9625fef913 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/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 })}>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx
index 4a066a5b128..bc70f679b5f 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx
+++ b/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>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx
index bf159fdc9ce..af30955a4bc 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx
+++ b/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
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainForm.tsx
index 9f5e47f4515..c3cfaaf28a9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainForm.tsx
+++ b/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
diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx
index ccd89634dcc..7e556eea297 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx
+++ b/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')}
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index 32290d09a10..698f6a84366 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/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}
diff --git a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
index 31f949ecdde..46907b3cb9f 100644
--- a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
+++ b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
@@ -140,6 +140,7 @@ export const sanitizeInputProps = (
     clearFeedback,
     infoText,
     debouncedFeedback,
+    ignorePasswordManager,
     ...inputProps
   } = obj;
   /* eslint-enable */
diff --git a/packages/clerk-js/src/ui/utils/useFormControl.ts b/packages/clerk-js/src/ui/utils/useFormControl.ts
index 9cdf7d9c660..7144a7301f7 100644
--- a/packages/clerk-js/src/ui/utils/useFormControl.ts
+++ b/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> & {

From 4d100aa9999d3b8602bed607064940c7040ce4a4 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Tue, 6 Feb 2024 12:14:06 +0200
Subject: [PATCH 2/2] chore(clerk-js): Use data-1p-ignore for better UX in
 Clerk Components with 1password

---
 .changeset/curly-cycles-march.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/curly-cycles-march.md

diff --git a/.changeset/curly-cycles-march.md b/.changeset/curly-cycles-march.md
new file mode 100644
index 00000000000..da8c49b10c0
--- /dev/null
+++ b/.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.