Add focus method of <Mention />

+ close ant-design#6135
RaoHai · May 15, 2017 · 29bc4a6 · 29bc4a6
1 parent 61d6cf1
commit 29bc4a6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 0 deletions.
diff --git 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
@@ -51,6 +51,13 @@ 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 props
 
 | Property     | Description           | Type     | Default       |

diff --git a/components/mention/index.tsx b/components/mention/index.tsx
@@ -24,6 +24,7 @@ export interface MentionProps {
   onBlur?: Function;
   readOnly?: boolean;
   disabled?: boolean;
+  ref?: Function;
 }
 
 export interface MentionState {
@@ -46,6 +47,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 = {
@@ -101,6 +103,16 @@ export default class Mention extends React.Component<MentionProps, MentionState>
       this.props.onBlur(ev);
     }
   }
+  focus = () => {
+    this.mentionEle._editor.focus();
+  }
+  mentionRef = ele => {
+    const { ref } = this.props;
+    if (ref) {
+      ref(ele);
+    }
+    this.mentionEle = ele;
+  }
   render() {
     const { className = '', prefixCls, loading } = this.props;
     const { suggestions, focus } = this.state;
@@ -116,6 +128,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
@@ -51,6 +51,13 @@ title: Mention
 | readOnly | 是否只读. | boolean | false |
 | disabled | 是否禁用状态. | boolean | false |
 
+
+### Mention methods
+
+| Property     | Description          | Type     | Default       |
+|----------|---------------|----------|--------------|
+| focus | 强制获得焦点. |  - | - |
+
 ### Nav props
 
 | 参数     | 说明           | 类型     | 默认值       |