From 0ff41e1d1daaac21a0e8a91dafc7328e51f25ce9 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Sun, 5 May 2019 17:58:46 +0800
Subject: [PATCH 01/32] add mention logic

---
 assets/index.less  | 40 +++++++++++++++++++
 examples/basic.js  | 13 ++++++-
 package.json       |  5 ++-
 src/Mentions.tsx   | 96 ++++++++++++++++++++++++++++++++++++++++++++--
 src/Option.tsx     |  7 ++++
 src/util.ts        |  0
 storybook/index.js |  9 ++++-
 typings/index.d.ts |  2 +
 8 files changed, 165 insertions(+), 7 deletions(-)
 create mode 100644 src/Option.tsx
 create mode 100644 src/util.ts

diff --git a/assets/index.less b/assets/index.less
index e020cb6..adae98e 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -1 +1,41 @@
 @mentionsPrefixCls: rc-mentions;
+
+.@{mentionsPrefixCls} {
+  font-size: 100px;
+  display: inline-block;
+  position: relative;
+
+  // reset
+  > textarea, &-measure {
+    font-size: inherit;
+    padding: 0;
+    margin: 0;
+    line-height: inherit;
+    vertical-align: top;
+    font-weight: inherit;
+    font-family: inherit;
+    overflow: inherit;
+  }
+
+  > textarea {
+    border: none;
+  }
+
+  &-measure {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    color: red;
+    // z-index: -1;
+  }
+}
+
+// Border style
+.@{mentionsPrefixCls} {
+  border: 1px solid #999;
+  border-radius: 3px;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/examples/basic.js b/examples/basic.js
index dbc1986..1f80d36 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -1,12 +1,21 @@
 /* eslint no-console: 0 */
 
 import React from 'react';
-// import Mentions from '../src';
+import Mentions from '../src';
 import '../assets/index.less';
 
+const { Option } = Mentions;
+
 class Demo extends React.Component {
+  state = {};
+
   render() {
-    return null;
+    return (
+      <Mentions autoFocus>
+        <Option value="light">Light</Option>
+        <Option value="bamboo">Bamboo</Option>
+      </Mentions>
+    );
   }
 }
 
diff --git a/package.json b/package.json
index 7104842..7715cc4 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,10 @@
     "typescript": "^3.2.2"
   },
   "dependencies": {
-    "babel-runtime": "^6.23.0"
+    "babel-runtime": "^6.23.0",
+    "classnames": "^2.2.6",
+    "omit.js": "^1.0.2",
+    "react-lifecycles-compat": "^3.0.4"
   },
   "pre-commit": [
     "lint-staged"
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 20af4de..373d7d7 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -1,7 +1,97 @@
+import classNames from 'classnames';
+import omit from 'omit.js';
 import * as React from 'react';
+import { polyfill } from 'react-lifecycles-compat';
+import Option from './Option';
 
-export default class Mentions extends React.Component {
-  render() {
-    return null;
+interface MentionsProps {
+  value?: string;
+  onChange?: (text: string) => void;
+  prefixCls?: string;
+  prefix?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  autoFocus?: boolean;
+}
+interface MentionsState {
+  value: string;
+  measuring: boolean;
+  measureText: string;
+}
+class Mentions extends React.Component<MentionsProps, MentionsState> {
+  public static Option = Option;
+
+  public static defaultProps = {
+    prefixCls: 'rc-mentions',
+    prefix: '@',
+  };
+
+  public static getDerivedStateFromProps(props: MentionsProps, prevState: MentionsState) {
+    const newState: Partial<MentionsState> = {};
+
+    if ('value' in props && props.value !== prevState.value) {
+      newState.value = props.value;
+    }
+
+    return newState;
+  }
+
+  public state = {
+    value: '',
+    measuring: false,
+    measureText: '',
+  };
+
+  public textarea?: HTMLTextAreaElement;
+
+  public onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target: { value } }) => {
+    const { onChange } = this.props;
+    this.setState({ value });
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  // Check if hit the measure keyword
+  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = ({ key }) => {
+    const { value } = this.state;
+    const { prefix } = this.props;
+    if (prefix === key) {
+      const startLoc = this.textarea!.selectionStart;
+      this.setState({
+        measureText: `${value.slice(0, startLoc)}`,
+      });
+    }
+  };
+
+  public setTextAreaRef = (element: HTMLTextAreaElement) => {
+    this.textarea = element;
+  };
+
+  public render() {
+    const { value, measureText } = this.state;
+    const { prefix, prefixCls, className, style, ...restProps } = this.props;
+
+    const props = omit(restProps, ['onChange']);
+
+    return (
+      <div className={classNames(prefixCls, className)} style={style}>
+        <textarea
+          {...props}
+          ref={this.setTextAreaRef}
+          value={value}
+          onChange={this.onChange}
+          onKeyDown={this.onKeyDown}
+        />
+        <div className={`${prefixCls}-measure`}>
+          {measureText}
+          <span>{prefix}</span>
+        </div>
+      </div>
+    );
   }
 }
+
+polyfill(Mentions);
+
+export default Mentions;
diff --git a/src/Option.tsx b/src/Option.tsx
new file mode 100644
index 0000000..96e1104
--- /dev/null
+++ b/src/Option.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default class Option extends React.Component {
+  public render() {
+    return null;
+  }
+}
diff --git a/src/util.ts b/src/util.ts
new file mode 100644
index 0000000..e69de29
diff --git a/storybook/index.js b/storybook/index.js
index 74f8f53..4c6b160 100644
--- a/storybook/index.js
+++ b/storybook/index.js
@@ -6,6 +6,8 @@ import { storiesOf } from '@storybook/react';
 import { withConsole } from '@storybook/addon-console';
 import { withViewport } from '@storybook/addon-viewport';
 import { withInfo } from '@storybook/addon-info';
+import BasicSource from 'rc-source-loader!../examples/basic';
+import Basic from '../examples/basic';
 
 import READMECode from '../README.md';
 
@@ -31,4 +33,9 @@ storiesOf('rc-mentions', module)
         code: READMECode,
       },
     },
-  );
+  )
+  .add('basic', () => <Basic />, {
+    source: {
+      code: BasicSource,
+    },
+  });
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 36ee66c..c40e03e 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1 +1,3 @@
+declare module 'react-lifecycles-compat';
 declare module 'rc-trigger';
+declare module 'omit.js';

From 767adb92bbfab79981cbebfa763ce0e4b184ab54 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Sun, 5 May 2019 21:02:19 +0800
Subject: [PATCH 02/32] support basic measure

---
 assets/index.less      | 38 ++++++++++++++++++--
 examples/basic.js      |  1 +
 package.json           |  3 ++
 src/DropdownMenu.tsx   | 29 +++++++++++++++
 src/KeywordTrigger.tsx | 65 ++++++++++++++++++++++++++++++++++
 src/Mentions.tsx       | 80 ++++++++++++++++++++++++++++++++++++------
 src/Option.tsx         | 10 +++---
 storybook/index.js     |  1 -
 typings/index.d.ts     |  2 ++
 9 files changed, 211 insertions(+), 18 deletions(-)
 create mode 100644 src/DropdownMenu.tsx
 create mode 100644 src/KeywordTrigger.tsx

diff --git a/assets/index.less b/assets/index.less
index adae98e..ccee064 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -1,11 +1,10 @@
 @mentionsPrefixCls: rc-mentions;
 
 .@{mentionsPrefixCls} {
-  font-size: 100px;
   display: inline-block;
   position: relative;
 
-  // reset
+  // ================= Input Area =================
   > textarea, &-measure {
     font-size: inherit;
     padding: 0;
@@ -15,6 +14,7 @@
     font-weight: inherit;
     font-family: inherit;
     overflow: inherit;
+    word-break: break-all;
   }
 
   > textarea {
@@ -31,11 +31,43 @@
     color: red;
     // z-index: -1;
   }
+
+  // ================== Dropdown ==================
+  &-dropdown {
+    position: absolute;
+
+    &-menu {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      &-item {
+        cursor: pointer;
+      }
+    }
+  }
 }
 
-// Border style
+// Customize style
 .@{mentionsPrefixCls} {
+  font-size: 20px;
   border: 1px solid #999;
   border-radius: 3px;
   overflow: hidden;
+
+  &-dropdown {
+    border: 1px solid #999;
+    border-radius: 3px;
+    background: #FFF;
+
+    &-menu {
+      &-item {
+        padding: 4px 8px;
+
+        &-active {
+          background: #e6f7ff;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/examples/basic.js b/examples/basic.js
index 1f80d36..3d3e2c2 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -14,6 +14,7 @@ class Demo extends React.Component {
       <Mentions autoFocus>
         <Option value="light">Light</Option>
         <Option value="bamboo">Bamboo</Option>
+        <Option value="cat">Cat</Option>
       </Mentions>
     );
   }
diff --git a/package.json b/package.json
index 7715cc4..4c3e895 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,9 @@
     "babel-runtime": "^6.23.0",
     "classnames": "^2.2.6",
     "omit.js": "^1.0.2",
+    "rc-menu": "^7.4.22",
+    "rc-trigger": "^2.6.2",
+    "rc-util": "^4.6.0",
     "react-lifecycles-compat": "^3.0.4"
   },
   "pre-commit": [
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
new file mode 100644
index 0000000..f2b6319
--- /dev/null
+++ b/src/DropdownMenu.tsx
@@ -0,0 +1,29 @@
+import Menu, { MenuItem } from 'rc-menu';
+import * as React from 'react';
+import { OptionProps } from './Option';
+
+interface DropdownMenuProps {
+  prefixCls?: string;
+  options: OptionProps[];
+  activeIndex: number;
+}
+
+/**
+ * We only use Menu to display the candidate.
+ * The focus is controlled by textarea to make accessibility easy.
+ */
+class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
+  public render() {
+    const { prefixCls, options, activeIndex } = this.props;
+
+    return (
+      <Menu prefixCls={`${prefixCls}-menu`} activeKey={options[activeIndex].value}>
+        {options.map(({ value }) => (
+          <MenuItem key={value}>{value}</MenuItem>
+        ))}
+      </Menu>
+    );
+  }
+}
+
+export default DropdownMenu;
diff --git a/src/KeywordTrigger.tsx b/src/KeywordTrigger.tsx
new file mode 100644
index 0000000..eedd4fa
--- /dev/null
+++ b/src/KeywordTrigger.tsx
@@ -0,0 +1,65 @@
+import Trigger from 'rc-trigger';
+import * as React from 'react';
+import DropdownMenu from './DropdownMenu';
+import { OptionProps } from './Option';
+
+const BUILT_IN_PLACEMENTS = {
+  bottomRight: {
+    points: ['tl', 'br'],
+    offset: [0, 4],
+    overflow: {
+      adjustX: 0,
+      adjustY: 1,
+    },
+  },
+  topRight: {
+    points: ['bl', 'tr'],
+    offset: [0, -4],
+    overflow: {
+      adjustX: 0,
+      adjustY: 1,
+    },
+  },
+};
+
+interface KeywordTriggerProps {
+  visible?: boolean;
+  prefixCls?: string;
+  options: OptionProps[];
+  activeIndex: number;
+}
+
+class KeywordTrigger extends React.Component<KeywordTriggerProps, {}> {
+  public getDropdownPrefix = () => `${this.props.prefixCls}-dropdown`;
+
+  public getDropdownElement = () => {
+    const { options, activeIndex } = this.props;
+    return (
+      <DropdownMenu
+        prefixCls={this.getDropdownPrefix()}
+        options={options}
+        activeIndex={activeIndex}
+      />
+    );
+  };
+
+  public render() {
+    const { children, visible } = this.props;
+
+    const popupElement = this.getDropdownElement();
+
+    return (
+      <Trigger
+        prefixCls={this.getDropdownPrefix()}
+        popupVisible={visible}
+        popup={popupElement}
+        popupPlacement="bottomRight"
+        builtinPlacements={BUILT_IN_PLACEMENTS}
+      >
+        {children}
+      </Trigger>
+    );
+  }
+}
+
+export default KeywordTrigger;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 373d7d7..f13222e 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -1,8 +1,11 @@
 import classNames from 'classnames';
 import omit from 'omit.js';
+import toArray from 'rc-util/lib/Children/toArray';
+import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
-import Option from './Option';
+import KeywordTrigger from './KeywordTrigger';
+import Option, { OptionProps } from './Option';
 
 interface MentionsProps {
   value?: string;
@@ -17,6 +20,7 @@ interface MentionsState {
   value: string;
   measuring: boolean;
   measureText: string;
+  activeIndex: number;
 }
 class Mentions extends React.Component<MentionsProps, MentionsState> {
   public static Option = Option;
@@ -40,27 +44,66 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     value: '',
     measuring: false,
     measureText: '',
+    activeIndex: 0,
   };
 
   public textarea?: HTMLTextAreaElement;
 
-  public onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target: { value } }) => {
+  public triggerChange = (value: string) => {
     const { onChange } = this.props;
-    this.setState({ value });
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+
     if (onChange) {
       onChange(value);
     }
   };
 
+  public onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target: { value } }) => {
+    this.triggerChange(value);
+  };
+
   // Check if hit the measure keyword
-  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = ({ key }) => {
-    const { value } = this.state;
+  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
+    const { key, which } = event;
+    const { value, activeIndex, measuring, measureText } = this.state;
     const { prefix } = this.props;
     if (prefix === key) {
+      // Trigger measure
       const startLoc = this.textarea!.selectionStart;
       this.setState({
+        measuring: true,
         measureText: `${value.slice(0, startLoc)}`,
       });
+      return;
+    }
+
+    // Measure logic
+    if (!measuring) {
+      return;
+    }
+
+    if (which === KeyCode.UP || which === KeyCode.DOWN) {
+      // Control arrow function
+      const optionLen = this.getOptions().length;
+      const offset = which === KeyCode.UP ? -1 : 1;
+      const newActiveIndex = (activeIndex + offset + optionLen) % optionLen;
+      this.setState({
+        activeIndex: newActiveIndex,
+      });
+      event.preventDefault();
+    } else if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.ESC].indexOf(which) !== -1) {
+      this.setState({
+        measuring: false,
+      });
+    } else if (which === KeyCode.ENTER) {
+      const { value: mentionValue = '' } = this.getOptions()[activeIndex] || {};
+      this.triggerChange(`${measureText} ${prefix}${mentionValue} `);
+      this.setState({
+        measuring: false,
+      });
+      event.preventDefault();
     }
   };
 
@@ -68,8 +111,16 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     this.textarea = element;
   };
 
+  public getOptions = (): OptionProps[] => {
+    const { children } = this.props;
+    const list = toArray(children).map(({ props: { value } }: { props: OptionProps }) => ({
+      value,
+    }));
+    return list;
+  };
+
   public render() {
-    const { value, measureText } = this.state;
+    const { value, measureText, measuring, activeIndex } = this.state;
     const { prefix, prefixCls, className, style, ...restProps } = this.props;
 
     const props = omit(restProps, ['onChange']);
@@ -83,10 +134,19 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
         />
-        <div className={`${prefixCls}-measure`}>
-          {measureText}
-          <span>{prefix}</span>
-        </div>
+        {measuring && (
+          <div className={`${prefixCls}-measure`}>
+            {measureText}
+            <KeywordTrigger
+              prefixCls={prefixCls}
+              options={this.getOptions()}
+              activeIndex={activeIndex}
+              visible={true}
+            >
+              <span>{prefix}</span>
+            </KeywordTrigger>
+          </div>
+        )}
       </div>
     );
   }
diff --git a/src/Option.tsx b/src/Option.tsx
index 96e1104..ff36743 100644
--- a/src/Option.tsx
+++ b/src/Option.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 
-export default class Option extends React.Component {
-  public render() {
-    return null;
-  }
+export interface OptionProps {
+  value?: string;
 }
+
+const Option: React.SFC<OptionProps> = () => null;
+
+export default Option;
diff --git a/storybook/index.js b/storybook/index.js
index 4c6b160..19f8995 100644
--- a/storybook/index.js
+++ b/storybook/index.js
@@ -8,7 +8,6 @@ import { withViewport } from '@storybook/addon-viewport';
 import { withInfo } from '@storybook/addon-info';
 import BasicSource from 'rc-source-loader!../examples/basic';
 import Basic from '../examples/basic';
-
 import READMECode from '../README.md';
 
 storiesOf('rc-mentions', module)
diff --git a/typings/index.d.ts b/typings/index.d.ts
index c40e03e..8995f8e 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,3 +1,5 @@
 declare module 'react-lifecycles-compat';
 declare module 'rc-trigger';
+declare module 'rc-util/*';
+declare module 'rc-menu';
 declare module 'omit.js';

From 9d46db0c221ef3e3353f2a627a7faab5ad6e44de Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Sun, 5 May 2019 22:16:23 +0800
Subject: [PATCH 03/32] use measureLoc

---
 src/Mentions.tsx | 24 ++++++++++++++++++------
 src/util.ts      |  4 ++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index f13222e..c7efce7 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
 import KeywordTrigger from './KeywordTrigger';
 import Option, { OptionProps } from './Option';
+import { getMeasureText } from './util';
 
 interface MentionsProps {
   value?: string;
@@ -20,6 +21,7 @@ interface MentionsState {
   value: string;
   measuring: boolean;
   measureText: string;
+  measureLocation: number;
   activeIndex: number;
 }
 class Mentions extends React.Component<MentionsProps, MentionsState> {
@@ -43,6 +45,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public state = {
     value: '',
     measuring: false,
+    measureLocation: 0,
     measureText: '',
     activeIndex: 0,
   };
@@ -61,25 +64,31 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target: { value } }) => {
+    const { measuring, measureLocation } = this.state;
     this.triggerChange(value);
+
+    if (measuring) {
+      const measureText = getMeasureText(value, measureLocation);
+      console.log('=>', measureText);
+    }
   };
 
   // Check if hit the measure keyword
   public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key, which } = event;
-    const { value, activeIndex, measuring, measureText } = this.state;
+    const { value, activeIndex, measuring, measureLocation } = this.state;
     const { prefix } = this.props;
     if (prefix === key) {
       // Trigger measure
       const startLoc = this.textarea!.selectionStart;
       this.setState({
         measuring: true,
-        measureText: `${value.slice(0, startLoc)}`,
+        measureLocation: startLoc,
       });
       return;
     }
 
-    // Measure logic
+    // Skip if not measuring
     if (!measuring) {
       return;
     }
@@ -94,12 +103,15 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       });
       event.preventDefault();
     } else if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.ESC].indexOf(which) !== -1) {
+      // Break measure
       this.setState({
         measuring: false,
       });
+      return;
     } else if (which === KeyCode.ENTER) {
+      // Measure hit
       const { value: mentionValue = '' } = this.getOptions()[activeIndex] || {};
-      this.triggerChange(`${measureText} ${prefix}${mentionValue} `);
+      this.triggerChange(`${value.slice(0, measureLocation)} ${prefix}${mentionValue} `);
       this.setState({
         measuring: false,
       });
@@ -120,7 +132,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public render() {
-    const { value, measureText, measuring, activeIndex } = this.state;
+    const { value, measureLocation, measuring, activeIndex } = this.state;
     const { prefix, prefixCls, className, style, ...restProps } = this.props;
 
     const props = omit(restProps, ['onChange']);
@@ -136,7 +148,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
         />
         {measuring && (
           <div className={`${prefixCls}-measure`}>
-            {measureText}
+            {value.slice(0, measureLocation)}
             <KeywordTrigger
               prefixCls={prefixCls}
               options={this.getOptions()}
diff --git a/src/util.ts b/src/util.ts
index e69de29..66ddb99 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -0,0 +1,4 @@
+export function getMeasureText(fullText: string, measureStartLoc: number) {
+  const restText = fullText.slice(measureStartLoc);
+  return restText.split(' ')[0];
+}
\ No newline at end of file

From 6f98e7f8a894aaabf7fdde497ba2c133e5aabb4a Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Sun, 5 May 2019 23:42:17 +0800
Subject: [PATCH 04/32] sync scroll

---
 assets/index.less    |  4 ++++
 examples/basic.js    | 13 +++++++----
 src/DropdownMenu.tsx |  3 ++-
 src/Mentions.tsx     | 55 +++++++++++++++++++++++++++++++++++---------
 src/util.ts          | 22 ++++++++++++++++--
 5 files changed, 78 insertions(+), 19 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index ccee064..36f2038 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -15,6 +15,10 @@
     font-family: inherit;
     overflow: inherit;
     word-break: break-all;
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+    overflow: auto;
   }
 
   > textarea {
diff --git a/examples/basic.js b/examples/basic.js
index 3d3e2c2..37b4970 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -11,11 +11,14 @@ class Demo extends React.Component {
 
   render() {
     return (
-      <Mentions autoFocus>
-        <Option value="light">Light</Option>
-        <Option value="bamboo">Bamboo</Option>
-        <Option value="cat">Cat</Option>
-      </Mentions>
+      <div>
+        <Mentions autoFocus>
+          <Option value="light">Light</Option>
+          <Option value="bamboo">Bamboo</Option>
+          <Option value="cat">Cat</Option>
+        </Mentions>
+        <textarea />
+      </div>
     );
   }
 }
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index f2b6319..45d5e2c 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -15,9 +15,10 @@ interface DropdownMenuProps {
 class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
   public render() {
     const { prefixCls, options, activeIndex } = this.props;
+    const activeOption = options[activeIndex] || {};
 
     return (
-      <Menu prefixCls={`${prefixCls}-menu`} activeKey={options[activeIndex].value}>
+      <Menu prefixCls={`${prefixCls}-menu`} activeKey={activeOption.value}>
         {options.map(({ value }) => (
           <MenuItem key={value}>{value}</MenuItem>
         ))}
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index c7efce7..b8b0a0c 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
 import KeywordTrigger from './KeywordTrigger';
 import Option, { OptionProps } from './Option';
-import { getMeasureText } from './util';
+import { getMeasureText, replaceText } from './util';
 
 interface MentionsProps {
   value?: string;
@@ -51,6 +51,22 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public textarea?: HTMLTextAreaElement;
+  public measure?: HTMLDivElement;
+
+  public getSnapshotBeforeUpdate() {
+    const { measuring } = this.state;
+    if (measuring) {
+      return this.textarea!.scrollTop;
+    }
+    return 0;
+  }
+
+  public componentDidUpdate(_prevProps: any, _prevState: any, scrollTop: number) {
+    const { measuring } = this.state;
+    if (measuring) {
+      this.measure!.scrollTop = scrollTop;
+    }
+  }
 
   public triggerChange = (value: string) => {
     const { onChange } = this.props;
@@ -65,16 +81,18 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target: { value } }) => {
     const { measuring, measureLocation } = this.state;
+    const { prefix } = this.props;
     this.triggerChange(value);
 
+    // Update measure text
     if (measuring) {
-      const measureText = getMeasureText(value, measureLocation);
-      console.log('=>', measureText);
+      const measureText = getMeasureText(value, { measureLocation, prefix }).toLowerCase();
+      this.setState({ measureText });
     }
   };
 
   // Check if hit the measure keyword
-  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
+  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
     const { key, which } = event;
     const { value, activeIndex, measuring, measureLocation } = this.state;
     const { prefix } = this.props;
@@ -84,6 +102,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       this.setState({
         measuring: true,
         measureLocation: startLoc,
+        measureText: '',
+        activeIndex: 0,
       });
       return;
     }
@@ -102,7 +122,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
         activeIndex: newActiveIndex,
       });
       event.preventDefault();
-    } else if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.ESC].indexOf(which) !== -1) {
+    } else if ([ KeyCode.LEFT, KeyCode.RIGHT, KeyCode.ESC ].indexOf(which) !== -1) {
       // Break measure
       this.setState({
         measuring: false,
@@ -111,7 +131,11 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     } else if (which === KeyCode.ENTER) {
       // Measure hit
       const { value: mentionValue = '' } = this.getOptions()[activeIndex] || {};
-      this.triggerChange(`${value.slice(0, measureLocation)} ${prefix}${mentionValue} `);
+      this.triggerChange(replaceText(value, {
+        measureLocation,
+        prefix,
+        targetText: mentionValue,
+      }));
       this.setState({
         measuring: false,
       });
@@ -123,11 +147,20 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     this.textarea = element;
   };
 
+  public setMeasureRef = (element: HTMLDivElement) => {
+    this.measure = element;
+  };
+
   public getOptions = (): OptionProps[] => {
+    const { measureText } = this.state;
     const { children } = this.props;
-    const list = toArray(children).map(({ props: { value } }: { props: OptionProps }) => ({
-      value,
-    }));
+    const list = toArray(children)
+      .map(({ props: { value } }: { props: OptionProps }) => ({
+        value,
+      }))
+      .filter(({ value = '' }: OptionProps) => {
+        return value.toLowerCase().indexOf(measureText) !== -1;
+      });
     return list;
   };
 
@@ -135,7 +168,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     const { value, measureLocation, measuring, activeIndex } = this.state;
     const { prefix, prefixCls, className, style, ...restProps } = this.props;
 
-    const props = omit(restProps, ['onChange']);
+    const props = omit(restProps, [ 'onChange' ]);
 
     return (
       <div className={classNames(prefixCls, className)} style={style}>
@@ -147,7 +180,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
           onKeyDown={this.onKeyDown}
         />
         {measuring && (
-          <div className={`${prefixCls}-measure`}>
+          <div ref={this.setMeasureRef} className={`${prefixCls}-measure`}>
             {value.slice(0, measureLocation)}
             <KeywordTrigger
               prefixCls={prefixCls}
diff --git a/src/util.ts b/src/util.ts
index 66ddb99..1c6b338 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,4 +1,22 @@
-export function getMeasureText(fullText: string, measureStartLoc: number) {
-  const restText = fullText.slice(measureStartLoc);
+interface MeasureConfig {
+  measureLocation: number;
+  prefix?: string;
+}
+
+export function getMeasureText(fullText: string, config: MeasureConfig) {
+  const { measureLocation, prefix = '' } = config;
+  const restText = fullText.slice(measureLocation + prefix.length);
   return restText.split(' ')[0];
+}
+
+interface ReplaceConfig extends MeasureConfig {
+  targetText: string;
+}
+
+export function replaceText(fullText: string, config: ReplaceConfig): string {
+  const { measureLocation, prefix = '', targetText } = config;
+  const measureText = getMeasureText(fullText, config);
+  const startText = fullText.slice(0, measureLocation);
+  const endText = fullText.slice(measureLocation + prefix.length + measureText.length);
+  return `${startText} ${prefix}${targetText} ${endText}`;
 }
\ No newline at end of file

From ffe7fc82ceb805a58821d12417949da4feeebd63 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 10:51:29 +0800
Subject: [PATCH 05/32] use keyUp to measure

---
 src/Mentions.tsx | 66 ++++++++++++++++++++++++++----------------------
 src/util.ts      | 41 +++++++++++++++++++-----------
 2 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index b8b0a0c..6a32e70 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
 import KeywordTrigger from './KeywordTrigger';
 import Option, { OptionProps } from './Option';
-import { getMeasureText, replaceText } from './util';
+import { getBeforeSelectionText, getLastMeasureIndex, replaceWithMeasure } from './util';
 
 interface MentionsProps {
   value?: string;
@@ -61,7 +61,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     return 0;
   }
 
-  public componentDidUpdate(_prevProps: any, _prevState: any, scrollTop: number) {
+  public componentDidUpdate(_: any, __: any, scrollTop: number) {
     const { measuring } = this.state;
     if (measuring) {
       this.measure!.scrollTop = scrollTop;
@@ -80,33 +80,14 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target: { value } }) => {
-    const { measuring, measureLocation } = this.state;
-    const { prefix } = this.props;
     this.triggerChange(value);
-
-    // Update measure text
-    if (measuring) {
-      const measureText = getMeasureText(value, { measureLocation, prefix }).toLowerCase();
-      this.setState({ measureText });
-    }
   };
 
   // Check if hit the measure keyword
-  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
-    const { key, which } = event;
+  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
+    const { which } = event;
     const { value, activeIndex, measuring, measureLocation } = this.state;
-    const { prefix } = this.props;
-    if (prefix === key) {
-      // Trigger measure
-      const startLoc = this.textarea!.selectionStart;
-      this.setState({
-        measuring: true,
-        measureLocation: startLoc,
-        measureText: '',
-        activeIndex: 0,
-      });
-      return;
-    }
+    const { prefix = '' } = this.props;
 
     // Skip if not measuring
     if (!measuring) {
@@ -122,7 +103,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
         activeIndex: newActiveIndex,
       });
       event.preventDefault();
-    } else if ([ KeyCode.LEFT, KeyCode.RIGHT, KeyCode.ESC ].indexOf(which) !== -1) {
+    } else if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.ESC].indexOf(which) !== -1) {
       // Break measure
       this.setState({
         measuring: false,
@@ -131,18 +112,42 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     } else if (which === KeyCode.ENTER) {
       // Measure hit
       const { value: mentionValue = '' } = this.getOptions()[activeIndex] || {};
-      this.triggerChange(replaceText(value, {
+      const { text, selectionLocation } = replaceWithMeasure(value, {
         measureLocation,
+        selectionEnd: this.textarea!.selectionEnd,
         prefix,
         targetText: mentionValue,
-      }));
-      this.setState({
-        measuring: false,
       });
+      this.triggerChange(text);
+      this.setState(
+        {
+          measuring: false,
+        },
+        () => {
+          // We need restore the selection position
+          this.textarea!.selectionStart = selectionLocation;
+          this.textarea!.selectionEnd = selectionLocation;
+        },
+      );
       event.preventDefault();
     }
   };
 
+  public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
+    const { prefix = '' } = this.props;
+    const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
+    const measureIndex = getLastMeasureIndex(selectionStartText, prefix);
+
+    if (measureIndex !== -1) {
+      const measureText = selectionStartText.slice(measureIndex + prefix.length);
+      this.setState({
+        measuring: true,
+        measureText,
+        measureLocation: measureIndex,
+      });
+    }
+  };
+
   public setTextAreaRef = (element: HTMLTextAreaElement) => {
     this.textarea = element;
   };
@@ -168,7 +173,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     const { value, measureLocation, measuring, activeIndex } = this.state;
     const { prefix, prefixCls, className, style, ...restProps } = this.props;
 
-    const props = omit(restProps, [ 'onChange' ]);
+    const props = omit(restProps, ['onChange']);
 
     return (
       <div className={classNames(prefixCls, className)} style={style}>
@@ -178,6 +183,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
           value={value}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
+          onKeyUp={this.onKeyUp}
         />
         {measuring && (
           <div ref={this.setMeasureRef} className={`${prefixCls}-measure`}>
diff --git a/src/util.ts b/src/util.ts
index 1c6b338..b7f984e 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,22 +1,33 @@
-interface MeasureConfig {
-  measureLocation: number;
-  prefix?: string;
+/**
+ * Cut input selection into 2 part and return text before selection start
+ */
+export function getBeforeSelectionText(input: HTMLTextAreaElement) {
+  const { selectionStart } = input as any;
+  return input.value.slice(0, selectionStart);
 }
 
-export function getMeasureText(fullText: string, config: MeasureConfig) {
-  const { measureLocation, prefix = '' } = config;
-  const restText = fullText.slice(measureLocation + prefix.length);
-  return restText.split(' ')[0];
+/**
+ * Find the last match prefix index
+ */
+export function getLastMeasureIndex(text: string, prefix: string = ''): number {
+  return text.lastIndexOf(prefix);
 }
 
-interface ReplaceConfig extends MeasureConfig {
+interface MeasureConfig {
+  measureLocation: number;
+  selectionEnd: number;
+  prefix: string;
   targetText: string;
 }
 
-export function replaceText(fullText: string, config: ReplaceConfig): string {
-  const { measureLocation, prefix = '', targetText } = config;
-  const measureText = getMeasureText(fullText, config);
-  const startText = fullText.slice(0, measureLocation);
-  const endText = fullText.slice(measureLocation + prefix.length + measureText.length);
-  return `${startText} ${prefix}${targetText} ${endText}`;
-}
\ No newline at end of file
+export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
+  const { measureLocation, selectionEnd, prefix, targetText } = measureConfig;
+  const beforeMeasureText = text.slice(0, measureLocation);
+  const connectedStartText = `${beforeMeasureText} ${prefix}${targetText} `;
+  const endText = text.slice(selectionEnd);
+
+  return {
+    text: `${connectedStartText}${endText}`,
+    selectionLocation: connectedStartText.length,
+  };
+}

From 4d4974de4d56d778cd7d9cedc57a7d14fdfba676 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 11:19:19 +0800
Subject: [PATCH 06/32] update replace logic

---
 src/Mentions.tsx | 15 ++++++++++-----
 src/util.ts      | 15 +++++++++++++--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 6a32e70..d8ecdb5 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -134,17 +134,22 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
+    const { measureText: prevMeasureText, measuring } = this.state;
     const { prefix = '' } = this.props;
     const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
     const measureIndex = getLastMeasureIndex(selectionStartText, prefix);
 
     if (measureIndex !== -1) {
       const measureText = selectionStartText.slice(measureIndex + prefix.length);
-      this.setState({
-        measuring: true,
-        measureText,
-        measureLocation: measureIndex,
-      });
+
+      if (prevMeasureText !== measureText || !measuring) {
+        this.setState({
+          measuring: true,
+          measureText,
+          measureLocation: measureIndex,
+          activeIndex: 0,
+        });
+      }
     }
   };
 
diff --git a/src/util.ts b/src/util.ts
index b7f984e..bef0ec5 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -22,9 +22,20 @@ interface MeasureConfig {
 
 export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
   const { measureLocation, selectionEnd, prefix, targetText } = measureConfig;
-  const beforeMeasureText = text.slice(0, measureLocation);
+
+  // Do nothing if already exist same targetText
+  const currentAfterMeasureText = text.slice(measureLocation);
+  if (currentAfterMeasureText.indexOf(targetText) === prefix.length) {
+    return {
+      text,
+      // [some text] + [@] + [target text] + [' ']
+      selectionLocation: measureLocation + prefix.length + targetText.length + 1,
+    };
+  }
+
+  const beforeMeasureText = text.slice(0, measureLocation).replace(/ $/, '');
   const connectedStartText = `${beforeMeasureText} ${prefix}${targetText} `;
-  const endText = text.slice(selectionEnd);
+  const endText = text.slice(selectionEnd).replace(/^ /, '');
 
   return {
     text: `${connectedStartText}${endText}`,

From 533e1988c29dca4f0ba4e12ad5c2a9b159ebf675 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 12:23:18 +0800
Subject: [PATCH 07/32] update keeping logic

---
 src/Mentions.tsx | 52 +++++++++++++++++++++++++++++++++++++-----------
 src/util.ts      | 15 +++++++++++---
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index d8ecdb5..42f17fe 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -85,7 +85,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   // Check if hit the measure keyword
   public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
-    const { which } = event;
+    const { which, key } = event;
     const { value, activeIndex, measuring, measureLocation } = this.state;
     const { prefix = '' } = this.props;
 
@@ -134,6 +134,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
+    const { key } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
     const { prefix = '' } = this.props;
     const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
@@ -141,15 +142,33 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
     if (measureIndex !== -1) {
       const measureText = selectionStartText.slice(measureIndex + prefix.length);
-
-      if (prevMeasureText !== measureText || !measuring) {
-        this.setState({
-          measuring: true,
-          measureText,
-          measureLocation: measureIndex,
-          activeIndex: 0,
-        });
+      const matchOption: boolean = !!this.getOptions(measureText).length;
+
+      /**
+       * When to trigger measure:
+       * 1. When user press `prefix`
+       * 2. When measureText !== prevMeasureText
+       *  1. Start if measure hit
+       *  2. Close if measure loss
+       */
+      if (key === prefix) {
+        this.startMeasure(measureText, measureIndex);
+      }
+      if (measureText !== prevMeasureText) {
+        if (matchOption) {
+          this.startMeasure(measureText, measureIndex);
+        } else {
+          this.setState({
+            measuring: false,
+          });
+        }
       }
+      // console.log('Measure Text:', measureText, `(${prevMeasureText})`);
+      // console.log('=>', selectionStartText);
+      // console.log('==>', prevMeasureText !== measureText, matchOption, !measuring, measureText === '');
+      // if ((prevMeasureText !== measureText && matchOption) || (!measuring && measureText === '')) {
+      //   this.startMeasure(measureText, measureIndex);
+      // }
     }
   };
 
@@ -161,19 +180,28 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     this.measure = element;
   };
 
-  public getOptions = (): OptionProps[] => {
-    const { measureText } = this.state;
+  public getOptions = (measureText?: string): OptionProps[] => {
+    const targetMeasureText = (measureText || this.state.measureText).toLocaleLowerCase();
     const { children } = this.props;
     const list = toArray(children)
       .map(({ props: { value } }: { props: OptionProps }) => ({
         value,
       }))
       .filter(({ value = '' }: OptionProps) => {
-        return value.toLowerCase().indexOf(measureText) !== -1;
+        return value.toLowerCase().indexOf(targetMeasureText) !== -1;
       });
     return list;
   };
 
+  public startMeasure(measureText: string, measureLocation: number) {
+    this.setState({
+      measuring: true,
+      measureText,
+      measureLocation,
+      activeIndex: 0,
+    });
+  }
+
   public render() {
     const { value, measureLocation, measuring, activeIndex } = this.state;
     const { prefix, prefixCls, className, style, ...restProps } = this.props;
diff --git a/src/util.ts b/src/util.ts
index bef0ec5..42b5765 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -26,10 +26,19 @@ export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
   // Do nothing if already exist same targetText
   const currentAfterMeasureText = text.slice(measureLocation);
   if (currentAfterMeasureText.indexOf(targetText) === prefix.length) {
+    // [some text] + [@] + [target text] + [' ']
+    const endLocation = measureLocation + prefix.length + targetText.length;
+    let finalText = text;
+
+    // Insert one space if not exist
+    const lastChar = text[endLocation];
+    if (lastChar !== ' ') {
+      finalText = text.slice(0, endLocation) + ' ' + text.slice(endLocation);
+    }
+
     return {
-      text,
-      // [some text] + [@] + [target text] + [' ']
-      selectionLocation: measureLocation + prefix.length + targetText.length + 1,
+      text: finalText,
+      selectionLocation: endLocation + 1,
     };
   }
 

From 6328c260b11bdcdb0e5e05b0f66fb136f3d023d0 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 12:29:27 +0800
Subject: [PATCH 08/32] add close logic

---
 src/Mentions.tsx | 39 +++++++++++++++++----------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 42f17fe..806f9b8 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -133,6 +133,17 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     }
   };
 
+  /**
+   * When to start measure:
+   * 1. When user press `prefix`
+   * 2. When measureText !== prevMeasureText
+   *  1. If measure hit
+   *
+   * When to stop measure:
+   * 1. Selection is out of range
+   * 2. When measureText !== prevMeasureText
+   *  1. If measure miss
+   */
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
@@ -144,31 +155,15 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       const measureText = selectionStartText.slice(measureIndex + prefix.length);
       const matchOption: boolean = !!this.getOptions(measureText).length;
 
-      /**
-       * When to trigger measure:
-       * 1. When user press `prefix`
-       * 2. When measureText !== prevMeasureText
-       *  1. Start if measure hit
-       *  2. Close if measure loss
-       */
-      if (key === prefix) {
+      if (key === prefix || (measureText !== prevMeasureText && matchOption)) {
         this.startMeasure(measureText, measureIndex);
       }
-      if (measureText !== prevMeasureText) {
-        if (matchOption) {
-          this.startMeasure(measureText, measureIndex);
-        } else {
-          this.setState({
-            measuring: false,
-          });
-        }
+
+      if (measureText !== prevMeasureText && !matchOption) {
+        this.setState({ measuring: false });
       }
-      // console.log('Measure Text:', measureText, `(${prevMeasureText})`);
-      // console.log('=>', selectionStartText);
-      // console.log('==>', prevMeasureText !== measureText, matchOption, !measuring, measureText === '');
-      // if ((prevMeasureText !== measureText && matchOption) || (!measuring && measureText === '')) {
-      //   this.startMeasure(measureText, measureIndex);
-      // }
+    } else if (measuring) {
+      this.setState({ measuring: false });
     }
   };
 

From bf9e6f15c03d33b7df32a323d5d2d20684e7b504 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 13:39:27 +0800
Subject: [PATCH 09/32] optimize replace logic

---
 src/Mentions.tsx | 47 +++++++++++++++++++++++++----------------------
 src/util.ts      | 46 ++++++++++++++++++++++++----------------------
 2 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 806f9b8..4aa2cfe 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -20,7 +20,7 @@ interface MentionsProps {
 interface MentionsState {
   value: string;
   measuring: boolean;
-  measureText: string;
+  measureText: string | null;
   measureLocation: number;
   activeIndex: number;
 }
@@ -46,7 +46,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     value: '',
     measuring: false,
     measureLocation: 0,
-    measureText: '',
+    measureText: null,
     activeIndex: 0,
   };
 
@@ -103,32 +103,24 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
         activeIndex: newActiveIndex,
       });
       event.preventDefault();
-    } else if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.ESC].indexOf(which) !== -1) {
+    } else if ([KeyCode.ESC].indexOf(which) !== -1) {
       // Break measure
-      this.setState({
-        measuring: false,
-      });
+      this.stopMeasure();
       return;
     } else if (which === KeyCode.ENTER) {
       // Measure hit
       const { value: mentionValue = '' } = this.getOptions()[activeIndex] || {};
       const { text, selectionLocation } = replaceWithMeasure(value, {
         measureLocation,
-        selectionEnd: this.textarea!.selectionEnd,
         prefix,
         targetText: mentionValue,
       });
       this.triggerChange(text);
-      this.setState(
-        {
-          measuring: false,
-        },
-        () => {
-          // We need restore the selection position
-          this.textarea!.selectionStart = selectionLocation;
-          this.textarea!.selectionEnd = selectionLocation;
-        },
-      );
+      this.stopMeasure(() => {
+        // We need restore the selection position
+        this.textarea!.selectionStart = selectionLocation;
+        this.textarea!.selectionEnd = selectionLocation;
+      });
       event.preventDefault();
     }
   };
@@ -137,12 +129,12 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
    * When to start measure:
    * 1. When user press `prefix`
    * 2. When measureText !== prevMeasureText
-   *  1. If measure hit
+   *  - If measure hit
    *
    * When to stop measure:
    * 1. Selection is out of range
    * 2. When measureText !== prevMeasureText
-   *  1. If measure miss
+   *  - If measure miss
    */
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key } = event;
@@ -160,10 +152,10 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       }
 
       if (measureText !== prevMeasureText && !matchOption) {
-        this.setState({ measuring: false });
+        this.stopMeasure();
       }
     } else if (measuring) {
-      this.setState({ measuring: false });
+      this.stopMeasure();
     }
   };
 
@@ -176,7 +168,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public getOptions = (measureText?: string): OptionProps[] => {
-    const targetMeasureText = (measureText || this.state.measureText).toLocaleLowerCase();
+    const targetMeasureText = (measureText || this.state.measureText || '').toLocaleLowerCase();
     const { children } = this.props;
     const list = toArray(children)
       .map(({ props: { value } }: { props: OptionProps }) => ({
@@ -197,6 +189,17 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     });
   }
 
+  public stopMeasure(callback?: () => void) {
+    this.setState(
+      {
+        measuring: false,
+        measureLocation: 0,
+        measureText: null,
+      },
+      callback,
+    );
+  }
+
   public render() {
     const { value, measureLocation, measuring, activeIndex } = this.state;
     const { prefix, prefixCls, className, style, ...restProps } = this.props;
diff --git a/src/util.ts b/src/util.ts
index 42b5765..1af2969 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -15,39 +15,41 @@ export function getLastMeasureIndex(text: string, prefix: string = ''): number {
 
 interface MeasureConfig {
   measureLocation: number;
-  selectionEnd: number;
   prefix: string;
   targetText: string;
 }
 
+/**
+ * Paint targetText into current text:
+ *  text: little@litest
+ *  targetText: light
+ *  => little @light test
+ */
 export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
-  const { measureLocation, selectionEnd, prefix, targetText } = measureConfig;
-
-  // Do nothing if already exist same targetText
-  const currentAfterMeasureText = text.slice(measureLocation);
-  if (currentAfterMeasureText.indexOf(targetText) === prefix.length) {
-    // [some text] + [@] + [target text] + [' ']
-    const endLocation = measureLocation + prefix.length + targetText.length;
-    let finalText = text;
+  const { measureLocation, prefix, targetText } = measureConfig;
 
-    // Insert one space if not exist
-    const lastChar = text[endLocation];
-    if (lastChar !== ' ') {
-      finalText = text.slice(0, endLocation) + ' ' + text.slice(endLocation);
+  // Before text will append one space if have other text
+  let beforeMeasureText = text.slice(0, measureLocation).replace(/ $/, '');
+  if (beforeMeasureText) {
+    beforeMeasureText = `${beforeMeasureText} `;
+  }
+  let restText = text.slice(measureLocation + prefix.length);
+
+  // Reuse rest text as it can
+  const targetTextLen = targetText.length;
+  for (let i = 0; i < targetTextLen; i += 1) {
+    if (restText[i] !== targetText[i]) {
+      restText = restText.slice(i);
+      break;
+    } else if (i === targetTextLen - 1) {
+      restText = restText.slice(targetTextLen);
     }
-
-    return {
-      text: finalText,
-      selectionLocation: endLocation + 1,
-    };
   }
 
-  const beforeMeasureText = text.slice(0, measureLocation).replace(/ $/, '');
-  const connectedStartText = `${beforeMeasureText} ${prefix}${targetText} `;
-  const endText = text.slice(selectionEnd).replace(/^ /, '');
+  const connectedStartText = `${beforeMeasureText}${prefix}${targetText} `;
 
   return {
-    text: `${connectedStartText}${endText}`,
+    text: `${connectedStartText}${restText.replace(/^ /, '')}`,
     selectionLocation: connectedStartText.length,
   };
 }

From 62f6c5b279d0fd1237802364ca3d0647d0450cb6 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 14:34:29 +0800
Subject: [PATCH 10/32] fix scroll sync logic

---
 assets/index.less | 22 ++++++++++++++++------
 examples/basic.js |  7 +++++--
 src/Mentions.tsx  | 41 +++++++++++++++++++++--------------------
 3 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 36f2038..d5fda8f 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -3,22 +3,32 @@
 .@{mentionsPrefixCls} {
   display: inline-block;
   position: relative;
+  white-space: pre-wrap;
 
   // ================= Input Area =================
   > textarea, &-measure {
     font-size: inherit;
+    font-size-adjust: inherit;
+    font-style: inherit;
+    font-variant: inherit;
+    font-stretch: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+
     padding: 0;
     margin: 0;
     line-height: inherit;
     vertical-align: top;
-    font-weight: inherit;
-    font-family: inherit;
     overflow: inherit;
-    word-break: break-all;
-    white-space: pre-wrap;
-    word-break: break-all;
+    word-break: inherit;
+    white-space: inherit;
     word-wrap: break-word;
-    overflow: auto;
+    overflow-x: initial;
+    overflow-y: auto;
+    text-align: inherit;
+    letter-spacing: inherit;
+    white-space: inherit;
+    tab-size: inherit;
   }
 
   > textarea {
diff --git a/examples/basic.js b/examples/basic.js
index 37b4970..7b0ba6c 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -12,12 +12,15 @@ class Demo extends React.Component {
   render() {
     return (
       <div>
-        <Mentions autoFocus>
+        <Mentions
+          autoFocus
+          defaultValue="aaaaaaaaaaaaaaaaA @bamboo @bamboo @bamboo @bamboo @bamboo @cat"
+        >
           <Option value="light">Light</Option>
           <Option value="bamboo">Bamboo</Option>
           <Option value="cat">Cat</Option>
         </Mentions>
-        <textarea />
+        <textarea className="ttt" />
       </div>
     );
   }
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 4aa2cfe..45400ba 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -9,6 +9,7 @@ import Option, { OptionProps } from './Option';
 import { getBeforeSelectionText, getLastMeasureIndex, replaceWithMeasure } from './util';
 
 interface MentionsProps {
+  defaultValue?: string;
   value?: string;
   onChange?: (text: string) => void;
   prefixCls?: string;
@@ -42,29 +43,24 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     return newState;
   }
 
-  public state = {
-    value: '',
-    measuring: false,
-    measureLocation: 0,
-    measureText: null,
-    activeIndex: 0,
-  };
-
   public textarea?: HTMLTextAreaElement;
   public measure?: HTMLDivElement;
 
-  public getSnapshotBeforeUpdate() {
-    const { measuring } = this.state;
-    if (measuring) {
-      return this.textarea!.scrollTop;
-    }
-    return 0;
+  constructor(props: MentionsProps) {
+    super(props);
+    this.state = {
+      value: props.defaultValue || props.value || '',
+      measuring: false,
+      measureLocation: 0,
+      measureText: null,
+      activeIndex: 0,
+    };
   }
 
-  public componentDidUpdate(_: any, __: any, scrollTop: number) {
+  public componentDidUpdate() {
     const { measuring } = this.state;
     if (measuring) {
-      this.measure!.scrollTop = scrollTop;
+      this.measure!.scrollTop = this.textarea!.scrollTop;
     }
   }
 
@@ -103,8 +99,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
         activeIndex: newActiveIndex,
       });
       event.preventDefault();
-    } else if ([KeyCode.ESC].indexOf(which) !== -1) {
-      // Break measure
+    } else if (which === KeyCode.ESC) {
       this.stopMeasure();
       return;
     } else if (which === KeyCode.ENTER) {
@@ -137,12 +132,17 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
    *  - If measure miss
    */
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
-    const { key } = event;
+    const { key, which } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
     const { prefix = '' } = this.props;
     const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
     const measureIndex = getLastMeasureIndex(selectionStartText, prefix);
 
+    // Skip if match the white key list
+    if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN].indexOf(which) !== -1) {
+      return;
+    }
+
     if (measureIndex !== -1) {
       const measureText = selectionStartText.slice(measureIndex + prefix.length);
       const matchOption: boolean = !!this.getOptions(measureText).length;
@@ -202,7 +202,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public render() {
     const { value, measureLocation, measuring, activeIndex } = this.state;
-    const { prefix, prefixCls, className, style, ...restProps } = this.props;
+    const { prefix = '', prefixCls, className, style, ...restProps } = this.props;
 
     const props = omit(restProps, ['onChange']);
 
@@ -227,6 +227,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
             >
               <span>{prefix}</span>
             </KeywordTrigger>
+            {value.slice(measureLocation + prefix.length)}
           </div>
         )}
       </div>

From f0a95a55a8430068af1566406ed9b737ac4c5b99 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 14:46:26 +0800
Subject: [PATCH 11/32] get caret position correct

---
 examples/basic.js |  7 ++-----
 src/Mentions.tsx  | 10 +++++++---
 src/util.ts       | 10 ++++++++++
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/examples/basic.js b/examples/basic.js
index 7b0ba6c..a1b8738 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -12,15 +12,12 @@ class Demo extends React.Component {
   render() {
     return (
       <div>
-        <Mentions
-          autoFocus
-          defaultValue="aaaaaaaaaaaaaaaaA @bamboo @bamboo @bamboo @bamboo @bamboo @cat"
-        >
+        <Mentions autoFocus defaultValue="Hello World">
           <Option value="light">Light</Option>
           <Option value="bamboo">Bamboo</Option>
           <Option value="cat">Cat</Option>
         </Mentions>
-        <textarea className="ttt" />
+        {/* <textarea className="ttt" /> */}
       </div>
     );
   }
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 45400ba..407e60b 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -6,7 +6,12 @@ import * as React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
 import KeywordTrigger from './KeywordTrigger';
 import Option, { OptionProps } from './Option';
-import { getBeforeSelectionText, getLastMeasureIndex, replaceWithMeasure } from './util';
+import {
+  getBeforeSelectionText,
+  getLastMeasureIndex,
+  replaceWithMeasure,
+  setInputSelection,
+} from './util';
 
 interface MentionsProps {
   defaultValue?: string;
@@ -113,8 +118,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       this.triggerChange(text);
       this.stopMeasure(() => {
         // We need restore the selection position
-        this.textarea!.selectionStart = selectionLocation;
-        this.textarea!.selectionEnd = selectionLocation;
+        setInputSelection(this.textarea!, selectionLocation);
       });
       event.preventDefault();
     }
diff --git a/src/util.ts b/src/util.ts
index 1af2969..49cbba7 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -53,3 +53,13 @@ export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
     selectionLocation: connectedStartText.length,
   };
 }
+
+export function setInputSelection(input: HTMLTextAreaElement, location: number) {
+  input.setSelectionRange(location, location);
+
+  // Reset caret into view
+  if (document.activeElement === input) {
+    input.blur();
+    input.focus();
+  }
+}

From 2be2e3bcd1e2a65b00916a7f4bf411c6367eb14b Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 15:07:27 +0800
Subject: [PATCH 12/32] clean up

---
 examples/basic.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/basic.js b/examples/basic.js
index a1b8738..b6fa1c9 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -17,7 +17,6 @@ class Demo extends React.Component {
           <Option value="bamboo">Bamboo</Option>
           <Option value="cat">Cat</Option>
         </Mentions>
-        {/* <textarea className="ttt" /> */}
       </div>
     );
   }

From 18fc36c9e0149d0aef888c1b49ba1a4d1c5b0264 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 15:13:06 +0800
Subject: [PATCH 13/32] hide measure style

---
 assets/index.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index d5fda8f..a719ef7 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -42,8 +42,8 @@
     top: 0;
     bottom: 0;
     pointer-events: none;
-    color: red;
-    // z-index: -1;
+    color: transparent;
+    z-index: -1;
   }
 
   // ================== Dropdown ==================

From ef2ddd334d71bef358409a427bb7a44d4698d9e0 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 16:39:17 +0800
Subject: [PATCH 14/32] support onSearch

---
 assets/index.less      |  1 +
 examples/dynamic.js    | 66 ++++++++++++++++++++++++++++++++++++++++++
 package.json           |  1 +
 src/DropdownMenu.tsx   |  2 ++
 src/KeywordTrigger.tsx |  1 +
 src/Mentions.tsx       | 24 +++++++++++----
 storybook/index.js     |  7 +++++
 7 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 examples/dynamic.js

diff --git a/assets/index.less b/assets/index.less
index a719ef7..05dd73a 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -33,6 +33,7 @@
 
   > textarea {
     border: none;
+    width: 100%;
   }
 
   &-measure {
diff --git a/examples/dynamic.js b/examples/dynamic.js
new file mode 100644
index 0000000..2ac8b4e
--- /dev/null
+++ b/examples/dynamic.js
@@ -0,0 +1,66 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import debounce from 'lodash.debounce';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.loadGithubUsers = debounce(this.loadGithubUsers, 200);
+  }
+
+  state = {
+    search: '',
+    loading: false,
+    users: [],
+  };
+
+  onSearch = search => {
+    this.setState({ search, loading: true });
+    console.log('Search:', search);
+    this.loadGithubUsers(search);
+  };
+
+  loadGithubUsers(key) {
+    if (!key) {
+      this.setState({
+        users: [],
+      });
+      return;
+    }
+
+    fetch(`https://api.github.com/search/users?q=${key}`)
+      .then(res => res.json())
+      .then(({ items }) => {
+        console.log('Fecth Users >', items);
+        this.setState({
+          users: items.slice(0, 10),
+          loading: false,
+        });
+      });
+  }
+
+  render() {
+    const { users, loading, search } = this.state;
+    return (
+      <div>
+        <Mentions onSearch={this.onSearch} style={{ width: '100%' }} loading={loading} autoFocus>
+          {users.map(({ login, avatar_url: avatar }) => (
+            <Option key={login} value={login}>
+              <img src={avatar} alt={login} />
+              {login}
+            </Option>
+          ))}
+        </Mentions>
+        search: <code>{search}</code>
+      </div>
+    );
+  }
+}
+
+export default Demo;
diff --git a/package.json b/package.json
index 4c3e895..fc32810 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "enzyme-adapter-react-16": "^1.7.1",
     "enzyme-to-json": "^3.1.4",
     "lint-staged": "^8.1.0",
+    "lodash.debounce": "^4.0.8",
     "pre-commit": "1.x",
     "querystring": "^0.2.0",
     "rc-tools": "^9.3.11",
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 45d5e2c..1c9bdce 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -22,6 +22,8 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
         {options.map(({ value }) => (
           <MenuItem key={value}>{value}</MenuItem>
         ))}
+
+        {!options.length && <MenuItem>Nothing match!</MenuItem>}
       </Menu>
     );
   }
diff --git a/src/KeywordTrigger.tsx b/src/KeywordTrigger.tsx
index eedd4fa..ad67461 100644
--- a/src/KeywordTrigger.tsx
+++ b/src/KeywordTrigger.tsx
@@ -24,6 +24,7 @@ const BUILT_IN_PLACEMENTS = {
 
 interface KeywordTriggerProps {
   visible?: boolean;
+  loading?: boolean;
   prefixCls?: string;
   options: OptionProps[];
   activeIndex: number;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 407e60b..050452b 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -17,6 +17,7 @@ interface MentionsProps {
   defaultValue?: string;
   value?: string;
   onChange?: (text: string) => void;
+  onSearch?: (text: string) => void;
   prefixCls?: string;
   prefix?: string;
   className?: string;
@@ -64,6 +65,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public componentDidUpdate() {
     const { measuring } = this.state;
+
+    // Sync measure div top with textarea for rc-trigger usage
     if (measuring) {
       this.measure!.scrollTop = this.textarea!.scrollTop;
     }
@@ -129,16 +132,17 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
    * 1. When user press `prefix`
    * 2. When measureText !== prevMeasureText
    *  - If measure hit
+   *  - If measuring
    *
    * When to stop measure:
    * 1. Selection is out of range
-   * 2. When measureText !== prevMeasureText
-   *  - If measure miss
+   * 2. Contains `space`
+   * 3. ESC or select one
    */
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key, which } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
-    const { prefix = '' } = this.props;
+    const { prefix = '', onSearch } = this.props;
     const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
     const measureIndex = getLastMeasureIndex(selectionStartText, prefix);
 
@@ -149,15 +153,25 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
     if (measureIndex !== -1) {
       const measureText = selectionStartText.slice(measureIndex + prefix.length);
+      const validateMeasure = measureText.indexOf(' ') === -1;
       const matchOption: boolean = !!this.getOptions(measureText).length;
 
-      if (key === prefix || (measureText !== prevMeasureText && matchOption)) {
+      if (key === prefix || measuring || (measureText !== prevMeasureText && matchOption)) {
         this.startMeasure(measureText, measureIndex);
       }
 
-      if (measureText !== prevMeasureText && !matchOption) {
+      // Stop if measureText is invalidate
+      if (measuring && !validateMeasure) {
         this.stopMeasure();
       }
+
+      /**
+       * We will trigger `onSearch` to developer since they may use for async update.
+       * If met `space` means user finished searching.
+       */
+      if (onSearch && validateMeasure) {
+        onSearch(measureText);
+      }
     } else if (measuring) {
       this.stopMeasure();
     }
diff --git a/storybook/index.js b/storybook/index.js
index 19f8995..427a224 100644
--- a/storybook/index.js
+++ b/storybook/index.js
@@ -7,7 +7,9 @@ import { withConsole } from '@storybook/addon-console';
 import { withViewport } from '@storybook/addon-viewport';
 import { withInfo } from '@storybook/addon-info';
 import BasicSource from 'rc-source-loader!../examples/basic';
+import DynamicSource from 'rc-source-loader!../examples/dynamic';
 import Basic from '../examples/basic';
+import Dynamic from '../examples/dynamic';
 import READMECode from '../README.md';
 
 storiesOf('rc-mentions', module)
@@ -37,4 +39,9 @@ storiesOf('rc-mentions', module)
     source: {
       code: BasicSource,
     },
+  })
+  .add('dynamic', () => <Dynamic />, {
+    source: {
+      code: DynamicSource,
+    },
   });

From eda7a959badc2e617b6de4910befe7c72fedb285 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 16:56:01 +0800
Subject: [PATCH 15/32] add not found

---
 assets/index.less    | 4 ++++
 src/DropdownMenu.tsx | 8 +++++---
 src/Mentions.tsx     | 2 +-
 src/Option.tsx       | 1 +
 src/util.ts          | 6 +++++-
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 05dd73a..3426eb9 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -82,6 +82,10 @@
         &-active {
           background: #e6f7ff;
         }
+
+        &-disabled {
+          opacity: 0.5;
+        }
       }
     }
   }
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 1c9bdce..430afa0 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -19,11 +19,13 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
 
     return (
       <Menu prefixCls={`${prefixCls}-menu`} activeKey={activeOption.value}>
-        {options.map(({ value }) => (
-          <MenuItem key={value}>{value}</MenuItem>
+        {options.map(({ value, disabled }) => (
+          <MenuItem key={value} disabled={disabled}>
+            {value}
+          </MenuItem>
         ))}
 
-        {!options.length && <MenuItem>Nothing match!</MenuItem>}
+        {!options.length && <MenuItem disabled={true}>Nothing match!</MenuItem>}
       </Menu>
     );
   }
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 050452b..1500c09 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -89,7 +89,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   // Check if hit the measure keyword
   public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
-    const { which, key } = event;
+    const { which } = event;
     const { value, activeIndex, measuring, measureLocation } = this.state;
     const { prefix = '' } = this.props;
 
diff --git a/src/Option.tsx b/src/Option.tsx
index ff36743..86aaef1 100644
--- a/src/Option.tsx
+++ b/src/Option.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 export interface OptionProps {
   value?: string;
+  disabled?: boolean;
 }
 
 const Option: React.SFC<OptionProps> = () => null;
diff --git a/src/util.ts b/src/util.ts
index 49cbba7..40319a1 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -19,6 +19,10 @@ interface MeasureConfig {
   targetText: string;
 }
 
+function lower(char: string | undefined): string {
+  return (char || '').toLowerCase();
+}
+
 /**
  * Paint targetText into current text:
  *  text: little@litest
@@ -38,7 +42,7 @@ export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
   // Reuse rest text as it can
   const targetTextLen = targetText.length;
   for (let i = 0; i < targetTextLen; i += 1) {
-    if (restText[i] !== targetText[i]) {
+    if (lower(restText[i]) !== lower(targetText[i])) {
       restText = restText.slice(i);
       break;
     } else if (i === targetTextLen - 1) {

From 9bcd401b79f6830289f5d3bc2ce8f071284cabaa Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 17:53:46 +0800
Subject: [PATCH 16/32] support select

---
 examples/dynamic.js    | 37 +++++++++++++++++++++++++--------
 examples/dynamic.less  | 29 ++++++++++++++++++++++++++
 package.json           |  1 +
 src/DropdownMenu.tsx   | 40 +++++++++++++++++++++++++++--------
 src/KeywordTrigger.tsx | 11 ++--------
 src/Mentions.tsx       | 47 +++++++++++++++++++++++++++++++++---------
 src/MentionsContext.ts | 21 +++++++++++++++++++
 src/Option.tsx         |  3 +++
 src/util.ts            | 11 +++++-----
 9 files changed, 158 insertions(+), 42 deletions(-)
 create mode 100644 examples/dynamic.less
 create mode 100644 src/MentionsContext.ts

diff --git a/examples/dynamic.js b/examples/dynamic.js
index 2ac8b4e..1a4b122 100644
--- a/examples/dynamic.js
+++ b/examples/dynamic.js
@@ -4,6 +4,7 @@ import React from 'react';
 import debounce from 'lodash.debounce';
 import Mentions from '../src';
 import '../assets/index.less';
+import './dynamic.less';
 
 const { Option } = Mentions;
 
@@ -21,7 +22,7 @@ class Demo extends React.Component {
   };
 
   onSearch = search => {
-    this.setState({ search, loading: true });
+    this.setState({ search, loading: !!search });
     console.log('Search:', search);
     this.loadGithubUsers(search);
   };
@@ -37,7 +38,13 @@ class Demo extends React.Component {
     fetch(`https://api.github.com/search/users?q=${key}`)
       .then(res => res.json())
       .then(({ items }) => {
-        console.log('Fecth Users >', items);
+        const { search } = this.state;
+        if (search !== key) {
+          console.log('Out Of Date >', key, items);
+          return;
+        }
+
+        console.log('Fetch Users >', items);
         this.setState({
           users: items.slice(0, 10),
           loading: false,
@@ -47,15 +54,27 @@ class Demo extends React.Component {
 
   render() {
     const { users, loading, search } = this.state;
+
+    let options;
+    if (loading) {
+      options = (
+        <Option value={search} disabled>
+          Searching {`'${search}'`}...
+        </Option>
+      );
+    } else {
+      options = users.map(({ login, avatar_url: avatar }) => (
+        <Option key={login} value={login} className="dynamic-option">
+          <img src={avatar} alt={login} />
+          <span>{login}</span>
+        </Option>
+      ));
+    }
+
     return (
       <div>
-        <Mentions onSearch={this.onSearch} style={{ width: '100%' }} loading={loading} autoFocus>
-          {users.map(({ login, avatar_url: avatar }) => (
-            <Option key={login} value={login}>
-              <img src={avatar} alt={login} />
-              {login}
-            </Option>
-          ))}
+        <Mentions onSearch={this.onSearch} style={{ width: '100%' }} autoFocus>
+          {options}
         </Mentions>
         search: <code>{search}</code>
       </div>
diff --git a/examples/dynamic.less b/examples/dynamic.less
new file mode 100644
index 0000000..a71eaa0
--- /dev/null
+++ b/examples/dynamic.less
@@ -0,0 +1,29 @@
+.dynamic-option {
+  font-size: 20px;
+
+  img {
+    height: 20px;
+    width: 20px;
+    vertical-align: middle;
+    margin-right: 4px;
+    transition: all .3s;
+  }
+
+  span {
+    vertical-align: middle;
+    display: inline-block;
+    transition: all .3s;
+    margin-right: 8px;
+  }
+
+  &.rc-mentions-dropdown-menu-item-active {
+    img {
+      transform: scale(1.8);
+    }
+
+    span {
+      margin-left: 8px;
+      margin-right: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index fc32810..07572c5 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "typescript": "^3.2.2"
   },
   "dependencies": {
+    "@ant-design/create-react-context": "^0.2.4",
     "babel-runtime": "^6.23.0",
     "classnames": "^2.2.6",
     "omit.js": "^1.0.2",
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 430afa0..207d7d8 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -1,11 +1,11 @@
 import Menu, { MenuItem } from 'rc-menu';
 import * as React from 'react';
+import { MentionsContextConsumer, MentionsContextProps } from './MentionsContext';
 import { OptionProps } from './Option';
 
 interface DropdownMenuProps {
   prefixCls?: string;
   options: OptionProps[];
-  activeIndex: number;
 }
 
 /**
@@ -13,21 +13,43 @@ interface DropdownMenuProps {
  * The focus is controlled by textarea to make accessibility easy.
  */
 class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
-  public render() {
-    const { prefixCls, options, activeIndex } = this.props;
+  public renderDropdown = ({ activeIndex, setActiveIndex, selectOption }: MentionsContextProps) => {
+    const { prefixCls, options } = this.props;
     const activeOption = options[activeIndex] || {};
 
     return (
-      <Menu prefixCls={`${prefixCls}-menu`} activeKey={activeOption.value}>
-        {options.map(({ value, disabled }) => (
-          <MenuItem key={value} disabled={disabled}>
-            {value}
-          </MenuItem>
-        ))}
+      <Menu
+        prefixCls={`${prefixCls}-menu`}
+        activeKey={activeOption.value}
+        onSelect={({ key }: { key: string }) => {
+          const option = options.find(({ value }) => value === key);
+          selectOption(option!);
+        }}
+      >
+        {options.map((option, index) => {
+          const { value, disabled, children, className, style } = option;
+          return (
+            <MenuItem
+              key={value}
+              disabled={disabled}
+              className={className}
+              style={style}
+              onMouseEnter={() => {
+                setActiveIndex(index);
+              }}
+            >
+              {children}
+            </MenuItem>
+          );
+        })}
 
         {!options.length && <MenuItem disabled={true}>Nothing match!</MenuItem>}
       </Menu>
     );
+  };
+
+  public render() {
+    return <MentionsContextConsumer>{this.renderDropdown}</MentionsContextConsumer>;
   }
 }
 
diff --git a/src/KeywordTrigger.tsx b/src/KeywordTrigger.tsx
index ad67461..e56ca48 100644
--- a/src/KeywordTrigger.tsx
+++ b/src/KeywordTrigger.tsx
@@ -27,21 +27,14 @@ interface KeywordTriggerProps {
   loading?: boolean;
   prefixCls?: string;
   options: OptionProps[];
-  activeIndex: number;
 }
 
 class KeywordTrigger extends React.Component<KeywordTriggerProps, {}> {
   public getDropdownPrefix = () => `${this.props.prefixCls}-dropdown`;
 
   public getDropdownElement = () => {
-    const { options, activeIndex } = this.props;
-    return (
-      <DropdownMenu
-        prefixCls={this.getDropdownPrefix()}
-        options={options}
-        activeIndex={activeIndex}
-      />
-    );
+    const { options } = this.props;
+    return <DropdownMenu prefixCls={this.getDropdownPrefix()} options={options} />;
   };
 
   public render() {
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 1500c09..df5c3ca 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -5,6 +5,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
 import KeywordTrigger from './KeywordTrigger';
+import { MentionsContextProvider } from './MentionsContext';
 import Option, { OptionProps } from './Option';
 import {
   getBeforeSelectionText,
@@ -177,6 +178,29 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     }
   };
 
+  public selectOption = (option: OptionProps) => {
+    const { value, measureLocation } = this.state;
+    const { prefix = '' } = this.props;
+
+    const { value: mentionValue = '' } = option;
+    const { text, selectionLocation } = replaceWithMeasure(value, {
+      measureLocation,
+      prefix,
+      targetText: mentionValue,
+    });
+    this.triggerChange(text);
+    this.stopMeasure(() => {
+      // We need restore the selection position
+      setInputSelection(this.textarea!, selectionLocation);
+    });
+  };
+
+  public setActiveIndex = (activeIndex: number) => {
+    this.setState({
+      activeIndex,
+    });
+  };
+
   public setTextAreaRef = (element: HTMLTextAreaElement) => {
     this.textarea = element;
   };
@@ -189,9 +213,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     const targetMeasureText = (measureText || this.state.measureText || '').toLocaleLowerCase();
     const { children } = this.props;
     const list = toArray(children)
-      .map(({ props: { value } }: { props: OptionProps }) => ({
-        value,
-      }))
+      .map(({ props }: { props: OptionProps }) => props)
       .filter(({ value = '' }: OptionProps) => {
         return value.toLowerCase().indexOf(targetMeasureText) !== -1;
       });
@@ -224,6 +246,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
     const props = omit(restProps, ['onChange']);
 
+    const options = measuring ? this.getOptions() : [];
+
     return (
       <div className={classNames(prefixCls, className)} style={style}>
         <textarea
@@ -237,14 +261,17 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
         {measuring && (
           <div ref={this.setMeasureRef} className={`${prefixCls}-measure`}>
             {value.slice(0, measureLocation)}
-            <KeywordTrigger
-              prefixCls={prefixCls}
-              options={this.getOptions()}
-              activeIndex={activeIndex}
-              visible={true}
+            <MentionsContextProvider
+              value={{
+                activeIndex,
+                setActiveIndex: this.setActiveIndex,
+                selectOption: this.selectOption,
+              }}
             >
-              <span>{prefix}</span>
-            </KeywordTrigger>
+              <KeywordTrigger prefixCls={prefixCls} options={options} visible={true}>
+                <span>{prefix}</span>
+              </KeywordTrigger>
+            </MentionsContextProvider>
             {value.slice(measureLocation + prefix.length)}
           </div>
         )}
diff --git a/src/MentionsContext.ts b/src/MentionsContext.ts
new file mode 100644
index 0000000..a755b08
--- /dev/null
+++ b/src/MentionsContext.ts
@@ -0,0 +1,21 @@
+import createReactContext, { Context } from '@ant-design/create-react-context';
+import { OptionProps } from './Option';
+
+export interface MentionsContextProps {
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+  selectOption: (option: OptionProps) => void;
+}
+
+const MentionsContext: Context<MentionsContextProps> = createReactContext({
+  activeIndex: 0,
+  setActiveIndex: (_: number) => {
+    /* Do nothing */
+  },
+  selectOption: (_: OptionProps) => {
+    /* Do nothing */
+  },
+});
+
+export const MentionsContextProvider = MentionsContext.Provider;
+export const MentionsContextConsumer = MentionsContext.Consumer;
diff --git a/src/Option.tsx b/src/Option.tsx
index 86aaef1..88e0fa1 100644
--- a/src/Option.tsx
+++ b/src/Option.tsx
@@ -3,6 +3,9 @@ import * as React from 'react';
 export interface OptionProps {
   value?: string;
   disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 const Option: React.SFC<OptionProps> = () => null;
diff --git a/src/util.ts b/src/util.ts
index 40319a1..1c954e8 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -61,9 +61,10 @@ export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
 export function setInputSelection(input: HTMLTextAreaElement, location: number) {
   input.setSelectionRange(location, location);
 
-  // Reset caret into view
-  if (document.activeElement === input) {
-    input.blur();
-    input.focus();
-  }
+  /**
+   * Reset caret into view.
+   * Since this function always called by user control, it's safe to focus element.
+   */
+  input.blur();
+  input.focus();
 }

From 2635fe4d1d9d1bfaf438a832d561d2d868abe794 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 18:14:50 +0800
Subject: [PATCH 17/32] adjust cut logic

---
 src/Mentions.tsx | 17 ++++-------------
 src/util.ts      | 40 ++++++++++++++++++++++++++++------------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index df5c3ca..685fc78 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -91,8 +91,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   // Check if hit the measure keyword
   public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { which } = event;
-    const { value, activeIndex, measuring, measureLocation } = this.state;
-    const { prefix = '' } = this.props;
+    const { activeIndex, measuring } = this.state;
 
     // Skip if not measuring
     if (!measuring) {
@@ -113,17 +112,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       return;
     } else if (which === KeyCode.ENTER) {
       // Measure hit
-      const { value: mentionValue = '' } = this.getOptions()[activeIndex] || {};
-      const { text, selectionLocation } = replaceWithMeasure(value, {
-        measureLocation,
-        prefix,
-        targetText: mentionValue,
-      });
-      this.triggerChange(text);
-      this.stopMeasure(() => {
-        // We need restore the selection position
-        setInputSelection(this.textarea!, selectionLocation);
-      });
+      const option = this.getOptions()[activeIndex];
+      this.selectOption(option);
       event.preventDefault();
     }
   };
@@ -187,6 +177,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       measureLocation,
       prefix,
       targetText: mentionValue,
+      selectionStart: this.textarea!.selectionStart,
     });
     this.triggerChange(text);
     this.stopMeasure(() => {
diff --git a/src/util.ts b/src/util.ts
index 1c954e8..9e46f81 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -17,12 +17,34 @@ interface MeasureConfig {
   measureLocation: number;
   prefix: string;
   targetText: string;
+  selectionStart: number;
 }
 
 function lower(char: string | undefined): string {
   return (char || '').toLowerCase();
 }
 
+function reduceText(text: string, targetText: string) {
+  const firstChar = text[0];
+  if (!firstChar || firstChar === ' ') {
+    return text;
+  }
+
+  // Reuse rest text as it can
+  let restText = text;
+  const targetTextLen = targetText.length;
+  for (let i = 0; i < targetTextLen; i += 1) {
+    if (lower(restText[i]) !== lower(targetText[i])) {
+      restText = restText.slice(i);
+      break;
+    } else if (i === targetTextLen - 1) {
+      restText = restText.slice(targetTextLen);
+    }
+  }
+
+  return restText;
+}
+
 /**
  * Paint targetText into current text:
  *  text: little@litest
@@ -30,25 +52,19 @@ function lower(char: string | undefined): string {
  *  => little @light test
  */
 export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
-  const { measureLocation, prefix, targetText } = measureConfig;
+  const { measureLocation, prefix, targetText, selectionStart } = measureConfig;
 
   // Before text will append one space if have other text
   let beforeMeasureText = text.slice(0, measureLocation).replace(/ $/, '');
   if (beforeMeasureText) {
     beforeMeasureText = `${beforeMeasureText} `;
   }
-  let restText = text.slice(measureLocation + prefix.length);
 
-  // Reuse rest text as it can
-  const targetTextLen = targetText.length;
-  for (let i = 0; i < targetTextLen; i += 1) {
-    if (lower(restText[i]) !== lower(targetText[i])) {
-      restText = restText.slice(i);
-      break;
-    } else if (i === targetTextLen - 1) {
-      restText = restText.slice(targetTextLen);
-    }
-  }
+  // Cut duplicate string with current targetText
+  const restText = reduceText(
+    text.slice(selectionStart),
+    targetText.slice(selectionStart - measureLocation - prefix.length),
+  );
 
   const connectedStartText = `${beforeMeasureText}${prefix}${targetText} `;
 

From 096b7d41ffc07bcddd383d207d683604f91b6564 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 18:20:32 +0800
Subject: [PATCH 18/32] update demo

---
 examples/dynamic.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/dynamic.js b/examples/dynamic.js
index 1a4b122..7d4a374 100644
--- a/examples/dynamic.js
+++ b/examples/dynamic.js
@@ -12,7 +12,7 @@ class Demo extends React.Component {
   constructor(props) {
     super(props);
 
-    this.loadGithubUsers = debounce(this.loadGithubUsers, 200);
+    this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
   }
 
   state = {
@@ -22,7 +22,7 @@ class Demo extends React.Component {
   };
 
   onSearch = search => {
-    this.setState({ search, loading: !!search });
+    this.setState({ search, loading: !!search, users: [] });
     console.log('Search:', search);
     this.loadGithubUsers(search);
   };
@@ -37,7 +37,7 @@ class Demo extends React.Component {
 
     fetch(`https://api.github.com/search/users?q=${key}`)
       .then(res => res.json())
-      .then(({ items }) => {
+      .then(({ items = [] }) => {
         const { search } = this.state;
         if (search !== key) {
           console.log('Out Of Date >', key, items);

From d6759437f51849cbf3a3e57eec80f623bbe1ead2 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 20:04:21 +0800
Subject: [PATCH 19/32] support multiple prefix

---
 assets/index.less           |  5 ++--
 examples/multiple-prefix.js | 46 +++++++++++++++++++++++++++++++++++++
 src/Mentions.tsx            | 37 ++++++++++++++++-------------
 src/util.ts                 | 21 +++++++++++++++--
 storybook/index.js          |  7 ++++++
 5 files changed, 96 insertions(+), 20 deletions(-)
 create mode 100644 examples/multiple-prefix.js

diff --git a/assets/index.less b/assets/index.less
index 3426eb9..6e90c7e 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -43,8 +43,9 @@
     top: 0;
     bottom: 0;
     pointer-events: none;
-    color: transparent;
-    z-index: -1;
+    color: rgba(255, 0, 0, 0.3);
+    // color: transparent;
+    // z-index: -1;
   }
 
   // ================== Dropdown ==================
diff --git a/examples/multiple-prefix.js b/examples/multiple-prefix.js
new file mode 100644
index 0000000..18f3a6d
--- /dev/null
+++ b/examples/multiple-prefix.js
@@ -0,0 +1,46 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+const OPTIONS = {
+  '@': ['light', 'bamboo', 'cat'],
+  '#': ['123', '456', '7890'],
+};
+
+class Demo extends React.Component {
+  state = {
+    prefix: '@',
+  };
+
+  onSearch = (_, prefix) => {
+    this.setState({ prefix });
+  };
+
+  render() {
+    const { prefix } = this.state;
+
+    return (
+      <div>
+        @ for string, # for number
+        <Mentions
+          prefix={['@', '#']}
+          onSearch={this.onSearch}
+          style={{ width: '100%', fontSize: 50 }}
+          autoFocus
+        >
+          {OPTIONS[prefix].map(value => (
+            <Option value={value} key={value}>
+              {value}
+            </Option>
+          ))}
+        </Mentions>
+      </div>
+    );
+  }
+}
+
+export default Demo;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 685fc78..164f13a 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -18,9 +18,9 @@ interface MentionsProps {
   defaultValue?: string;
   value?: string;
   onChange?: (text: string) => void;
-  onSearch?: (text: string) => void;
+  onSearch?: (text: string, prefix: string) => void;
   prefixCls?: string;
-  prefix?: string;
+  prefix?: string | string[];
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;
@@ -29,6 +29,7 @@ interface MentionsState {
   value: string;
   measuring: boolean;
   measureText: string | null;
+  measurePrefix: string;
   measureLocation: number;
   activeIndex: number;
 }
@@ -60,6 +61,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       measuring: false,
       measureLocation: 0,
       measureText: null,
+      measurePrefix: '',
       activeIndex: 0,
     };
   }
@@ -135,7 +137,10 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     const { measureText: prevMeasureText, measuring } = this.state;
     const { prefix = '', onSearch } = this.props;
     const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
-    const measureIndex = getLastMeasureIndex(selectionStartText, prefix);
+    const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
+      selectionStartText,
+      prefix,
+    );
 
     // Skip if match the white key list
     if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN].indexOf(which) !== -1) {
@@ -143,12 +148,12 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     }
 
     if (measureIndex !== -1) {
-      const measureText = selectionStartText.slice(measureIndex + prefix.length);
+      const measureText = selectionStartText.slice(measureIndex + measurePrefix.length);
       const validateMeasure = measureText.indexOf(' ') === -1;
       const matchOption: boolean = !!this.getOptions(measureText).length;
 
-      if (key === prefix || measuring || (measureText !== prevMeasureText && matchOption)) {
-        this.startMeasure(measureText, measureIndex);
+      if (key === measurePrefix || measuring || (measureText !== prevMeasureText && matchOption)) {
+        this.startMeasure(measureText, measurePrefix, measureIndex);
       }
 
       // Stop if measureText is invalidate
@@ -161,7 +166,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
        * If met `space` means user finished searching.
        */
       if (onSearch && validateMeasure) {
-        onSearch(measureText);
+        onSearch(measureText, measurePrefix);
       }
     } else if (measuring) {
       this.stopMeasure();
@@ -169,14 +174,13 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public selectOption = (option: OptionProps) => {
-    const { value, measureLocation } = this.state;
-    const { prefix = '' } = this.props;
+    const { value, measureLocation, measurePrefix } = this.state;
 
     const { value: mentionValue = '' } = option;
     const { text, selectionLocation } = replaceWithMeasure(value, {
       measureLocation,
-      prefix,
       targetText: mentionValue,
+      prefix: measurePrefix,
       selectionStart: this.textarea!.selectionStart,
     });
     this.triggerChange(text);
@@ -211,10 +215,11 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     return list;
   };
 
-  public startMeasure(measureText: string, measureLocation: number) {
+  public startMeasure(measureText: string, measurePrefix: string, measureLocation: number) {
     this.setState({
       measuring: true,
       measureText,
+      measurePrefix,
       measureLocation,
       activeIndex: 0,
     });
@@ -232,10 +237,10 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   }
 
   public render() {
-    const { value, measureLocation, measuring, activeIndex } = this.state;
-    const { prefix = '', prefixCls, className, style, ...restProps } = this.props;
+    const { value, measureLocation, measurePrefix, measuring, activeIndex } = this.state;
+    const { prefixCls, className, style, ...restProps } = this.props;
 
-    const props = omit(restProps, ['onChange']);
+    const props = omit(restProps, ['onChange', 'prefix']);
 
     const options = measuring ? this.getOptions() : [];
 
@@ -260,10 +265,10 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
               }}
             >
               <KeywordTrigger prefixCls={prefixCls} options={options} visible={true}>
-                <span>{prefix}</span>
+                <span>{measurePrefix}</span>
               </KeywordTrigger>
             </MentionsContextProvider>
-            {value.slice(measureLocation + prefix.length)}
+            {value.slice(measureLocation + measurePrefix.length)}
           </div>
         )}
       </div>
diff --git a/src/util.ts b/src/util.ts
index 9e46f81..e503896 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -6,11 +6,28 @@ export function getBeforeSelectionText(input: HTMLTextAreaElement) {
   return input.value.slice(0, selectionStart);
 }
 
+interface MeasureIndex {
+  location: number;
+  prefix: string;
+}
 /**
  * Find the last match prefix index
  */
-export function getLastMeasureIndex(text: string, prefix: string = ''): number {
-  return text.lastIndexOf(prefix);
+export function getLastMeasureIndex(text: string, prefix: string | string[] = ''): MeasureIndex {
+  const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
+  return prefixList.reduce(
+    (lastMatch: MeasureIndex, prefixStr): MeasureIndex => {
+      const lastIndex = text.lastIndexOf(prefixStr);
+      if (lastIndex > lastMatch.location) {
+        return {
+          location: lastIndex,
+          prefix: prefixStr,
+        };
+      }
+      return lastMatch;
+    },
+    { location: -1, prefix: '' },
+  );
 }
 
 interface MeasureConfig {
diff --git a/storybook/index.js b/storybook/index.js
index 427a224..63fac9c 100644
--- a/storybook/index.js
+++ b/storybook/index.js
@@ -8,8 +8,10 @@ import { withViewport } from '@storybook/addon-viewport';
 import { withInfo } from '@storybook/addon-info';
 import BasicSource from 'rc-source-loader!../examples/basic';
 import DynamicSource from 'rc-source-loader!../examples/dynamic';
+import MultiplePrefixSource from 'rc-source-loader!../examples/multiple-prefix';
 import Basic from '../examples/basic';
 import Dynamic from '../examples/dynamic';
+import MultiplePrefix from '../examples/multiple-prefix';
 import READMECode from '../README.md';
 
 storiesOf('rc-mentions', module)
@@ -44,4 +46,9 @@ storiesOf('rc-mentions', module)
     source: {
       code: DynamicSource,
     },
+  })
+  .add('multiple-prefix', () => <MultiplePrefix />, {
+    source: {
+      code: MultiplePrefixSource,
+    },
   });

From 5273d7c4ebe9ad8cc1d27918db88c804e93abc54 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 21:12:57 +0800
Subject: [PATCH 20/32] support customize trigger validate

---
 examples/split.js  | 36 ++++++++++++++++++++++++++++++++++++
 src/Mentions.tsx   | 23 ++++++++++++++++++-----
 src/util.ts        | 31 +++++++++++++++++++++++--------
 storybook/index.js |  7 +++++++
 4 files changed, 84 insertions(+), 13 deletions(-)
 create mode 100644 examples/split.js

diff --git a/examples/split.js b/examples/split.js
new file mode 100644
index 0000000..17bc3d4
--- /dev/null
+++ b/examples/split.js
@@ -0,0 +1,36 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+function validateSearch(text) {
+  return text.length <= 5;
+}
+
+class Demo extends React.Component {
+  state = {};
+
+  render() {
+    return (
+      <div>
+        <h1>Customize Split Logic</h1>
+        <p>Only validate string length less than 5</p>
+        <Mentions
+          style={{ width: '100%', fontSize: 50 }}
+          split=""
+          validateSearch={validateSearch}
+          autoFocus
+        >
+          <Option value="light">Light</Option>
+          <Option value="bamboo">Bamboo</Option>
+          <Option value="cat">Cat</Option>
+        </Mentions>
+      </div>
+    );
+  }
+}
+
+export default Demo;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 164f13a..a03011f 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -12,9 +12,10 @@ import {
   getLastMeasureIndex,
   replaceWithMeasure,
   setInputSelection,
+  validateSearch as defaultValidateSearch,
 } from './util';
 
-interface MentionsProps {
+export interface MentionsProps {
   defaultValue?: string;
   value?: string;
   onChange?: (text: string) => void;
@@ -24,6 +25,8 @@ interface MentionsProps {
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;
+  split?: string;
+  validateSearch?: typeof defaultValidateSearch;
 }
 interface MentionsState {
   value: string;
@@ -39,6 +42,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public static defaultProps = {
     prefixCls: 'rc-mentions',
     prefix: '@',
+    split: ' ',
+    validateSearch: defaultValidateSearch,
   };
 
   public static getDerivedStateFromProps(props: MentionsProps, prevState: MentionsState) {
@@ -135,21 +140,27 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key, which } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
-    const { prefix = '', onSearch } = this.props;
-    const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
+    const { prefix = '', split = ' ', onSearch, validateSearch } = this.props;
+    const target = event.target as HTMLTextAreaElement;
+    const selectionStartText = getBeforeSelectionText(target);
     const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
       selectionStartText,
       prefix,
     );
 
     // Skip if match the white key list
-    if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN].indexOf(which) !== -1) {
+    if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
+      return;
+    }
+
+    // Skip if is the last one
+    if (KeyCode.RIGHT === which && target.selectionStart === target.value.length) {
       return;
     }
 
     if (measureIndex !== -1) {
       const measureText = selectionStartText.slice(measureIndex + measurePrefix.length);
-      const validateMeasure = measureText.indexOf(' ') === -1;
+      const validateMeasure: boolean = validateSearch!(measureText, this.props);
       const matchOption: boolean = !!this.getOptions(measureText).length;
 
       if (key === measurePrefix || measuring || (measureText !== prevMeasureText && matchOption)) {
@@ -175,6 +186,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public selectOption = (option: OptionProps) => {
     const { value, measureLocation, measurePrefix } = this.state;
+    const { split } = this.props;
 
     const { value: mentionValue = '' } = option;
     const { text, selectionLocation } = replaceWithMeasure(value, {
@@ -182,6 +194,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       targetText: mentionValue,
       prefix: measurePrefix,
       selectionStart: this.textarea!.selectionStart,
+      split: split!,
     });
     this.triggerChange(text);
     this.stopMeasure(() => {
diff --git a/src/util.ts b/src/util.ts
index e503896..729df2e 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,3 +1,5 @@
+import { MentionsProps } from './Mentions';
+
 /**
  * Cut input selection into 2 part and return text before selection start
  */
@@ -35,15 +37,16 @@ interface MeasureConfig {
   prefix: string;
   targetText: string;
   selectionStart: number;
+  split: string;
 }
 
 function lower(char: string | undefined): string {
   return (char || '').toLowerCase();
 }
 
-function reduceText(text: string, targetText: string) {
+function reduceText(text: string, targetText: string, split: string) {
   const firstChar = text[0];
-  if (!firstChar || firstChar === ' ') {
+  if (!firstChar || firstChar === split) {
     return text;
   }
 
@@ -69,24 +72,31 @@ function reduceText(text: string, targetText: string) {
  *  => little @light test
  */
 export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
-  const { measureLocation, prefix, targetText, selectionStart } = measureConfig;
+  const { measureLocation, prefix, targetText, selectionStart, split } = measureConfig;
 
   // Before text will append one space if have other text
-  let beforeMeasureText = text.slice(0, measureLocation).replace(/ $/, '');
+  let beforeMeasureText = text.slice(0, measureLocation);
+  if (beforeMeasureText[beforeMeasureText.length - split.length] === split) {
+    beforeMeasureText = beforeMeasureText.slice(0, beforeMeasureText.length - split.length);
+  }
   if (beforeMeasureText) {
-    beforeMeasureText = `${beforeMeasureText} `;
+    beforeMeasureText = `${beforeMeasureText}${split}`;
   }
 
   // Cut duplicate string with current targetText
-  const restText = reduceText(
+  let restText = reduceText(
     text.slice(selectionStart),
     targetText.slice(selectionStart - measureLocation - prefix.length),
+    split,
   );
+  if (restText.slice(0, split.length) === split) {
+    restText = restText.slice(split.length);
+  }
 
-  const connectedStartText = `${beforeMeasureText}${prefix}${targetText} `;
+  const connectedStartText = `${beforeMeasureText}${prefix}${targetText}${split}`;
 
   return {
-    text: `${connectedStartText}${restText.replace(/^ /, '')}`,
+    text: `${connectedStartText}${restText}`,
     selectionLocation: connectedStartText.length,
   };
 }
@@ -101,3 +111,8 @@ export function setInputSelection(input: HTMLTextAreaElement, location: number)
   input.blur();
   input.focus();
 }
+
+export function validateSearch(text: string, props: MentionsProps) {
+  const { split } = props;
+  return !split || text.indexOf(split) === -1;
+}
diff --git a/storybook/index.js b/storybook/index.js
index 63fac9c..6601710 100644
--- a/storybook/index.js
+++ b/storybook/index.js
@@ -9,9 +9,11 @@ import { withInfo } from '@storybook/addon-info';
 import BasicSource from 'rc-source-loader!../examples/basic';
 import DynamicSource from 'rc-source-loader!../examples/dynamic';
 import MultiplePrefixSource from 'rc-source-loader!../examples/multiple-prefix';
+import SplitSource from 'rc-source-loader!../examples/split';
 import Basic from '../examples/basic';
 import Dynamic from '../examples/dynamic';
 import MultiplePrefix from '../examples/multiple-prefix';
+import Split from '../examples/split';
 import READMECode from '../README.md';
 
 storiesOf('rc-mentions', module)
@@ -51,4 +53,9 @@ storiesOf('rc-mentions', module)
     source: {
       code: MultiplePrefixSource,
     },
+  })
+  .add('split', () => <Split />, {
+    source: {
+      code: SplitSource,
+    },
   });

From 9d64515566515e6f529f3b7c05f22771b066a4e7 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 May 2019 22:09:00 +0800
Subject: [PATCH 21/32] to 3

---
 examples/split.js |  5 +++--
 src/Mentions.tsx  | 23 +++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/examples/split.js b/examples/split.js
index 17bc3d4..f50e506 100644
--- a/examples/split.js
+++ b/examples/split.js
@@ -7,7 +7,8 @@ import '../assets/index.less';
 const { Option } = Mentions;
 
 function validateSearch(text) {
-  return text.length <= 5;
+  console.log('~~>', text);
+  return text.length <= 3;
 }
 
 class Demo extends React.Component {
@@ -17,7 +18,7 @@ class Demo extends React.Component {
     return (
       <div>
         <h1>Customize Split Logic</h1>
-        <p>Only validate string length less than 5</p>
+        <p>Only validate string length less than 3</p>
         <Mentions
           style={{ width: '100%', fontSize: 50 }}
           split=""
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index a03011f..86b3e13 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -140,7 +140,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key, which } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
-    const { prefix = '', split = ' ', onSearch, validateSearch } = this.props;
+    const { prefix = '', onSearch, validateSearch } = this.props;
     const target = event.target as HTMLTextAreaElement;
     const selectionStartText = getBeforeSelectionText(target);
     const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
@@ -153,22 +153,21 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       return;
     }
 
-    // Skip if is the last one
-    if (KeyCode.RIGHT === which && target.selectionStart === target.value.length) {
-      return;
-    }
-
     if (measureIndex !== -1) {
       const measureText = selectionStartText.slice(measureIndex + measurePrefix.length);
       const validateMeasure: boolean = validateSearch!(measureText, this.props);
       const matchOption: boolean = !!this.getOptions(measureText).length;
 
-      if (key === measurePrefix || measuring || (measureText !== prevMeasureText && matchOption)) {
-        this.startMeasure(measureText, measurePrefix, measureIndex);
-      }
-
-      // Stop if measureText is invalidate
-      if (measuring && !validateMeasure) {
+      if (validateMeasure) {
+        if (
+          key === measurePrefix ||
+          measuring ||
+          (measureText !== prevMeasureText && matchOption)
+        ) {
+          this.startMeasure(measureText, measurePrefix, measureIndex);
+        }
+      } else if (measuring) {
+        // Stop if measureText is invalidate
         this.stopMeasure();
       }
 

From ecfde32ac057378b3fc8ea0ce94f2cd4a5e3fb24 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 10:15:23 +0800
Subject: [PATCH 22/32] add customize filter demo

---
 examples/filter.js | 37 +++++++++++++++++++++++++++++++++++++
 src/Mentions.tsx   | 15 +++++++++++----
 src/util.ts        |  6 ++++++
 storybook/index.js |  7 +++++++
 4 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 examples/filter.js

diff --git a/examples/filter.js b/examples/filter.js
new file mode 100644
index 0000000..61ba4cf
--- /dev/null
+++ b/examples/filter.js
@@ -0,0 +1,37 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+function filterOption(input, { id }) {
+  return id.indexOf(input) !== -1;
+}
+
+class Demo extends React.Component {
+  state = {};
+
+  render() {
+    return (
+      <div>
+        <h1>Customize Filter</h1>
+        <p>Option has `id` and filter only hit by `id`</p>
+        <Mentions style={{ width: '100%', fontSize: 30 }} filterOption={filterOption} autoFocus>
+          <Option value="light" id="1128">
+            Light (ID: 1128)
+          </Option>
+          <Option value="bamboo" id="903">
+            Bamboo (ID: 903)
+          </Option>
+          <Option value="cat" id="1706">
+            Cat (ID: 1706)
+          </Option>
+        </Mentions>
+      </div>
+    );
+  }
+}
+
+export default Demo;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 86b3e13..5c4ef92 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -8,6 +8,7 @@ import KeywordTrigger from './KeywordTrigger';
 import { MentionsContextProvider } from './MentionsContext';
 import Option, { OptionProps } from './Option';
 import {
+  filterOption as defaultFilterOption,
   getBeforeSelectionText,
   getLastMeasureIndex,
   replaceWithMeasure,
@@ -27,6 +28,7 @@ export interface MentionsProps {
   autoFocus?: boolean;
   split?: string;
   validateSearch?: typeof defaultValidateSearch;
+  filterOption?: false | typeof defaultFilterOption;
 }
 interface MentionsState {
   value: string;
@@ -44,6 +46,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     prefix: '@',
     split: ' ',
     validateSearch: defaultValidateSearch,
+    filterOption: defaultFilterOption,
   };
 
   public static getDerivedStateFromProps(props: MentionsProps, prevState: MentionsState) {
@@ -217,12 +220,16 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public getOptions = (measureText?: string): OptionProps[] => {
-    const targetMeasureText = (measureText || this.state.measureText || '').toLocaleLowerCase();
-    const { children } = this.props;
+    const targetMeasureText = measureText || this.state.measureText || '';
+    const { children, filterOption } = this.props;
     const list = toArray(children)
       .map(({ props }: { props: OptionProps }) => props)
-      .filter(({ value = '' }: OptionProps) => {
-        return value.toLowerCase().indexOf(targetMeasureText) !== -1;
+      .filter((option: OptionProps) => {
+        /** Return all result if `filterOption` is false. */
+        if (filterOption === false) {
+          return true;
+        }
+        return filterOption!(targetMeasureText, option);
       });
     return list;
   };
diff --git a/src/util.ts b/src/util.ts
index 729df2e..a5b1f1f 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,4 +1,5 @@
 import { MentionsProps } from './Mentions';
+import { OptionProps } from './Option';
 
 /**
  * Cut input selection into 2 part and return text before selection start
@@ -116,3 +117,8 @@ export function validateSearch(text: string, props: MentionsProps) {
   const { split } = props;
   return !split || text.indexOf(split) === -1;
 }
+
+export function filterOption(input: string, { value = '' }: OptionProps): boolean {
+  const lowerCase = input.toLowerCase();
+  return value.toLowerCase().indexOf(lowerCase) !== -1;
+}
diff --git a/storybook/index.js b/storybook/index.js
index 6601710..85f94f6 100644
--- a/storybook/index.js
+++ b/storybook/index.js
@@ -8,10 +8,12 @@ import { withViewport } from '@storybook/addon-viewport';
 import { withInfo } from '@storybook/addon-info';
 import BasicSource from 'rc-source-loader!../examples/basic';
 import DynamicSource from 'rc-source-loader!../examples/dynamic';
+import FilterSource from 'rc-source-loader!../examples/filter';
 import MultiplePrefixSource from 'rc-source-loader!../examples/multiple-prefix';
 import SplitSource from 'rc-source-loader!../examples/split';
 import Basic from '../examples/basic';
 import Dynamic from '../examples/dynamic';
+import Filter from '../examples/filter';
 import MultiplePrefix from '../examples/multiple-prefix';
 import Split from '../examples/split';
 import READMECode from '../README.md';
@@ -49,6 +51,11 @@ storiesOf('rc-mentions', module)
       code: DynamicSource,
     },
   })
+  .add('filter', () => <Filter />, {
+    source: {
+      code: FilterSource,
+    },
+  })
   .add('multiple-prefix', () => <MultiplePrefix />, {
     source: {
       code: MultiplePrefixSource,

From ea5b5d66425d30ecce7d8f428d092a5b90abedab Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 11:14:12 +0800
Subject: [PATCH 23/32] support focus/blur

---
 examples/basic.js      | 20 ++++++++++++++--
 src/DropdownMenu.tsx   |  8 ++++++-
 src/Mentions.tsx       | 53 ++++++++++++++++++++++++++++++++++++++----
 src/MentionsContext.ts |  4 ++++
 4 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/examples/basic.js b/examples/basic.js
index b6fa1c9..ea1ccb7 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -7,12 +7,28 @@ import '../assets/index.less';
 const { Option } = Mentions;
 
 class Demo extends React.Component {
-  state = {};
+  onSelect = (option, prefix) => {
+    console.log('Select:', prefix, '-', option.value);
+  };
+
+  onFocus = () => {
+    console.log('onFocus');
+  };
+
+  onBlur = () => {
+    console.log('onBlur');
+  };
 
   render() {
     return (
       <div>
-        <Mentions autoFocus defaultValue="Hello World">
+        <Mentions
+          autoFocus
+          defaultValue="Hello World"
+          onSelect={this.onSelect}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        >
           <Option value="light">Light</Option>
           <Option value="bamboo">Bamboo</Option>
           <Option value="cat">Cat</Option>
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 207d7d8..dbddfc5 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -13,7 +13,12 @@ interface DropdownMenuProps {
  * The focus is controlled by textarea to make accessibility easy.
  */
 class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
-  public renderDropdown = ({ activeIndex, setActiveIndex, selectOption }: MentionsContextProps) => {
+  public renderDropdown = ({
+    activeIndex,
+    setActiveIndex,
+    selectOption,
+    onFocus,
+  }: MentionsContextProps) => {
     const { prefixCls, options } = this.props;
     const activeOption = options[activeIndex] || {};
 
@@ -25,6 +30,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
           const option = options.find(({ value }) => value === key);
           selectOption(option!);
         }}
+        onFocus={onFocus}
       >
         {options.map((option, index) => {
           const { value, disabled, children, className, style } = option;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 5c4ef92..954c721 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -20,7 +20,10 @@ export interface MentionsProps {
   defaultValue?: string;
   value?: string;
   onChange?: (text: string) => void;
+  onSelect?: (option: OptionProps, prefix: string) => void;
   onSearch?: (text: string, prefix: string) => void;
+  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   prefixCls?: string;
   prefix?: string | string[];
   className?: string;
@@ -37,6 +40,7 @@ interface MentionsState {
   measurePrefix: string;
   measureLocation: number;
   activeIndex: number;
+  isFocus: boolean;
 }
 class Mentions extends React.Component<MentionsProps, MentionsState> {
   public static Option = Option;
@@ -61,6 +65,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public textarea?: HTMLTextAreaElement;
   public measure?: HTMLDivElement;
+  public focusId: number | undefined = undefined;
 
   constructor(props: MentionsProps) {
     super(props);
@@ -71,6 +76,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       measureText: null,
       measurePrefix: '',
       activeIndex: 0,
+      isFocus: false,
     };
   }
 
@@ -186,9 +192,41 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     }
   };
 
+  public onInputFocus: React.FocusEventHandler<HTMLTextAreaElement> = event => {
+    this.onFocus(event);
+  };
+
+  public onInputBlur: React.FocusEventHandler<HTMLTextAreaElement> = event => {
+    this.onBlur(event);
+  };
+
+  public onDropdownFocus = () => {
+    this.onFocus();
+  };
+
+  public onFocus = (event?: React.FocusEvent<HTMLTextAreaElement>) => {
+    window.clearTimeout(this.focusId);
+    const { isFocus } = this.state;
+    const { onFocus } = this.props;
+    if (!isFocus && event && onFocus) {
+      onFocus(event);
+    }
+    this.setState({ isFocus: true });
+  };
+
+  public onBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+    this.focusId = window.setTimeout(() => {
+      const { onBlur } = this.props;
+      this.setState({ isFocus: false });
+      if (onBlur) {
+        onBlur(event);
+      }
+    }, 0);
+  };
+
   public selectOption = (option: OptionProps) => {
     const { value, measureLocation, measurePrefix } = this.state;
-    const { split } = this.props;
+    const { split, onSelect } = this.props;
 
     const { value: mentionValue = '' } = option;
     const { text, selectionLocation } = replaceWithMeasure(value, {
@@ -203,6 +241,10 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       // We need restore the selection position
       setInputSelection(this.textarea!, selectionLocation);
     });
+
+    if (onSelect) {
+      onSelect(option, measurePrefix);
+    }
   };
 
   public setActiveIndex = (activeIndex: number) => {
@@ -257,21 +299,21 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public render() {
     const { value, measureLocation, measurePrefix, measuring, activeIndex } = this.state;
-    const { prefixCls, className, style, ...restProps } = this.props;
-
-    const props = omit(restProps, ['onChange', 'prefix']);
+    const { prefixCls, className, style, autoFocus } = this.props;
 
     const options = measuring ? this.getOptions() : [];
 
     return (
       <div className={classNames(prefixCls, className)} style={style}>
         <textarea
-          {...props}
+          autoFocus={autoFocus}
           ref={this.setTextAreaRef}
           value={value}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           onKeyUp={this.onKeyUp}
+          onFocus={this.onInputFocus}
+          onBlur={this.onInputBlur}
         />
         {measuring && (
           <div ref={this.setMeasureRef} className={`${prefixCls}-measure`}>
@@ -281,6 +323,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
                 activeIndex,
                 setActiveIndex: this.setActiveIndex,
                 selectOption: this.selectOption,
+                onFocus: this.onDropdownFocus,
               }}
             >
               <KeywordTrigger prefixCls={prefixCls} options={options} visible={true}>
diff --git a/src/MentionsContext.ts b/src/MentionsContext.ts
index a755b08..c5f444f 100644
--- a/src/MentionsContext.ts
+++ b/src/MentionsContext.ts
@@ -5,6 +5,7 @@ export interface MentionsContextProps {
   activeIndex: number;
   setActiveIndex: (index: number) => void;
   selectOption: (option: OptionProps) => void;
+  onFocus: () => void;
 }
 
 const MentionsContext: Context<MentionsContextProps> = createReactContext({
@@ -15,6 +16,9 @@ const MentionsContext: Context<MentionsContextProps> = createReactContext({
   selectOption: (_: OptionProps) => {
     /* Do nothing */
   },
+  onFocus: () => {
+    /* Do nothing */
+  },
 });
 
 export const MentionsContextProvider = MentionsContext.Provider;

From e5800de2de57eb79c3cde1dca628b8cfe5f0b5da Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 11:53:34 +0800
Subject: [PATCH 24/32] update doc

---
 README.md         | 27 ++++++++++++++++++++++-----
 assets/index.less |  1 +
 src/Mentions.tsx  |  8 ++++++++
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 5a87de2..a599dfc 100644
--- a/README.md
+++ b/README.md
@@ -47,9 +47,14 @@ React Mentions
 ```js
 import Mentions from 'rc-mentions';
 
-// TODO: update
+const { Option } = Mentions;
 
 var Demo = (
+  <Mentions>
+    <Option value="light">Light</Option>
+    <Option value="bamboo">Bamboo</Option>
+    <Option value="cat">Cat</Option>
+  </Mentions>
 );
 React.render(<Demo />, container);
 ```
@@ -60,13 +65,25 @@ React.render(<Demo />, container);
 
 | name     | description    | type     | default      |
 |----------|----------------|----------|--------------|
-| | | | |
+| defaultValue | Default value | string | - |
+| value | Set value of mentions | string | - |
+| prefix | Set trigger prefix keyword | string \| string[] | '@' |
+| autoFocus | Auto get focus when component mounted | boolean | `false` |
+| split | Set split string before and after selected mention | string | ' ' |
+| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
+| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
+| onChange | Trigger when value changed |(text: string) => void | - |
+| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
+| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
+| onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
+| onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 
 ### Methods
 
-| name     | description    | parameters | return      |
-|----------|----------------|----------|--------------|
-| | | | |
+| name     | description    |
+|----------|----------------|
+| focus() | Component get focus |
+| blur() | Component lose focus |
 
 ## Development
 
diff --git a/assets/index.less b/assets/index.less
index 6e90c7e..3996846 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -29,6 +29,7 @@
     letter-spacing: inherit;
     white-space: inherit;
     tab-size: inherit;
+    direction: inherit;
   }
 
   > textarea {
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 954c721..fc79f80 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -297,6 +297,14 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     );
   }
 
+  public focus() {
+    this.textarea!.focus();
+  }
+
+  public blur() {
+    this.textarea!.blur();
+  }
+
   public render() {
     const { value, measureLocation, measurePrefix, measuring, activeIndex } = this.state;
     const { prefixCls, className, style, autoFocus } = this.props;

From b0d56d39e6480d19ff7e59a1afb8c9926c0ec602 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 11:56:35 +0800
Subject: [PATCH 25/32] update preview

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a599dfc..e12f34f 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ React Mentions
 
 ## Screenshots
 
-<img src="https://user-images.githubusercontent.com/8186664/50768510-a8b30680-12bb-11e9-8251-0e0ed82c5076.png" />
+<img src="https://user-images.githubusercontent.com/5378891/57270721-17b03880-70bf-11e9-9a5d-67ebf501aef1.png" />
 
 ## Feature
 

From 6b6d0d5921e0604fb063a1e434f47b5865d0edb2 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 11:58:09 +0800
Subject: [PATCH 26/32] back with correct less style

---
 assets/index.less | 6 +++---
 src/Mentions.tsx  | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 3996846..7e08a36 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -44,9 +44,9 @@
     top: 0;
     bottom: 0;
     pointer-events: none;
-    color: rgba(255, 0, 0, 0.3);
-    // color: transparent;
-    // z-index: -1;
+    // color: rgba(255, 0, 0, 0.3);
+    color: transparent;
+    z-index: -1;
   }
 
   // ================== Dropdown ==================
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index fc79f80..59457e6 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -218,6 +218,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     this.focusId = window.setTimeout(() => {
       const { onBlur } = this.props;
       this.setState({ isFocus: false });
+      this.stopMeasure();
       if (onBlur) {
         onBlur(event);
       }

From d4ba1816bd4e81e186abca3cb09e62450b7cf0a9 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 16:02:57 +0800
Subject: [PATCH 27/32] coverage it

---
 README.md                  |   3 +-
 package.json               |   1 -
 src/DropdownMenu.tsx       |   3 +-
 src/Mentions.tsx           |   6 +-
 src/MentionsContext.ts     |   3 +
 tests/FullProcess.spec.jsx | 113 +++++++++++++++++++++++++++++++
 tests/Mentions.spec.jsx    | 134 +++++++++++++++++++++++++++++++++++++
 tests/Option.spec.jsx      |  13 ++++
 tests/setup.ts             |   6 --
 tests/shared/input.js      |  25 +++++++
 typings/index.d.ts         |   1 -
 11 files changed, 296 insertions(+), 12 deletions(-)
 create mode 100644 tests/FullProcess.spec.jsx
 create mode 100644 tests/Mentions.spec.jsx
 create mode 100644 tests/Option.spec.jsx
 delete mode 100644 tests/setup.ts
 create mode 100644 tests/shared/input.js

diff --git a/README.md b/README.md
index e12f34f..9f04691 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ React Mentions
 
 ## Screenshots
 
-<img src="https://user-images.githubusercontent.com/5378891/57270721-17b03880-70bf-11e9-9a5d-67ebf501aef1.png" />
+<img src="https://user-images.githubusercontent.com/5378891/57270992-2fd48780-70c0-11e9-91ae-c614d0b49a45.png" />
 
 ## Feature
 
@@ -72,6 +72,7 @@ React.render(<Demo />, container);
 | split | Set split string before and after selected mention | string | ' ' |
 | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
 | filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
+| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
 | onChange | Trigger when value changed |(text: string) => void | - |
 | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
 | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
diff --git a/package.json b/package.json
index 07572c5..f20eaef 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "@ant-design/create-react-context": "^0.2.4",
     "babel-runtime": "^6.23.0",
     "classnames": "^2.2.6",
-    "omit.js": "^1.0.2",
     "rc-menu": "^7.4.22",
     "rc-trigger": "^2.6.2",
     "rc-util": "^4.6.0",
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index dbddfc5..a6920af 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -14,6 +14,7 @@ interface DropdownMenuProps {
  */
 class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
   public renderDropdown = ({
+    notFoundContent,
     activeIndex,
     setActiveIndex,
     selectOption,
@@ -49,7 +50,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
           );
         })}
 
-        {!options.length && <MenuItem disabled={true}>Nothing match!</MenuItem>}
+        {!options.length && <MenuItem disabled={true}>{notFoundContent}</MenuItem>}
       </Menu>
     );
   };
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 59457e6..450867b 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import omit from 'omit.js';
 import toArray from 'rc-util/lib/Children/toArray';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
@@ -32,6 +31,7 @@ export interface MentionsProps {
   split?: string;
   validateSearch?: typeof defaultValidateSearch;
   filterOption?: false | typeof defaultFilterOption;
+  notFoundContent?: React.ReactNode;
 }
 interface MentionsState {
   value: string;
@@ -51,6 +51,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     split: ' ',
     validateSearch: defaultValidateSearch,
     filterOption: defaultFilterOption,
+    notFoundContent: 'Not Found',
   };
 
   public static getDerivedStateFromProps(props: MentionsProps, prevState: MentionsState) {
@@ -308,7 +309,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public render() {
     const { value, measureLocation, measurePrefix, measuring, activeIndex } = this.state;
-    const { prefixCls, className, style, autoFocus } = this.props;
+    const { prefixCls, className, style, autoFocus, notFoundContent } = this.props;
 
     const options = measuring ? this.getOptions() : [];
 
@@ -329,6 +330,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
             {value.slice(0, measureLocation)}
             <MentionsContextProvider
               value={{
+                notFoundContent,
                 activeIndex,
                 setActiveIndex: this.setActiveIndex,
                 selectOption: this.selectOption,
diff --git a/src/MentionsContext.ts b/src/MentionsContext.ts
index c5f444f..056ea53 100644
--- a/src/MentionsContext.ts
+++ b/src/MentionsContext.ts
@@ -1,7 +1,9 @@
 import createReactContext, { Context } from '@ant-design/create-react-context';
+import * as React from 'react';
 import { OptionProps } from './Option';
 
 export interface MentionsContextProps {
+  notFoundContent: React.ReactNode;
   activeIndex: number;
   setActiveIndex: (index: number) => void;
   selectOption: (option: OptionProps) => void;
@@ -9,6 +11,7 @@ export interface MentionsContextProps {
 }
 
 const MentionsContext: Context<MentionsContextProps> = createReactContext({
+  notFoundContent: '' as React.ReactNode,
   activeIndex: 0,
   setActiveIndex: (_: number) => {
     /* Do nothing */
diff --git a/tests/FullProcess.spec.jsx b/tests/FullProcess.spec.jsx
new file mode 100644
index 0000000..292fc8f
--- /dev/null
+++ b/tests/FullProcess.spec.jsx
@@ -0,0 +1,113 @@
+import { mount } from 'enzyme';
+import KeyCode from 'rc-util/lib/KeyCode';
+import React from 'react';
+import Mentions from '../src';
+import { simulateInput } from './shared/input';
+
+const { Option } = Mentions;
+
+describe('Full Process', () => {
+  function createMentions(props) {
+    return mount(
+      <Mentions {...props}>
+        <Option value="bamboo">Bamboo</Option>
+        <Option value="light">Light</Option>
+        <Option value="cat">Cat</Option>
+      </Mentions>,
+    );
+  }
+
+  it('Keyboard selection', () => {
+    const onChange = jest.fn();
+    const onSelect = jest.fn();
+    const onSearch = jest.fn();
+    const wrapper = createMentions({ onChange, onSelect, onSearch });
+
+    simulateInput(wrapper, '@');
+    expect(wrapper.find('DropdownMenu').props().options).toMatchObject([
+      { value: 'bamboo' },
+      { value: 'light' },
+      { value: 'cat' },
+    ]);
+
+    simulateInput(wrapper, '@a');
+    expect(wrapper.find('DropdownMenu').props().options).toMatchObject([
+      { value: 'bamboo' },
+      { value: 'cat' },
+    ]);
+    expect(onSearch).toBeCalledWith('a', '@');
+
+    wrapper.find('textarea').simulate('keyDown', {
+      which: KeyCode.DOWN,
+    });
+    wrapper.find('textarea').simulate('keyDown', {
+      which: KeyCode.ENTER,
+    });
+
+    expect(onChange).toBeCalledWith('@cat ');
+    expect(onSelect).toBeCalledWith(expect.objectContaining({ value: 'cat' }), '@');
+  });
+
+  it('insert into half way', () => {
+    const onChange = jest.fn();
+    const wrapper = createMentions({ onChange });
+    simulateInput(wrapper, '1 @ 2');
+
+    // Mock direct to the position
+    wrapper.find('textarea').instance().selectionStart = 3;
+    wrapper.find('textarea').simulate('keyUp', {});
+    expect(wrapper.state().measuring).toBeTruthy();
+
+    wrapper.find('textarea').simulate('keyDown', {
+      which: KeyCode.ENTER,
+    });
+
+    expect(onChange).toBeCalledWith('1 @bamboo 2');
+  });
+
+  it('reuse typed text', () => {
+    const onChange = jest.fn();
+    const wrapper = createMentions({ onChange });
+    simulateInput(wrapper, '1 @bamboo 2');
+
+    // Mock direct to the position
+    wrapper.find('textarea').instance().selectionStart = 3;
+    wrapper.find('textarea').simulate('keyUp', {});
+    expect(wrapper.state().measuring).toBeTruthy();
+
+    wrapper.find('textarea').simulate('keyDown', {
+      which: KeyCode.ENTER,
+    });
+
+    expect(onChange).toBeCalledWith('1 @bamboo 2');
+  });
+
+  it('stop measure if match split', () => {
+    const wrapper = createMentions();
+    simulateInput(wrapper, '@a');
+    expect(wrapper.state().measuring).toBeTruthy();
+    simulateInput(wrapper, '@a ');
+    expect(wrapper.state().measuring).toBeFalsy();
+  });
+
+  it('stop measure if remove prefix', () => {
+    const wrapper = createMentions();
+    simulateInput(wrapper, 'test@');
+    expect(wrapper.state().measuring).toBeTruthy();
+    simulateInput(wrapper, 'test');
+    expect(wrapper.state().measuring).toBeFalsy();
+  });
+
+  it('ESC', () => {
+    const wrapper = createMentions();
+
+    simulateInput(wrapper, '@');
+    expect(wrapper.state().measuring).toBe(true);
+
+    simulateInput(wrapper, '@', {
+      which: KeyCode.ESC,
+    });
+
+    expect(wrapper.state().measuring).toBe(false);
+  });
+});
diff --git a/tests/Mentions.spec.jsx b/tests/Mentions.spec.jsx
new file mode 100644
index 0000000..e31067c
--- /dev/null
+++ b/tests/Mentions.spec.jsx
@@ -0,0 +1,134 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import Mentions from '../src';
+import { simulateInput } from './shared/input';
+
+const { Option } = Mentions;
+
+describe('Mentions', () => {
+  function createMentions(props) {
+    return mount(
+      <Mentions {...props}>
+        <Option value="bamboo">Bamboo</Option>
+        <Option value="light">Light</Option>
+        <Option value="cat">Cat</Option>
+      </Mentions>,
+    );
+  }
+
+  describe('focus test', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('autoFocus', () => {
+      const wrapper = createMentions({ autoFocus: true });
+      expect(document.activeElement).toBe(wrapper.find('textarea').instance());
+    });
+
+    it('not lose focus if click on dropdown', () => {
+      const onBlur = jest.fn();
+      const wrapper = createMentions({ autoFocus: true, defaultValue: '@', onBlur });
+
+      // Inject to trigger measure
+      wrapper.instance().startMeasure('b', '@', 1);
+      jest.runAllTimers();
+      wrapper.update();
+
+      wrapper.find('MenuItem').simulate('focus');
+      wrapper.find('textarea').simulate('blur');
+      wrapper.find('MenuItem').simulate('click');
+      wrapper.find('textarea').simulate('focus'); // This is not good but code focus not work in simulate
+      jest.runAllTimers();
+
+      expect(onBlur).not.toBeCalled();
+    });
+
+    it('focus', () => {
+      const onFocus = jest.fn();
+      const wrapper = createMentions({ onFocus });
+      wrapper.find('textarea').simulate('focus');
+      expect(onFocus).toBeCalled();
+    });
+
+    it('blur', () => {
+      const onBlur = jest.fn();
+      const wrapper = createMentions({ onBlur });
+      wrapper.find('textarea').simulate('blur');
+      jest.runAllTimers();
+      expect(onBlur).toBeCalled();
+    });
+
+    it('focus() & blur()', () => {
+      const wrapper = createMentions();
+      wrapper.instance().focus();
+      expect(document.activeElement).toBe(wrapper.find('textarea').instance());
+
+      wrapper.instance().blur();
+      expect(document.activeElement).not.toBe(wrapper.find('textarea').instance());
+    });
+  });
+
+  describe('value', () => {
+    it('defaultValue', () => {
+      const wrapper = createMentions({ defaultValue: 'light' });
+      expect(wrapper.find('textarea').props().value).toBe('light');
+    });
+
+    it('controlled value', () => {
+      const wrapper = createMentions({ value: 'bamboo' });
+      expect(wrapper.find('textarea').props().value).toBe('bamboo');
+
+      wrapper.setProps({ value: 'cat' });
+      expect(wrapper.find('textarea').props().value).toBe('cat');
+    });
+
+    it('onChange', () => {
+      const onChange = jest.fn();
+      const wrapper = createMentions({ onChange });
+      wrapper.find('textarea').simulate('change', {
+        target: { value: 'bamboo' },
+      });
+      expect(onChange).toBeCalledWith('bamboo');
+    });
+  });
+
+  describe('filterOption', () => {
+    it('false', () => {
+      const wrapper = createMentions({ filterOption: false });
+      simulateInput(wrapper, '@notExist');
+      expect(wrapper.find('DropdownMenu').props().options.length).toBe(3);
+    });
+
+    it('function', () => {
+      const wrapper = createMentions({ filterOption: (_, { value }) => value.includes('a') });
+      simulateInput(wrapper, '@notExist');
+      expect(wrapper.find('DropdownMenu').props().options.length).toBe(2);
+    });
+  });
+
+  it('notFoundContent', () => {
+    const notFoundContent = 'Bamboo Light';
+    const wrapper = createMentions({ notFoundContent });
+    simulateInput(wrapper, '@a');
+    simulateInput(wrapper, '@notExist');
+    expect(wrapper.find('DropdownMenu').props().options.length).toBe(0);
+    expect(wrapper.find('MenuItem').props().children).toBe(notFoundContent);
+  });
+
+  describe('accessibility', () => {
+    it('hover', () => {
+      const wrapper = createMentions();
+      simulateInput(wrapper, '@');
+      wrapper
+        .find('MenuItem')
+        .last()
+        .simulate('mouseEnter');
+      expect(wrapper.find('Menu').props().activeKey).toBe('cat');
+    });
+  });
+});
diff --git a/tests/Option.spec.jsx b/tests/Option.spec.jsx
new file mode 100644
index 0000000..e0e0a5c
--- /dev/null
+++ b/tests/Option.spec.jsx
@@ -0,0 +1,13 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import Mentions from '../src';
+
+const { Option } = Mentions;
+
+describe('Option', () => {
+  // Option is a placeholder component. Should render nothing.
+  it('should be empty', () => {
+    const wrapper = mount(<Option>Nothing</Option>);
+    expect(wrapper.instance()).toBe(null);
+  });
+});
diff --git a/tests/setup.ts b/tests/setup.ts
deleted file mode 100644
index 128e45c..0000000
--- a/tests/setup.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-require('raf').polyfill();
-
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-Enzyme.configure({ adapter: new Adapter() });
diff --git a/tests/shared/input.js b/tests/shared/input.js
new file mode 100644
index 0000000..8676c11
--- /dev/null
+++ b/tests/shared/input.js
@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+
+export function simulateInput(wrapper, text = '', keyEvent) {
+  const lastChar = text[text.length - 1];
+  const myKeyEvent = keyEvent || {
+    which: lastChar.charCodeAt(0),
+    key: lastChar,
+  };
+
+  wrapper.find('textarea').simulate('keyDown', myKeyEvent);
+
+  const textareaInstance = wrapper.find('textarea').instance();
+  textareaInstance.value = text;
+  textareaInstance.selectionStart = text.length;
+  textareaInstance.selectionStart = text.length;
+
+  if (!keyEvent) {
+    wrapper.find('textarea').simulate('change', {
+      target: { value: text },
+    });
+  }
+
+  wrapper.find('textarea').simulate('keyUp', myKeyEvent);
+  wrapper.update();
+}
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 8995f8e..743b3b7 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -2,4 +2,3 @@ declare module 'react-lifecycles-compat';
 declare module 'rc-trigger';
 declare module 'rc-util/*';
 declare module 'rc-menu';
-declare module 'omit.js';

From 9b492df287583f7112a898652d856ea7bb375c91 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 16:04:27 +0800
Subject: [PATCH 28/32] update ci

---
 .circleci/config.yml | 39 ---------------------------------------
 .travis.yml          | 31 +++++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 39 deletions(-)
 delete mode 100644 .circleci/config.yml
 create mode 100644 .travis.yml

diff --git a/.circleci/config.yml b/.circleci/config.yml
deleted file mode 100644
index d23e109..0000000
--- a/.circleci/config.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-version: 2
-jobs:
-  lint:
-    docker:
-      - image: circleci/node:latest
-    steps:
-      - checkout
-      - restore_cache:
-          keys:
-            - v1-dependencies-{{ checksum "package.json" }}
-      - run: npm install
-      - run: npm run init-tslint
-      - save_cache:
-          paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
-      - run: npm run lint
-  test:
-    docker:
-      - image: circleci/node:latest
-    working_directory: ~/repo
-    steps:
-      - checkout
-      - restore_cache:
-          keys:
-            - v1-dependencies-{{ checksum "package.json" }}
-      - run: npm install
-      - run: npm run init-tslint
-      - save_cache:
-          paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
-      - run: npm test -- --coverage
-workflows:
-  version: 2
-  build_and_test:
-    jobs:
-      - lint
-      - test
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..260a160
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,31 @@
+language: node_js
+
+sudo: false
+
+notifications:
+  email:
+  - smith3816@gmail.com
+
+node_js:
+- 10
+
+before_install:
+- |
+    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
+    then
+      echo "Only docs were updated, stopping build process."
+      exit
+    fi
+script:
+- |
+    if [ "$TEST_TYPE" = test ]; then
+      npm test -- --coverage && \
+      bash <(curl -s https://codecov.io/bash)
+    else
+      npm run $TEST_TYPE
+    fi
+env:
+  matrix:
+  - TEST_TYPE=lint
+  - TEST_TYPE=test
+  - TEST_TYPE=test:15
\ No newline at end of file

From 22dee84c79063d999fb0d5f1a75be2473b03b292 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 16:27:45 +0800
Subject: [PATCH 29/32] trigger ci

---
 tests/Option.spec.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/Option.spec.jsx b/tests/Option.spec.jsx
index e0e0a5c..ff78f74 100644
--- a/tests/Option.spec.jsx
+++ b/tests/Option.spec.jsx
@@ -5,7 +5,7 @@ import Mentions from '../src';
 const { Option } = Mentions;
 
 describe('Option', () => {
-  // Option is a placeholder component. Should render nothing.
+  // Option is a placeholder component. It should render nothing.
   it('should be empty', () => {
     const wrapper = mount(<Option>Nothing</Option>);
     expect(wrapper.instance()).toBe(null);

From f16b5892bb8e7f1906222597d68ce28548dee2e5 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 16:45:56 +0800
Subject: [PATCH 30/32] update rc-tools

---
 .travis.yml  | 3 +--
 package.json | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 260a160..68575f3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -27,5 +27,4 @@ script:
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=test:15
\ No newline at end of file
+  - TEST_TYPE=test
\ No newline at end of file
diff --git a/package.json b/package.json
index f20eaef..95fa4c9 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "lodash.debounce": "^4.0.8",
     "pre-commit": "1.x",
     "querystring": "^0.2.0",
-    "rc-tools": "^9.3.11",
+    "rc-tools": "^9.4.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "typescript": "^3.2.2"

From f641319b5d786cef0ac388b7c1555d26ae8d2d47 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 16:48:00 +0800
Subject: [PATCH 31/32] remove uesless context

---
 src/MentionsContext.ts | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/MentionsContext.ts b/src/MentionsContext.ts
index 056ea53..5818228 100644
--- a/src/MentionsContext.ts
+++ b/src/MentionsContext.ts
@@ -10,19 +10,7 @@ export interface MentionsContextProps {
   onFocus: () => void;
 }
 
-const MentionsContext: Context<MentionsContextProps> = createReactContext({
-  notFoundContent: '' as React.ReactNode,
-  activeIndex: 0,
-  setActiveIndex: (_: number) => {
-    /* Do nothing */
-  },
-  selectOption: (_: OptionProps) => {
-    /* Do nothing */
-  },
-  onFocus: () => {
-    /* Do nothing */
-  },
-});
+const MentionsContext: Context<MentionsContextProps> = createReactContext(null);
 
 export const MentionsContextProvider = MentionsContext.Provider;
 export const MentionsContextConsumer = MentionsContext.Consumer;

From 7ed9eb9b9acd4968e685166d378edd1c54da240e Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Tue, 7 May 2019 16:52:24 +0800
Subject: [PATCH 32/32] ignore fetch

---
 examples/dynamic.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/dynamic.js b/examples/dynamic.js
index 7d4a374..d55a839 100644
--- a/examples/dynamic.js
+++ b/examples/dynamic.js
@@ -1,4 +1,4 @@
-/* eslint no-console: 0 */
+/* eslint-disable no-console, no-undef */
 
 import React from 'react';
 import debounce from 'lodash.debounce';