From fdad0424eb8846361ff79d4cdc87a46c304f163e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Fri, 12 Jul 2024 21:17:21 +0800
Subject: [PATCH] fix(input): disable password toggle when input disabled
 (#2991)

---
 src/input/Input.tsx                |  1 +
 src/input/__tests__/input.test.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index 6697ec89ea..284c230904 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -279,6 +279,7 @@ const Input = forwardRefWithStatics(
     );
 
     function togglePasswordVisible() {
+      if (disabled) return;
       const toggleType = renderType === 'password' ? 'text' : 'password';
       setRenderType(toggleType);
     }
diff --git a/src/input/__tests__/input.test.tsx b/src/input/__tests__/input.test.tsx
index e7153f9981..070915c6ed 100644
--- a/src/input/__tests__/input.test.tsx
+++ b/src/input/__tests__/input.test.tsx
@@ -90,8 +90,19 @@ describe('Input 组件测试', () => {
     expect(queryByPlaceholderText(InputPlaceholder).disabled).toBeTruthy();
   });
   test('password', async () => {
-    const { queryByPlaceholderText } = render(<Input placeholder={InputPlaceholder} type="password" />);
+    const { queryByPlaceholderText, container } = render(<Input placeholder={InputPlaceholder} type="password" />);
     expect(queryByPlaceholderText(InputPlaceholder).type).toEqual('password');
+
+    expect(container.querySelector('.t-icon-browse-off')).toBeTruthy();
+    fireEvent.click(container.querySelector('.t-input__suffix-clear'));
+    expect(container.querySelector('.t-icon-browse')).toBeTruthy();
+  });
+  test('password can be toggle when disabled', async () => {
+    const { container } = render(<Input placeholder={InputPlaceholder} type="password" disabled />);
+
+    expect(container.querySelector('.t-icon-browse-off')).toBeTruthy();
+    fireEvent.click(container.querySelector('.t-input__suffix-clear'));
+    expect(container.querySelector('.t-icon-browse-off')).toBeTruthy();
   });
   test('status', async () => {
     const { container } = render(<Input placeholder={InputPlaceholder} status="error" />);