feat(password-input): allow toggling password visibility when readonly is true

packages/react/src/components/TextInput/PasswordInput.tsx

@@ -375,7 +375,7 @@ const PasswordInput = React.forwardRef(
           <button
             type="button"
             className={passwordVisibilityToggleClasses}
-            disabled={disabled || readOnly}
+            disabled={disabled}
             onClick={handleTogglePasswordVisibility}>
             {passwordVisibilityIcon}
           </button>

packages/react/src/components/TextInput/__tests__/PasswordInput-test.js

@@ -377,7 +377,7 @@ describe('PasswordInput', () => {
       expect(inputElement).toHaveAttribute('readonly');
     });
 
-    it('should disable hide toggle button when readOnly is true', () => {
+    it('should not disable hide toggle button when readOnly is true', () => {
       const { getByRole } = render(
         <PasswordInput
           id="input-1"
@@ -387,7 +387,25 @@ describe('PasswordInput', () => {
         />
       );
       const toggleButton = getByRole('button');
-      expect(toggleButton).toBeDisabled();
+      expect(toggleButton).not.toBeDisabled();
+    });
+
+    it('should allow toggling password visibility when readOnly is true', async () => {
+      render(
+        <PasswordInput
+          id="input-1"
+          labelText="TextInput label"
+          hidePasswordLabel="Hide Password"
+          showPasswordLabel="Show Password"
+          readOnly
+        />
+      );
+
+      await userEvent.click(screen.getByRole('button'));
+      expect(screen.getByText('Hide Password')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('button'));
+      expect(screen.getByText('Show Password')).toBeInTheDocument();
     });
 
     it('should not allow input change when readOnly is true', () => {

packages/web-components/src/components/password-input/__tests__/password-input-test.js

@@ -179,14 +179,34 @@ describe('cds-password-input', () => {
     expect(input.readOnly).to.be.true;
   });
 
-  it('should disable hide/show password toggle button when readonly is true', async () => {
+  it('should not disable hide/show password toggle button when readonly is true', async () => {
     const el = await fixture(html`
       <cds-password-input readonly></cds-password-input>
     `);
     await el.updateComplete;
 
     const toggleButton = el.shadowRoot.querySelector('button[type="button"]');
-    expect(toggleButton.disabled).to.be.true;
+    expect(toggleButton.disabled).to.be.false;
+  });
+
+  it('should allow toggling password visibility when readonly is true', async () => {
+    const el = await fixture(html`
+      <cds-password-input
+        hide-password-label="Hide Password"
+        show-password-label="Show Password"></cds-password-input>
+    `);
+    const btn = el.shadowRoot.querySelector('button');
+    const tooltipContent = el.shadowRoot.querySelector(
+      'cds-tooltip-content#content'
+    );
+
+    btn.click();
+    await el.updateComplete;
+    expect(tooltipContent.textContent.trim()).to.equal('Hide Password');
+
+    btn.click();
+    await el.updateComplete;
+    expect(tooltipContent.textContent.trim()).to.equal('Show Password');
   });
 
   it('should not allow input change when readOnly is true', async () => {

packages/web-components/src/components/password-input/password-input.scss

@@ -38,6 +38,27 @@ $css--plex: true !default;
   ::slotted(#{$prefix}-slug:not([revert-active])) {
     transform: translateY(-50%);
   }
+
+  #{$prefix}-tooltip::part(popover-container) {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--btn--icon-only {
+    border: none;
+    background-color: transparent;
+    block-size: 100%;
+    cursor: pointer;
+    inline-size: 100%;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--text-input--password__visibility__toggle svg {
+    pointer-events: none;
+  }
 }
 
 :host(#{$prefix}-password-input[warn]),
@@ -56,20 +77,3 @@ $css--plex: true !default;
     position: relative;
   }
 }
-
-#{$prefix}-tooltip::part(popover-container) {
-  block-size: 100%;
-  inline-size: 100%;
-}
-
-.#{$prefix}--btn--icon-only {
-  border: none;
-  background-color: transparent;
-  block-size: 100%;
-  cursor: pointer;
-  inline-size: 100%;
-
-  &:focus {
-    @include focus-outline('outline');
-  }
-}

packages/web-components/src/components/password-input/password-input.ts

@@ -108,7 +108,7 @@ class CDSPasswordInput extends CDSTextInput {
    * Handles password visibility toggle button click
    */
   private handleTogglePasswordVisibility() {
-    if (this.disabled || this.readonly) return;
+    if (this.disabled) return;
     this.type =
       this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;
   }
@@ -295,9 +295,9 @@ class CDSPasswordInput extends CDSTextInput {
             <cds-tooltip
               align="${align}"
               class="${passwordVisibilityTooltipClasses}"
-              ?disabled="${normalizedProps.disabled || readonly}">
+              ?disabled="${normalizedProps.disabled}">
               <button
-                ?disabled="${normalizedProps.disabled || readonly}"
+                ?disabled="${normalizedProps.disabled}"
                 type="button"
                 role="button"
                 class="${passwordVisibilityButtonClasses}"
@@ -307,7 +307,7 @@ class CDSPasswordInput extends CDSTextInput {
               </button>
               <cds-tooltip-content
                 id="content"
-                ?hidden="${normalizedProps.disabled || readonly}">
+                ?hidden="${normalizedProps.disabled}">
                 ${passwordIsVisible
                   ? this.hidePasswordLabel
                   : this.showPasswordLabel}