From bf37b20527031bd75bb09a3d615c50c8200b719e Mon Sep 17 00:00:00 2001 From: QdabuliuQ <69883552+QdabuliuQ@users.noreply.github.com> Date: Sat, 12 Jul 2025 10:36:46 +0800 Subject: [PATCH] feat[input.password]: Input.Password support suffix property (#54342) --- components/input/Password.tsx | 12 +++- components/input/__tests__/Password.test.tsx | 13 ++++ .../__snapshots__/demo-extend.test.ts.snap | 60 ++++++++++++++++++- .../__snapshots__/demo.test.tsx.snap | 60 ++++++++++++++++++- components/input/demo/presuffix.md | 4 +- components/input/demo/presuffix.tsx | 8 ++- 6 files changed, 151 insertions(+), 6 deletions(-) diff --git a/components/input/Password.tsx b/components/input/Password.tsx index abba20f10d..609c6c6093 100644 --- a/components/input/Password.tsx +++ b/components/input/Password.tsx @@ -25,6 +25,10 @@ export interface PasswordProps extends InputProps { readonly inputPrefixCls?: string; readonly action?: 'click' | 'hover'; visibilityToggle?: boolean | VisibilityToggle; + /** + * @since 5.27.0 + */ + suffix?: React.ReactNode; iconRender?: (visible: boolean) => React.ReactNode; } @@ -41,6 +45,7 @@ const Password = React.forwardRef((props, ref) => { action = 'click', visibilityToggle = true, iconRender = defaultIconRender, + suffix, } = props; // ===================== Disabled ===================== @@ -126,7 +131,12 @@ const Password = React.forwardRef((props, ref) => { type: visible ? 'text' : 'password', className: inputClassName, prefixCls: inputPrefixCls, - suffix: suffixIcon, + suffix: ( + <> + {suffixIcon} + {suffix} + + ), }; if (size) { diff --git a/components/input/__tests__/Password.test.tsx b/components/input/__tests__/Password.test.tsx index 57c45d5fae..09277bbba7 100644 --- a/components/input/__tests__/Password.test.tsx +++ b/components/input/__tests__/Password.test.tsx @@ -7,6 +7,7 @@ import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import Password from '../Password'; +import { LockOutlined } from '@ant-design/icons'; describe('Input.Password', () => { focusTest(Input.Password, { refFocus: true }); @@ -153,4 +154,16 @@ describe('Input.Password', () => { fireEvent.click(container.querySelector('.ant-input-password-icon')!); expect(handlePasswordVisibleChange).toHaveBeenCalledTimes(2); }); + + it('should support suffix', () => { + const { container } = render(} />); + expect(container.querySelector('.anticon')).toBeTruthy(); + }); + + it('should support custom icon by suffix', () => { + const { container } = render( + custom icon} />, + ); + expect(container.querySelector('.custom-icon')).toBeTruthy(); + }); }); diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index 72b98dc39c..c0bbb4f929 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`renders components/input/demo/addon.tsx extend context correctly 1`] = `
, +
, +
, + + + + + + + + + + + , ] `; diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap index 779b44b9c2..2201ec399e 100644 --- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`renders components/input/demo/addon.tsx correctly 1`] = `
, +
, +
, + + + + + + + + + + + , ] `; diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md index eacdb14d76..4201629c02 100644 --- a/components/input/demo/presuffix.md +++ b/components/input/demo/presuffix.md @@ -1,7 +1,7 @@ ## zh-CN -在输入框上添加前缀或后缀图标。 +在输入框上添加前缀或后缀图标。注意：Input.Password 的 `suffix` 属性在 `>=5.27.0` 版本支持。 ## en-US -Add a prefix or suffix icons inside input. +Add a prefix or suffix icons inside input. Note: The `suffix` prop for Input.Password is supported starting from version `5.27.0`. diff --git a/components/input/demo/presuffix.tsx b/components/input/demo/presuffix.tsx index db5f6b847a..40f3183b1a 100644 --- a/components/input/demo/presuffix.tsx +++ b/components/input/demo/presuffix.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons'; +import { InfoCircleOutlined, UserOutlined, LockOutlined } from '@ant-design/icons'; import { Input, Tooltip } from 'antd'; const App: React.FC = () => ( @@ -19,6 +19,12 @@ const App: React.FC = () => (

+
+
+ } // `suffix` available since `5.27.0` + placeholder="input password support suffix" + /> );