fix(input): disable password toggle when input disabled (#2991)

Tencent · Jul 12, 2024 · fdad042 · fdad042
1 parent 942264d
commit fdad042
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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" />);