fix: mention should support .focus, close: #6135

components/badge/ScrollNumber.tsx

@@ -135,7 +135,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
       props.style.boxShadow = `0 0 0 1px ${props.style.borderColor} inset`;
     }
     return createElement(
-      this.props.component || 'sup',
+      (this.props.component || 'sup') as any,
       props,
       this.renderNumberElement(),
     );

components/mention/demo/controllder-simple.md

@@ -21,6 +21,9 @@ class App extends React.Component {
   state = {
     value: toContentState('@afc163'),
   }
+  componentDidMount() {
+    this.mention.focus();
+  }
   handleChange = (editorState) => {
     this.setState({
       value: editorState,
@@ -29,6 +32,7 @@ class App extends React.Component {
   render() {
     return (
       <Mention
+        ref={ele => this.mention = ele}
         suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
         value={this.state.value}
         onChange={this.handleChange}

components/mention/index.en-US.md

@@ -51,6 +51,12 @@ When need to mention someone or something.
 | readOnly | Tell if the input is readonly. | boolean | false |
 | disabled | Tell if the input is disabled. | boolean | false |
 
+### Mention methods
+
+| Property     | Description          | Type     | Default       |
+|----------|---------------|----------|--------------|
+| focus | Force focus back onto the editor node. |  - | - |
+
 ### Nav
 
 | Property     | Description           | Type     | Default       |

components/mention/index.tsx

@@ -46,6 +46,7 @@ export default class Mention extends React.Component<MentionProps, MentionState>
     console.warn('Mention.toEditorState is deprecated. Use toContentState instead.');
     return toEditorState(text);
   }
+  private mentionEle: any;
   constructor(props) {
     super(props);
     this.state = {
@@ -102,6 +103,12 @@ export default class Mention extends React.Component<MentionProps, MentionState>
       this.props.onBlur(ev);
     }
   }
+  focus = () => {
+    this.mentionEle._editor.focus();
+  }
+  mentionRef = ele => {
+    this.mentionEle = ele;
+  }
   render() {
     const { className = '', prefixCls, loading } = this.props;
     const { suggestions, focus } = this.state;
@@ -117,6 +124,7 @@ export default class Mention extends React.Component<MentionProps, MentionState>
       <RcMention
         {...this.props}
         className={cls}
+        ref={this.mentionRef}
         onSearchChange={this.onSearchChange}
         onChange={this.onChange}
         onFocus={this.onFocus}

components/mention/index.zh-CN.md

@@ -51,6 +51,12 @@ title: Mention
 | readOnly | 是否只读. | boolean | false |
 | disabled | 是否禁用状态. | boolean | false |
 
+### Mention methods
+
+| Property     | Description          | Type     | Default       |
+|----------|---------------|----------|--------------|
+| focus | 强制获得焦点. |  - | - |
+
 ### Nav
 
 | 参数     | 说明           | 类型     | 默认值       |