diff --git a/docs/examples/addon.tsx b/docs/examples/addon.tsx index f461ce5..7f9b884 100644 --- a/docs/examples/addon.tsx +++ b/docs/examples/addon.tsx @@ -1,7 +1,7 @@ +import Input from 'rc-input'; import type { FC } from 'react'; import React from 'react'; import '../../assets/index.less'; -import Input from 'rc-input'; const Demo: FC = () => { return ( diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx index d3a1740..5d18647 100644 --- a/src/BaseInput.tsx +++ b/src/BaseInput.tsx @@ -33,6 +33,7 @@ const BaseInput = React.forwardRef((props, ref) => { dataAttrs, styles, components, + onClear, } = props; const inputElement = children ?? inputEl; @@ -80,7 +81,10 @@ const BaseInput = React.forwardRef((props, ref) => { clearIcon = ( { + handleReset?.(event); + onClear?.(); + }} // Do not trigger onBlur when clear input // https://github.com/ant-design/ant-design/issues/31200 onMouseDown={(e) => e.preventDefault()} diff --git a/src/Input.tsx b/src/Input.tsx index a755d03..261f14d 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -8,7 +8,8 @@ import React, { useRef, useState, } from 'react'; -import BaseInput, { HolderRef } from './BaseInput'; +import type { HolderRef } from './BaseInput'; +import BaseInput from './BaseInput'; import useCount from './hooks/useCount'; import type { ChangeEventInfo, InputProps, InputRef } from './interface'; import type { InputFocusOptions } from './utils/commonUtils'; diff --git a/src/interface.ts b/src/interface.ts index 8b3adcc..b6243e1 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -52,6 +52,7 @@ export interface BaseInputProps extends CommonInputProps { triggerFocus?: () => void; readOnly?: boolean; handleReset?: MouseEventHandler; + onClear?: () => void; hidden?: boolean; dataAttrs?: { affixWrapper?: DataAttr; @@ -136,6 +137,7 @@ export interface InputProps count?: CSSProperties; }; count?: CountConfig; + onClear?: () => void; } export interface InputRef { diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx index 57be9b6..37cb282 100644 --- a/tests/BaseInput.test.tsx +++ b/tests/BaseInput.test.tsx @@ -311,5 +311,18 @@ describe('BaseInput', () => { container.querySelector('.rc-input-group-wrapper'), ); }); + + it('support onClear', () => { + const onClear = jest.fn(); + const { container } = render( + + + , + ); + fireEvent.click( + container.querySelector('.rc-input-clear-icon')!, + ); + expect(onClear).toHaveBeenCalled(); + }); }); }); diff --git a/tests/index.test.tsx b/tests/index.test.tsx index a9c1e72..8d104ab 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -392,6 +392,17 @@ describe('Input ref', () => { expect(ref.current?.input).toBe(inputEl); expect(ref.current?.nativeElement).toBe(inputEl); }); + + it('support onClear', () => { + const onClear = jest.fn(); + const { container } = render( + , + ); + fireEvent.click( + container.querySelector('.rc-input-clear-icon')!, + ); + expect(onClear).toHaveBeenCalled(); + }); }); describe('resolveChange should work', () => {