From a4a26797ec650f587b20cf0bd99581f9ba23c8a4 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Wed, 28 Jun 2017 16:02:38 +0800
Subject: [PATCH] fix: mention should support `.focus`, close: #6135

---
 components/badge/ScrollNumber.tsx             | 2 +-
 components/mention/demo/controllder-simple.md | 4 ++++
 components/mention/index.en-US.md             | 6 ++++++
 components/mention/index.tsx                  | 8 ++++++++
 components/mention/index.zh-CN.md             | 6 ++++++
 5 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx
index 5664cb2970..b5a8eb5bc8 100644
--- a/components/badge/ScrollNumber.tsx
+++ b/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(),
     );
diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md
index 4cf0c1b997..3d27563ba0 100644
--- a/components/mention/demo/controllder-simple.md
+++ b/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}
diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md
index 47c9544357..e5bb9914f6 100644
--- a/components/mention/index.en-US.md
+++ b/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       |
diff --git a/components/mention/index.tsx b/components/mention/index.tsx
index ce56231edd..cdbd98bbe9 100644
--- a/components/mention/index.tsx
+++ b/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}
diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md
index d038b5555d..773e5ca388 100644
--- a/components/mention/index.zh-CN.md
+++ b/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
 
 | 参数     | 说明           | 类型     | 默认值       |