feat: support onClear (#266)

* chore: bump rc-input from 1.5.0 to 1.6.0

* feat: support onClear

package.json

@@ -50,7 +50,7 @@
     "classnames": "^2.2.6",
     "rc-input": "~1.6.0",
     "rc-menu": "~9.14.0",
-    "rc-textarea": "~1.7.0",
+    "rc-textarea": "~1.8.0",
     "rc-util": "^5.34.1"
   },
   "devDependencies": {

src/Mentions.tsx

@@ -23,11 +23,11 @@ import type { OptionProps } from './Option';
 import Option from './Option';
 import {
   filterOption as defaultFilterOption,
+  validateSearch as defaultValidateSearch,
   getBeforeSelectionText,
   getLastMeasureIndex,
   replaceWithMeasure,
   setInputSelection,
-  validateSearch as defaultValidateSearch,
 } from './util';
 
 type BaseTextareaAttrs = Omit<
@@ -514,6 +514,7 @@ const Mentions = forwardRef<MentionsRef, MentionsProps>(
       classNames: classes,
       className,
       disabled,
+      onClear,
       ...rest
     },
     ref,
@@ -556,6 +557,7 @@ const Mentions = forwardRef<MentionsRef, MentionsProps>(
         classNames={classes}
         disabled={disabled}
         ref={holderRef}
+        onClear={onClear}
       >
         <InternalMentions
           className={classes?.mentions}

tests/AllowClear.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
-import type { TextareaHTMLAttributes } from 'react';
+import React from 'react';
 import Mentions from '../src';
 
 describe('should support allowClear', () => {
@@ -21,12 +21,7 @@ describe('should support allowClear', () => {
 
   it('should not show icon if value is undefined, null or empty string', () => {
     const wrappers = [null, undefined, ''].map(val =>
-      render(
-        <Mentions
-          allowClear
-          value={val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']}
-        />,
-      ),
+      render(<Mentions allowClear value={val as unknown as string} />),
     );
     wrappers.forEach(({ asFragment, container }) => {
       expect(container.querySelector('textarea')?.value).toEqual('');
@@ -39,14 +34,7 @@ describe('should support allowClear', () => {
 
   it('should not show icon if defaultValue is undefined, null or empty string', () => {
     const wrappers = [null, undefined, ''].map(val =>
-      render(
-        <Mentions
-          allowClear
-          defaultValue={
-            val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']
-          }
-        />,
-      ),
+      render(<Mentions allowClear defaultValue={val as unknown as string} />),
     );
     wrappers.forEach(({ asFragment, container }) => {
       expect(container.querySelector('textarea')?.value).toEqual('');
@@ -66,4 +54,15 @@ describe('should support allowClear', () => {
     expect(onChange).toHaveBeenCalledWith('');
     expect(container.querySelector('textarea')?.value).toBe('');
   });
+
+  it('should support onClear', () => {
+    const onClear = jest.fn();
+    const { container } = render(
+      <Mentions onClear={onClear} defaultValue="test" allowClear />,
+    );
+    fireEvent.click(
+      container.querySelector<HTMLSpanElement>('.rc-mentions-clear-icon')!,
+    );
+    expect(onClear).toHaveBeenCalled();
+  });
 });