From 588e4e14017dd0acaf57302ea70ff9cd5f29407a Mon Sep 17 00:00:00 2001
From: Alvita Huang <alvita.huang@ringcentral.com>
Date: Thu, 22 Jun 2017 10:42:39 +0800
Subject: [PATCH] fix keyboard behavior cross browser issue

---
 src/components/RecipientsInput/index.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/RecipientsInput/index.js b/src/components/RecipientsInput/index.js
index ea16064d60..0bf1d8745e 100644
--- a/src/components/RecipientsInput/index.js
+++ b/src/components/RecipientsInput/index.js
@@ -119,7 +119,20 @@ class RecipientsInput extends Component {
       }
     };
 
-    this.handleHotKey = (e) => {
+    this.isSplitter = (e) => {
+      if (
+        e.key === ',' || e.key === ';' || e.key === 'Enter' ||
+        (e.key === 'Unidentified' && // for Safari (FF cannot rely on keyCode...)
+        (e.keyCode === 186 || // semicolon
+        e.keyCode === 188 || // comma
+        e.keyCode === 13)) // enter
+      ) {
+        return true;
+      }
+      return false;
+    };
+    // using React SyntheticEvent to deal with cross browser issue
+    this.handleHotKey = (e: React.KeyboardEvent) => {
       if (this.state.isFocusOnInput && this.props.value.length >= 3) {
         if (e.key === 'ArrowUp') {
           this.reduceSelectedContactIndex();
@@ -133,7 +146,7 @@ class RecipientsInput extends Component {
           selectedContactIndex: 0,
         });
       }
-      if (e.key === ',' || e.key === ';' || e.key === 'Enter') {
+      if (this.isSplitter(e)) {
         e.preventDefault();
         if (this.props.value.length === 0) {
           return;