diff --git a/components/input/Input.tsx b/components/input/Input.tsx index c14d53ce06..f0265af2f6 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -129,7 +129,7 @@ const Input = forwardRef((props, ref) => { onBlur, onFocus, suffix, - clearIcon, + allowClear, ...rest } = props; const { getPrefixCls, direction, input } = React.useContext(ConfigContext); @@ -199,6 +199,14 @@ const Input = forwardRef((props, ref) => { const withPrefixSuffix = hasPrefixSuffix(props) || hasFeedback; + // Allow clear + let mergedAllowClear; + if (typeof allowClear === 'object' && allowClear?.clearIcon) { + mergedAllowClear = allowClear; + } else if (allowClear) { + mergedAllowClear = { clearIcon: }; + } + return ( ((props, ref) => { onBlur={handleBlur} onFocus={handleFocus} suffix={suffixNode} - clearIcon={clearIcon || } + allowClear={mergedAllowClear} inputClassName={classNames( !withPrefixSuffix && { [`${prefixCls}-sm`]: mergedSize === 'small', diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js index 2e661fb892..b5e6c8c20b 100644 --- a/components/input/__tests__/index.test.js +++ b/components/input/__tests__/index.test.js @@ -380,4 +380,9 @@ describe('Input allowClear', () => { wrapper.setProps({ value: false }); expect(wrapper.find('input').first().getDOMNode().value).toBe('false'); }); + + it('should support custom clearIcon', () => { + const wrapper = mount(); + expect(wrapper.find('.ant-input-clear-icon').text()).toBe('clear'); + }); }); diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index 49e6bd8c34..2a563d7a47 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -20,9 +20,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca | --- | --- | --- | --- | --- | | addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | | | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | -| allowClear | If allow to remove input content with clear icon | boolean | false | | +| allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false | | | bordered | Whether has border style | boolean | true | 4.5.0 | -| clearIcon | Icon displayed when `allowClear` is enabled | ReactNode | | 4.19.0 | | defaultValue | The initial input content | string | - | | | disabled | Whether the input is disabled | boolean | false | | | id | The ID for input | string | - | | diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index da4a7d08d5..c745afd66a 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -21,9 +21,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg | --- | --- | --- | --- | --- | | addonAfter | 带标签的 input,设置后置标签 | ReactNode | - | | | addonBefore | 带标签的 input,设置前置标签 | ReactNode | - | | -| allowClear | 可以点击清除图标删除内容 | boolean | - | | +| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | | | bordered | 是否有边框 | boolean | true | 4.5.0 | -| clearIcon | 清除按钮,与 `allowClear` 一同使用 | ReactNode | | 4.19.0 | | defaultValue | 输入框默认内容 | string | - | | | disabled | 是否禁用状态,默认为 false | boolean | false | | | id | 输入框的 id | string | - | | diff --git a/package.json b/package.json index 11c0c0a457..d16a2a6881 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "rc-dropdown": "~3.3.2", "rc-field-form": "~1.23.0", "rc-image": "~5.2.5", - "rc-input": "^0.0.1-alpha.4", + "rc-input": "^0.0.1-alpha.5", "rc-input-number": "~7.3.0", "rc-mentions": "~1.6.1", "rc-menu": "~9.2.1",