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. 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 /> @@ -184,6 +185,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani onChange={onChangeSlug} isRequired pattern='^[a-z0-9\-]+$' + ignorePasswordManager /> ({ 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) = 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 /> - + & StyleVariants((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((props, ref) } : { type }; + const passwordManagerProps = ignorePasswordManager + ? { + 'data-1p-ignore': true, + } + : undefined; + return ( = { clearFeedback: () => void; hasPassedComplexity: boolean; isFocused: boolean; + ignorePasswordManager?: boolean; } & Omit; export type FormControlState = FieldStateProps & {