fix: add focus and blur for Mentions (#18132)

* add focus and blur

* fix lint

* add test case

* use focusTest

* 恢复原始测试用例，查看focus的测试结果

* order

components/mentions/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Mentions from '..';
+import focusTest from '../../../tests/shared/focusTest';
 
 const { getMentions } = Mentions;
 
@@ -71,6 +72,8 @@ describe('Mentions', () => {
     expect(onBlur).toHaveBeenCalled();
   });
 
+  focusTest(Mentions);
+
   it('loading', () => {
     const wrapper = mount(<Mentions loading />);
     simulateInput(wrapper, '@');

components/mentions/index.tsx

@@ -48,26 +48,28 @@ class Mentions extends React.Component<MentionProps, MentionState> {
 
     return value
       .split(split)
-      .map((str = ''): MentionsEntity | null => {
-        let hitPrefix: string | null = null;
-
-        prefixList.some(prefixStr => {
-          const startStr = str.slice(0, prefixStr.length);
-          if (startStr === prefixStr) {
-            hitPrefix = prefixStr;
-            return true;
+      .map(
+        (str = ''): MentionsEntity | null => {
+          let hitPrefix: string | null = null;
+
+          prefixList.some(prefixStr => {
+            const startStr = str.slice(0, prefixStr.length);
+            if (startStr === prefixStr) {
+              hitPrefix = prefixStr;
+              return true;
+            }
+            return false;
+          });
+
+          if (hitPrefix !== null) {
+            return {
+              prefix: hitPrefix,
+              value: str.slice(hitPrefix!.length),
+            };
           }
-          return false;
-        });
-
-        if (hitPrefix !== null) {
-          return {
-            prefix: hitPrefix,
-            value: str.slice(hitPrefix!.length),
-          };
-        }
-        return null;
-      })
+          return null;
+        },
+      )
       .filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
   };
 
@@ -75,6 +77,8 @@ class Mentions extends React.Component<MentionProps, MentionState> {
     focused: false,
   };
 
+  private rcMentions: any;
+
   onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {
     const { onFocus } = this.props;
     if (onFocus) {
@@ -125,6 +129,18 @@ class Mentions extends React.Component<MentionProps, MentionState> {
     return filterOption;
   };
 
+  saveMentions = (node: typeof RcMentions) => {
+    this.rcMentions = node;
+  };
+
+  focus() {
+    this.rcMentions.focus();
+  }
+
+  blur() {
+    this.rcMentions.blur();
+  }
+
   renderMentions = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
     const { focused } = this.state;
     const { prefixCls: customizePrefixCls, className, disabled, ...restProps } = this.props;
@@ -146,6 +162,7 @@ class Mentions extends React.Component<MentionProps, MentionState> {
         filterOption={this.getFilterOption()}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
+        ref={this.saveMentions}
       >
         {this.getOptions()}
       </RcMentions>