From bca5ba999feeaf2664aaa135c13d947c543ab3c6 Mon Sep 17 00:00:00 2001 From: Serge Stecenko <58188597+serge-st@users.noreply.github.com> Date: Tue, 9 Jan 2024 16:56:16 +0200 Subject: [PATCH] fix(PasswordFiled): fix password readonly visibility (#2677) * fix(PasswordFiled): fix password readonly visibility * test: improve tests for readOnly and disabled states * test: improve test uniformity and coverage * test: fix typo, format and lint the code --------- Co-authored-by: serge-dynamic --- .changeset/smooth-roses-rush.md | 5 ++ .../password-field/src/password-field.spec.js | 55 +++++++++++++++++++ .../password-field/src/password-field.tsx | 5 +- 3 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 .changeset/smooth-roses-rush.md diff --git a/.changeset/smooth-roses-rush.md b/.changeset/smooth-roses-rush.md new file mode 100644 index 0000000000..4c5da4f42d --- /dev/null +++ b/.changeset/smooth-roses-rush.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/password-field': patch +--- + +Fix password visibility in Disabled and ReadOnly states diff --git a/packages/components/fields/password-field/src/password-field.spec.js b/packages/components/fields/password-field/src/password-field.spec.js index 4159cd3122..6c1527756e 100644 --- a/packages/components/fields/password-field/src/password-field.spec.js +++ b/packages/components/fields/password-field/src/password-field.spec.js @@ -141,6 +141,22 @@ describe('when disabled', () => { const { getByLabelText } = renderPasswordField({ isDisabled: true }); expect(getByLabelText('PasswordField')).toBeDisabled(); }); + it('should set the input type to password', () => { + const { getByLabelText } = renderPasswordField({ isDisabled: true }); + expect(getByLabelText('PasswordField')).toHaveAttribute('type', 'password'); + }); + describe('when has value', () => { + it('should set the input type to password', () => { + const { getByLabelText } = renderPasswordField({ + value: 'foo', + isDisabled: true, + }); + expect(getByLabelText('PasswordField')).toHaveAttribute( + 'type', + 'password' + ); + }); + }); }); describe('when readOnly', () => { @@ -148,6 +164,45 @@ describe('when readOnly', () => { const { getByLabelText } = renderPasswordField({ isReadOnly: true }); expect(getByLabelText('PasswordField')).toHaveAttribute('readonly'); }); + it('should set the input type to password', () => { + const { getByLabelText } = renderPasswordField({ isReadOnly: true }); + expect(getByLabelText('PasswordField')).toHaveAttribute('type', 'password'); + }); + describe('when has value', () => { + it('should set the input type to password', () => { + const { getByLabelText } = renderPasswordField({ + value: 'foo', + isReadOnly: true, + }); + expect(getByLabelText('PasswordField')).toHaveAttribute( + 'type', + 'password' + ); + }); + }); +}); + +describe('when disabled and readOnly', () => { + it('should set the input type to password', () => { + const { getByLabelText } = renderPasswordField({ + isDisabled: true, + isReadOnly: true, + }); + expect(getByLabelText('PasswordField')).toHaveAttribute('type', 'password'); + }); + describe('when has value', () => { + it('should set the input type to password', () => { + const { getByLabelText } = renderPasswordField({ + value: 'foo', + isDisabled: true, + isReadOnly: true, + }); + expect(getByLabelText('PasswordField')).toHaveAttribute( + 'type', + 'password' + ); + }); + }); }); describe('when required', () => { diff --git a/packages/components/fields/password-field/src/password-field.tsx b/packages/components/fields/password-field/src/password-field.tsx index e2d7140e5e..3ab1cf6cc1 100644 --- a/packages/components/fields/password-field/src/password-field.tsx +++ b/packages/components/fields/password-field/src/password-field.tsx @@ -176,6 +176,7 @@ const PasswordField = (props: TPasswordField) => { const [isPasswordVisible, togglePasswordVisibility] = useToggleState(false); const id = useFieldId(props.id, sequentialId); const hasError = props.touched && hasErrors(props.errors); + const canInteract = !props.isDisabled && !props.isReadOnly; if (!props.isReadOnly) { warning( @@ -205,7 +206,7 @@ const PasswordField = (props: TPasswordField) => { onInfoButtonClick={props.onInfoButtonClick} hasRequiredIndicator={props.isRequired} /> - {!props.isDisabled && !props.isReadOnly && ( + {canInteract && ( : } label={ @@ -228,7 +229,7 @@ const PasswordField = (props: TPasswordField) => { onBlur={props.onBlur} onFocus={props.onFocus} isAutofocussed={props.isAutofocussed} - isPasswordVisible={isPasswordVisible} + isPasswordVisible={canInteract ? isPasswordVisible : false} isDisabled={props.isDisabled} isReadOnly={props.isReadOnly} hasError={hasError}