keyUp/keyDown event dispatch and textarea style support

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> | - |
 

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,14 +174,22 @@ 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(
       selectionStartText,
       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;
@@ -329,6 +349,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       style,
       autoFocus,
       notFoundContent,
+      textAreaStyle,
       ...restProps
     } = this.props;
 
@@ -354,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}