From 4209d8c927058416f2da3d82c13816dfa9021825 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 29 May 2019 15:11:55 +0800
Subject: [PATCH 01/10] feat: dispatch keyUp/keyDown event feat: support
 textAreaStyle

---
 README.md        |  3 +++
 src/Mentions.tsx | 22 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 08a3db0..6ac3c02 100644
--- a/README.md
+++ b/README.md
@@ -75,9 +75,12 @@ React.render(<Demo />, container);
 | split | Set split string before and after selected mention | string | ' ' |
 | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
 | value | Set value of mentions | string | - |
+| textAreaStyle | textarea style | React.CSSProperties | - |
 | 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 | - |
+| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
 | onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 5a9f451..164cbfd 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -41,8 +41,11 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onChange?: (text: string) => void;
   onSelect?: (option: OptionProps, prefix: string) => void;
   onSearch?: (text: string, prefix: string) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
+  onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+  textAreaStyle?: React.CSSProperties;
 }
 interface MentionsState {
   value: string;
@@ -121,6 +124,15 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { which } = event;
     const { activeIndex, measuring } = this.state;
+    const { onKeyDown } = this.props;
+
+    try {
+      if (onKeyDown) {
+        onKeyDown(event, measuring);
+      }
+    } catch (e) {
+      // do nothing
+    }
 
     // Skip if not measuring
     if (!measuring) {
@@ -162,7 +174,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 = '', onSearch, validateSearch } = this.props;
+    const { prefix = '', onSearch, validateSearch, onKeyUp } = this.props;
     const target = event.target as HTMLTextAreaElement;
     const selectionStartText = getBeforeSelectionText(target);
     const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
@@ -170,6 +182,14 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       prefix,
     );
 
+    try {
+      if (onKeyUp) {
+        onKeyUp(event, measuring);
+      }
+    } catch (err) {
+      // do nothing
+    }
+
     // Skip if match the white key list
     if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
       return;

From 5e7975539cf36cc2a1786319a5e063916650b8b6 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 29 May 2019 15:50:12 +0800
Subject: [PATCH 02/10] fix textAreaStyle

---
 src/Mentions.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 164cbfd..d22b399 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -349,6 +349,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       style,
       autoFocus,
       notFoundContent,
+      textAreaStyle,
       ...restProps
     } = this.props;
 
@@ -374,6 +375,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
           ref={this.setTextAreaRef}
           value={value}
           {...inputProps}
+          style={textAreaStyle}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           onKeyUp={this.onKeyUp}

From 904e42ab54eceb861720cab96dbd5ac634e90821 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 12 Jun 2019 18:33:44 +0800
Subject: [PATCH 03/10] feat: remove textAreaStyle prop.

feat: use an object to wrap related states in  keyUp/keyDown event handler
---
 README.md        |  5 ++---
 src/Mentions.tsx | 32 +++++++++++++++-----------------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 6ac3c02..b495527 100644
--- a/README.md
+++ b/README.md
@@ -75,12 +75,11 @@ React.render(<Demo />, container);
 | split | Set split string before and after selected mention | string | ' ' |
 | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
 | value | Set value of mentions | string | - |
-| textAreaStyle | textarea style | React.CSSProperties | - |
 | 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 | - |
-| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
-| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
+| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
 | onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index d22b399..4c31ca4 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -24,6 +24,15 @@ type BaseTextareaAttrs = Omit<
 
 export type Placement = 'top' | 'bottom';
 
+export interface MentionKeyBoardEventPayload {
+  measuring: MentionsState['measuring'];
+}
+
+export type MentionKeyBoardEventHandler = (
+  event: React.KeyboardEvent<HTMLTextAreaElement>,
+  payload?: MentionKeyBoardEventPayload,
+) => void;
+
 export interface MentionsProps extends BaseTextareaAttrs {
   autoFocus?: boolean;
   className?: string;
@@ -41,11 +50,10 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onChange?: (text: string) => void;
   onSelect?: (option: OptionProps, prefix: string) => void;
   onSearch?: (text: string, prefix: string) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
-  onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
+  onKeyDown?: MentionKeyBoardEventHandler;
+  onKeyUp?: MentionKeyBoardEventHandler;
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-  textAreaStyle?: React.CSSProperties;
 }
 interface MentionsState {
   value: string;
@@ -126,12 +134,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     const { activeIndex, measuring } = this.state;
     const { onKeyDown } = this.props;
 
-    try {
-      if (onKeyDown) {
-        onKeyDown(event, measuring);
-      }
-    } catch (e) {
-      // do nothing
+    if (onKeyDown) {
+      onKeyDown(event, { measuring });
     }
 
     // Skip if not measuring
@@ -182,12 +186,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       prefix,
     );
 
-    try {
-      if (onKeyUp) {
-        onKeyUp(event, measuring);
-      }
-    } catch (err) {
-      // do nothing
+    if (onKeyUp) {
+      onKeyUp(event, { measuring });
     }
 
     // Skip if match the white key list
@@ -349,7 +349,6 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       style,
       autoFocus,
       notFoundContent,
-      textAreaStyle,
       ...restProps
     } = this.props;
 
@@ -375,7 +374,6 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
           ref={this.setTextAreaRef}
           value={value}
           {...inputProps}
-          style={textAreaStyle}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           onKeyUp={this.onKeyUp}

From b7298d5e78719678c9da0d842629fdab86c89616 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 26 Jun 2019 15:45:19 +0800
Subject: [PATCH 04/10] remove optional flag.

---
 README.md        | 4 ++--
 src/Mentions.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index b495527..5e7b6f8 100644
--- a/README.md
+++ b/README.md
@@ -78,8 +78,8 @@ React.render(<Demo />, container);
 | 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 | - |
-| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
-| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
+| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload: { measuring: boolean }) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload: { measuring: boolean }) => void; | - |
 | onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 4c31ca4..edb3d25 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -19,18 +19,18 @@ import {
 
 type BaseTextareaAttrs = Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'prefix' | 'onChange' | 'onSelect'
+  'prefix' | 'onChange' | 'onSelect' | 'onKeyDown' | 'onKeyUp'
 >;
 
 export type Placement = 'top' | 'bottom';
 
 export interface MentionKeyBoardEventPayload {
-  measuring: MentionsState['measuring'];
+  measuring: boolean;
 }
 
 export type MentionKeyBoardEventHandler = (
   event: React.KeyboardEvent<HTMLTextAreaElement>,
-  payload?: MentionKeyBoardEventPayload,
+  payload: MentionKeyBoardEventPayload,
 ) => void;
 
 export interface MentionsProps extends BaseTextareaAttrs {

From 8e76aeec633f47a37bbae682e9a3326a7e9335d1 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 29 May 2019 15:11:55 +0800
Subject: [PATCH 05/10] feat: dispatch keyUp/keyDown event feat: support
 textAreaStyle

---
 README.md        |  3 +++
 src/Mentions.tsx | 21 ++++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1dbc332..b30c577 100644
--- a/README.md
+++ b/README.md
@@ -76,9 +76,12 @@ React.render(<Demo />, container);
 | split | Set split string before and after selected mention | string | ' ' |
 | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
 | value | Set value of mentions | string | - |
+| textAreaStyle | textarea style | React.CSSProperties | - |
 | 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 | - |
+| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
 | onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | getPopupContainer | DOM Container for suggestions | () => HTMLElement | - |
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index bef7e7c..d502a3e 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -40,6 +40,8 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onChange?: (text: string) => void;
   onSelect?: (option: OptionProps, prefix: string) => void;
   onSearch?: (text: string, prefix: string) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
+  onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   getPopupContainer?: () => HTMLElement;
@@ -123,6 +125,15 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
     const { which } = event;
     const { activeIndex, measuring } = this.state;
+    const { onKeyDown } = this.props;
+
+    try {
+      if (onKeyDown) {
+        onKeyDown(event, measuring);
+      }
+    } catch (e) {
+      // do nothing
+    }
 
     // Skip if not measuring
     if (!measuring) {
@@ -168,7 +179,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 = '', onSearch, validateSearch } = this.props;
+    const { prefix = '', onSearch, validateSearch, onKeyUp } = this.props;
     const target = event.target as HTMLTextAreaElement;
     const selectionStartText = getBeforeSelectionText(target);
     const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
@@ -176,6 +187,14 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       prefix,
     );
 
+    try {
+      if (onKeyUp) {
+        onKeyUp(event, measuring);
+      }
+    } catch (err) {
+      // do nothing
+    }
+
     // Skip if match the white key list
     if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
       return;

From 1d06e84ee6855f243ad1d11b1902210121c984b3 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 29 May 2019 15:50:12 +0800
Subject: [PATCH 06/10] fix textAreaStyle

---
 src/Mentions.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index d502a3e..38c574a 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -397,6 +397,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
           ref={this.setTextAreaRef}
           value={value}
           {...inputProps}
+          style={textAreaStyle}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           onKeyUp={this.onKeyUp}

From ab96dbc13e33542a9e3a1964cc357498138ef1c7 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 12 Jun 2019 18:33:44 +0800
Subject: [PATCH 07/10] feat: remove textAreaStyle prop.

feat: use an object to wrap related states in  keyUp/keyDown event handler
---
 README.md        |  5 ++---
 src/Mentions.tsx | 30 +++++++++++++++---------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index b30c577..4424e50 100644
--- a/README.md
+++ b/README.md
@@ -76,12 +76,11 @@ React.render(<Demo />, container);
 | split | Set split string before and after selected mention | string | ' ' |
 | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
 | value | Set value of mentions | string | - |
-| textAreaStyle | textarea style | React.CSSProperties | - |
 | 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 | - |
-| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
-| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void; | - |
+| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
 | onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | getPopupContainer | DOM Container for suggestions | () => HTMLElement | - |
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 38c574a..f301da5 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -22,6 +22,15 @@ type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect'>
 export type Placement = 'top' | 'bottom';
 export type Direction = 'ltr' | 'rtl';
 
+export interface MentionKeyBoardEventPayload {
+  measuring: MentionsState['measuring'];
+}
+
+export type MentionKeyBoardEventHandler = (
+  event: React.KeyboardEvent<HTMLTextAreaElement>,
+  payload?: MentionKeyBoardEventPayload,
+) => void;
+
 export interface MentionsProps extends BaseTextareaAttrs {
   autoFocus?: boolean;
   className?: string;
@@ -40,8 +49,8 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onChange?: (text: string) => void;
   onSelect?: (option: OptionProps, prefix: string) => void;
   onSearch?: (text: string, prefix: string) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
-  onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>, measuring?: boolean) => void;
+  onKeyDown?: MentionKeyBoardEventHandler;
+  onKeyUp?: MentionKeyBoardEventHandler;
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   getPopupContainer?: () => HTMLElement;
@@ -127,12 +136,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     const { activeIndex, measuring } = this.state;
     const { onKeyDown } = this.props;
 
-    try {
-      if (onKeyDown) {
-        onKeyDown(event, measuring);
-      }
-    } catch (e) {
-      // do nothing
+    if (onKeyDown) {
+      onKeyDown(event, { measuring });
     }
 
     // Skip if not measuring
@@ -187,12 +192,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       prefix,
     );
 
-    try {
-      if (onKeyUp) {
-        onKeyUp(event, measuring);
-      }
-    } catch (err) {
-      // do nothing
+    if (onKeyUp) {
+      onKeyUp(event, { measuring });
     }
 
     // Skip if match the white key list
@@ -397,7 +398,6 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
           ref={this.setTextAreaRef}
           value={value}
           {...inputProps}
-          style={textAreaStyle}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           onKeyUp={this.onKeyUp}

From 24134a30f5b17d5a26917f6b3356789af6e9a627 Mon Sep 17 00:00:00 2001
From: FlowerDb <zhuxiuqing@chipcoo.com>
Date: Wed, 26 Jun 2019 15:45:19 +0800
Subject: [PATCH 08/10] remove optional flag.

---
 README.md        | 4 ++--
 src/Mentions.tsx | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4424e50..2922f8a 100644
--- a/README.md
+++ b/README.md
@@ -79,8 +79,8 @@ React.render(<Demo />, container);
 | 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 | - |
-| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
-| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
+| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload: { measuring: boolean }) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload: { measuring: boolean }) => void; | - |
 | onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | getPopupContainer | DOM Container for suggestions | () => HTMLElement | - |
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index f301da5..9e446d8 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -17,18 +17,21 @@ import {
   validateSearch as defaultValidateSearch,
 } from './util';
 
-type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect'>;
+type BaseTextareaAttrs = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'prefix' | 'onChange' | 'onSelect' | 'onKeyDown' | 'onKeyUp'
+>;
 
 export type Placement = 'top' | 'bottom';
 export type Direction = 'ltr' | 'rtl';
 
 export interface MentionKeyBoardEventPayload {
-  measuring: MentionsState['measuring'];
+  measuring: boolean;
 }
 
 export type MentionKeyBoardEventHandler = (
   event: React.KeyboardEvent<HTMLTextAreaElement>,
-  payload?: MentionKeyBoardEventPayload,
+  payload: MentionKeyBoardEventPayload,
 ) => void;
 
 export interface MentionsProps extends BaseTextareaAttrs {

From 3d4324e74283a25a4fa8079b6244b1ad98f33dcc Mon Sep 17 00:00:00 2001
From: zhuxiuqin <zhuxiuqin@bytedance.com>
Date: Mon, 21 Dec 2020 20:50:00 +0800
Subject: [PATCH 09/10] fix: align types with latest master

---
 src/Mentions.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 3d8b020..5167019 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -17,10 +17,7 @@ import {
   validateSearch as defaultValidateSearch,
 } from './util';
 
-type BaseTextareaAttrs = Omit<
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'prefix' | 'onChange' | 'onSelect' | 'onKeyDown' | 'onKeyUp'
->;
+type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect' | 'onKeyDown' | 'onKeyUp'>;
 
 export type Placement = 'top' | 'bottom';
 export type Direction = 'ltr' | 'rtl';

From bcc20205f7a2ef115b83a83d1ead87ebf89ea597 Mon Sep 17 00:00:00 2001
From: zhuxiuqin <zhuxiuqin@bytedance.com>
Date: Mon, 21 Dec 2020 20:51:13 +0800
Subject: [PATCH 10/10] fix: remove duplicated type defination

---
 src/Mentions.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 5167019..7107021 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -35,11 +35,6 @@ export interface MentionKeyBoardEventPayload {
   measuring: boolean;
 }
 
-export type MentionKeyBoardEventHandler = (
-  event: React.KeyboardEvent<HTMLTextAreaElement>,
-  payload: MentionKeyBoardEventPayload,
-) => void;
-
 export interface MentionsProps extends BaseTextareaAttrs {
   autoFocus?: boolean;
   className?: string;