Skip to content

Commit 6c2d88e

Browse files
panteliselefpanteliselef
authored
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
1 parent edd0fbc commit 6c2d88e

9 files changed

Lines changed: 29 additions & 2 deletions

File tree

‎.changeset/curly-cycles-march.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/clerk-js': patch
3+
---
4+
5+
Add data-1p-ignore to input fields that do not benefit from password manager suggestions.

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
176176
onChange={onChangeName}
177177
isRequired
178178
autoFocus
179+
ignorePasswordManager
179180
/>
180181
</Form.ControlRow>
181182
<Form.ControlRow elementId={slugField.id}>
@@ -184,6 +185,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
184185
onChange={onChangeSlug}
185186
isRequired
186187
pattern='^[a-z0-9\-]+$'
188+
ignorePasswordManager
187189
/>
188190
</Form.ControlRow>
189191
<FormButtonContainer sx={t => ({ marginTop: t.space.$none })}>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export const AddDomainForm = withCardStateProvider((props: AddDomainFormProps) =
6868
<Form.PlainInput
6969
{...nameField.props}
7070
autoFocus
71+
ignorePasswordManager
7172
isRequired
7273
/>
7374
</Form.ControlRow>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,14 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
8484
{...nameField.props}
8585
autoFocus
8686
isRequired
87+
ignorePasswordManager
8788
/>
8889
</Form.ControlRow>
8990
<Form.ControlRow elementId={slugField.id}>
9091
<Form.PlainInput
9192
{...slugField.props}
9293
onChange={onChangeSlug}
94+
ignorePasswordManager
9395
/>
9496
</Form.ControlRow>
9597
<FormButtons

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ export const VerifyDomainForm = withCardStateProvider((props: VerifyDomainFormPr
135135
{...emailField.props}
136136
autoFocus
137137
groupSuffix={emailDomainSuffix}
138+
ignorePasswordManager
138139
/>
139140
</Form.ControlRow>
140141
<FormButtons

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,10 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
5353
</Col>
5454

5555
<Form.ControlRow elementId={confirmationField.id}>
56-
<Form.PlainInput {...confirmationField.props} />
56+
<Form.PlainInput
57+
{...confirmationField.props}
58+
ignorePasswordManager
59+
/>
5760
</Form.ControlRow>
5861
<FormButtons
5962
submitLabel={localizationKeys('userProfile.deletePage.confirm')}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVar
4444
export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
4545
const fieldControl = useFormField() || {};
4646
// @ts-expect-error Typescript is complaining that `errorMessageId` does not exist. We are clearly passing them from above.
47-
const { errorMessageId, ...fieldControlProps } = sanitizeInputProps(fieldControl, ['errorMessageId']);
47+
const { errorMessageId, ignorePasswordManager, ...fieldControlProps } = sanitizeInputProps(fieldControl, [
48+
'errorMessageId',
49+
'ignorePasswordManager',
50+
]);
51+
4852
const propsWithoutVariants = filterProps({
4953
...props,
5054
hasError: props.hasError || fieldControlProps.hasError,
@@ -66,10 +70,17 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
6670
}
6771
: { type };
6872

73+
const passwordManagerProps = ignorePasswordManager
74+
? {
75+
'data-1p-ignore': true,
76+
}
77+
: undefined;
78+
6979
return (
7080
<input
7181
{...rest}
7282
{...typeProps}
83+
{...passwordManagerProps}
7384
ref={ref}
7485
onChange={onChange}
7586
disabled={isDisabled}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export const sanitizeInputProps = (
140140
clearFeedback,
141141
infoText,
142142
debouncedFeedback,
143+
ignorePasswordManager,
143144
...inputProps
144145
} = obj;
145146
/* eslint-enable */

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ type FieldStateProps<Id> = {
6060
clearFeedback: () => void;
6161
hasPassedComplexity: boolean;
6262
isFocused: boolean;
63+
ignorePasswordManager?: boolean;
6364
} & Omit<Options, 'defaultChecked'>;
6465

6566
export type FormControlState<Id = string> = FieldStateProps<Id> & {

0 commit comments

Comments
 (0)