feat: support mentions onece delete

components/mentions/__tests__/index.test.tsx

@@ -5,6 +5,7 @@ import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render } from '../../../tests/utils';
+import KeyCode from 'rc-util/lib/KeyCode';
 
 const { getMentions } = Mentions;
 
@@ -95,6 +96,33 @@ describe('Mentions', () => {
     expect(textareaInstance.value).toEqual('');
   });
 
+  it('should delete last item when Delete key is pressed', () => {
+    const { getByRole } = render(
+      <Mentions
+        style={{ width: '100%' }}
+        defaultValue="@afc163@zombieJ"
+        itemOnceDelete
+        options={[
+          {
+            value: 'afc163',
+            label: 'afc163',
+          },
+          {
+            value: 'zombieJ',
+            label: 'zombieJ',
+          },
+          {
+            value: 'yesmeck',
+            label: 'yesmeck',
+          },
+        ]}
+      />,
+    );
+    const textarea = getByRole('textbox') as HTMLTextAreaElement;
+    fireEvent.keyDown(textarea, { key: 'Delete', keyCode: KeyCode.BACKSPACE });
+    expect(textarea.value).toBe('@afc163');
+  });
+
   it('should support custom clearIcon', () => {
     const { container } = render(<Mentions allowClear={{ clearIcon: 'clear' }} />);
     expect(container.querySelector('.ant-mentions-clear-icon')?.textContent).toBe('clear');

components/mentions/demo/onceDelete.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+一次删除按键删除。
+
+## en-US
+
+Once Delete.

components/mentions/demo/onceDelete.tsx

@@ -0,0 +1,27 @@
+import { Mentions } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <Mentions
+      style={{ width: '100%' }}
+      defaultValue="@afc163@zombieJ"
+      itemOnceDelete
+      options={[
+        {
+          value: 'afc163',
+          label: 'afc163',
+        },
+        {
+          value: 'zombieJ',
+          label: 'zombieJ',
+        },
+        {
+          value: 'yesmeck',
+          label: 'yesmeck',
+        },
+      ]} 
+    />
+  );
+};
+
+export default App;

components/mentions/index.en-US.md

@@ -47,6 +47,7 @@ return (
 <code src="./demo/allowClear.tsx">With clear icon</code>
 <code src="./demo/autoSize.tsx">autoSize</code>
 <code src="./demo/status.tsx">Status</code>
+<code src="./demo/onceDelete.tsx">Once Delete</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 
@@ -79,6 +80,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |  |
 | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |  |
 | options | Option Configuration | [Options](#option) | \[] | 5.1.0 |
+| itemOnceDelete | Delete Item with Once Delete | boolean | - |  |
 
 ### Mention methods
 

components/mentions/index.tsx

@@ -22,6 +22,7 @@ import type { Variant } from '../form/hooks/useVariants';
 import useVariant from '../form/hooks/useVariants';
 import Spin from '../spin';
 import useStyle from './style';
+import KeyCode from 'rc-util/lib/KeyCode';
 
 export const { Option } = RcMentions;
 
@@ -45,6 +46,7 @@ export interface MentionProps extends Omit<RcMentionsProps, 'suffix'> {
   status?: InputStatus;
   options?: MentionsOptionProps[];
   popupClassName?: string;
+  itemOnceDelete?: boolean;
   /**
    * @since 5.13.0
    * @default "outlined"
@@ -75,13 +77,15 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
     children,
     notFoundContent,
     options,
+    itemOnceDelete = false,
     status: customStatus,
     allowClear = false,
     popupClassName,
     style,
     variant: customVariant,
     ...restProps
   } = props;
+  const [data, setData] = React.useState<string>(props.value ?? props.defaultValue ?? '');
   const [focused, setFocused] = React.useState(false);
   const innerRef = React.useRef<MentionsRef>(null);
   const mergedRef = composeRef(ref, innerRef);
@@ -121,6 +125,18 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
     setFocused(false);
   };
 
+  const onChange = (value: string) => {
+    setData(value);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.keyCode === KeyCode.BACKSPACE && itemOnceDelete) {
+      if (data) {
+        setData(data.split('@').slice(0, -1).join('@'));
+      }
+    }
+  };
+
   const notFoundContentEle = React.useMemo<React.ReactNode>(() => {
     if (notFoundContent !== undefined) {
       return notFoundContent;
@@ -181,8 +197,11 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
       allowClear={mergedAllowClear}
       direction={direction}
       style={{ ...contextMentions?.style, ...style }}
+      value={data}
       {...restProps}
       filterOption={mentionsfilterOption}
+      onKeyDown={onKeyDown}
+      onChange={onChange}
       onFocus={onFocus}
       onBlur={onBlur}
       dropdownClassName={classNames(popupClassName, rootClassName, hashId, cssVarCls, rootCls)}

components/mentions/index.zh-CN.md

@@ -48,6 +48,7 @@ return (
 <code src="./demo/allowClear.tsx">带移除图标</code>
 <code src="./demo/autoSize.tsx">自动大小</code>
 <code src="./demo/status.tsx">自定义状态</code>
+<code src="./demo/onceDelete.tsx">一次删除</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 
@@ -80,6 +81,7 @@ return (
 | onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |  |
 | onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |  |
 | options | 选项配置 | [Options](#option) | [] | 5.1.0 |
+| itemOnceDelete | 支持一键清除 | boolean | false |  |  |
 
 ### Mentions 方法