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 <[email protected]>

.changeset/smooth-roses-rush.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/password-field': patch
+---
+
+Fix password visibility in Disabled and ReadOnly states

packages/components/fields/password-field/src/password-field.spec.js

@@ -141,13 +141,68 @@ 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', () => {
   it('should disable the input', () => {
     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', () => {

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 && (
             <FlatButton
               icon={isPasswordVisible ? <EyeCrossedIcon /> : <EyeIcon />}
               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}