From 5b779e8e8eab027b93553b2aa31baac01e3db16b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E7=A6=BB?= <surgesoft@gmail.com>
Date: Fri, 9 Dec 2016 13:03:09 +0800
Subject: [PATCH] Exposing `onFocus` and `onBlur` callback of Mention (#4164)

*  Expose `onFocus` and `onBlur` callback of Mention

 + close #4163

* add event arguments
---
 components/mention/index.en-US.md |  2 ++
 components/mention/index.tsx      | 23 ++++++++++++++++++++---
 components/mention/index.zh-CN.md |  2 ++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md
index fd32c6d8ee..9d4dc831ee 100644
--- a/components/mention/index.en-US.md
+++ b/components/mention/index.en-US.md
@@ -45,6 +45,8 @@ When need to mention someone or something.
 | value | core state of mention | EditorState | null |
 | placeHolder | placeholder of input | string | null |
 | getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative.  | Function() | () => document.body |
+| onFocus | Callback function called when mention component get focus |  function() | null |
+| onBlur | Callback function called when mention component blur | function() | nul |
 
 ### Nav props
 
diff --git a/components/mention/index.tsx b/components/mention/index.tsx
index abab2ccf46..37b202492e 100644
--- a/components/mention/index.tsx
+++ b/components/mention/index.tsx
@@ -19,6 +19,8 @@ export interface MentionProps {
   prefix?: string;
   placeholder?: string;
   getSuggestionContainer?: Function;
+  onFocus?: Function;
+  onBlur?: Function;
 }
 
 export interface MentionState {
@@ -73,7 +75,22 @@ export default class Mention extends React.Component<MentionProps, MentionState>
       suggestions: filteredSuggestions,
     });
   }
-
+  onFocus = (ev) => {
+    this.setState({
+      focus: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus(ev);
+    }
+  }
+  onBlur = (ev) => {
+    this.setState({
+      focus: false,
+    });
+    if (this.props.onBlur) {
+      this.props.onBlur(ev);
+    }
+  }
   render() {
     const { className = '', prefixCls, loading } = this.props;
     const { suggestions, focus } = this.state;
@@ -91,8 +108,8 @@ export default class Mention extends React.Component<MentionProps, MentionState>
         className={cls}
         onSearchChange={this.onSearchChange}
         onChange={this.onChange}
-        onFocus={() => this.setState({ focus: true })}
-        onBlur={() => this.setState({ focus: false })}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
         suggestions={suggestions}
         notFoundContent={notFoundContent}
       />
diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md
index 5402db0b81..89267bb5de 100644
--- a/components/mention/index.zh-CN.md
+++ b/components/mention/index.zh-CN.md
@@ -45,6 +45,8 @@ title: Mention
 | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
 | value | 值 | EditorState | null |
 | getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| Function() | () => document.body |
+| onFocus | 获得焦点时回调 |  function() | null |
+| onBlur | 失去焦点时回调 | function() | nul |
 
 ### Nav props