diff --git a/README.md b/README.md
index 1dbc332..2922f8a 100644
--- a/README.md
+++ b/README.md
@@ -79,6 +79,8 @@ React.render(, 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, payload: { measuring: boolean }) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent, payload: { measuring: boolean }) => void; | - |
| onFocus | Trigger when mentions get focus | React.FocusEventHandler | - |
| onBlur | Trigger when mentions lose focus | React.FocusEventHandler | - |
| getPopupContainer | DOM Container for suggestions | () => HTMLElement | - |
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index bef7e7c..7107021 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -17,11 +17,24 @@ import {
validateSearch as defaultValidateSearch,
} from './util';
-type BaseTextareaAttrs = Omit;
+type BaseTextareaAttrs = Omit;
export type Placement = 'top' | 'bottom';
export type Direction = 'ltr' | 'rtl';
+export interface MentionKeyBoardEventPayload {
+ measuring: boolean;
+}
+
+export type MentionKeyBoardEventHandler = (
+ event: React.KeyboardEvent,
+ payload: MentionKeyBoardEventPayload,
+) => void;
+
+export interface MentionKeyBoardEventPayload {
+ measuring: boolean;
+}
+
export interface MentionsProps extends BaseTextareaAttrs {
autoFocus?: boolean;
className?: string;
@@ -40,6 +53,8 @@ export interface MentionsProps extends BaseTextareaAttrs {
onChange?: (text: string) => void;
onSelect?: (option: OptionProps, prefix: string) => void;
onSearch?: (text: string, prefix: string) => void;
+ onKeyDown?: MentionKeyBoardEventHandler;
+ onKeyUp?: MentionKeyBoardEventHandler;
onFocus?: React.FocusEventHandler;
onBlur?: React.FocusEventHandler;
getPopupContainer?: () => HTMLElement;
@@ -123,6 +138,11 @@ class Mentions extends React.Component {
public onKeyDown: React.KeyboardEventHandler = (event) => {
const { which } = event;
const { activeIndex, measuring } = this.state;
+ const { onKeyDown } = this.props;
+
+ if (onKeyDown) {
+ onKeyDown(event, { measuring });
+ }
// Skip if not measuring
if (!measuring) {
@@ -168,7 +188,7 @@ class Mentions extends React.Component {
public onKeyUp: React.KeyboardEventHandler = (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 +196,10 @@ class Mentions extends React.Component {
prefix,
);
+ if (onKeyUp) {
+ onKeyUp(event, { measuring });
+ }
+
// Skip if match the white key list
if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
return;