[Patch] add onClick event listeners for emojis

ealush · Jan 27, 2018 · 39c1b4b · 39c1b4b
1 parent bc78bee
commit 39c1b4b
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 77 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/universal/index.js b/dist/universal/index.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "React emoji-picker component",
   "main": "./dist/index.js",
   "scripts": {

diff --git a/src/DiversityPicker/index.js b/src/DiversityPicker/index.js
@@ -16,10 +16,16 @@ function DiversityPicker({ index, assetPath, emojiResolution, onEmojiClick, clos
 
     let diversities = null;
 
-    function onClick(diversity, e) {
+    function onMouseDown(diversity, e) {
         e.preventDefault();
         onEmojiClick(diversity, emoji, e);
-        close();
+        setTimeout(() => {
+            close();
+        }, 500);
+    }
+
+    function onClick(e) {
+        e.preventDefault();
     }
 
     if (emoji && emoji.diversities) {
@@ -35,7 +41,8 @@ function DiversityPicker({ index, assetPath, emojiResolution, onEmojiClick, clos
                         key={diversity}
                         style={style}
                         className="emoji"
-                        onMouseDown={((e) => onClick(diversity, e))}/>
+                        onClick={onClick}
+                        onMouseDown={((e) => onMouseDown(diversity, e))}/>
                 );
             })
         }</div>

diff --git a/src/Emoji/index.js b/src/Emoji/index.js
@@ -13,6 +13,7 @@ class Emoji extends Component {
         this.hasDiversities = this.emoji.hasOwnProperty('diversities');
 
         this.onClick = this.onClick.bind(this);
+        this.emojiChosen = this.emojiChosen.bind(this);
         this.onMouseEnter = this.onMouseEnter.bind(this);
         this.onMouseLeave = this.onMouseLeave.bind(this);
         this.onMouseDown = this.onMouseDown.bind(this);
@@ -30,10 +31,13 @@ class Emoji extends Component {
     }
 
     onClick(e) {
+        e.preventDefault();
+    }
+
+    emojiChosen(e) {
         const { emoji } = this.props;
         const onEmojiClick = this.context.onEmojiClick;
 
-        e.preventDefault();
         onEmojiClick && onEmojiClick(emoji.unified, emoji, e);
     }
 
@@ -87,7 +91,7 @@ class Emoji extends Component {
         delete this.timeCounter;
 
         if (!(counter && (Date.now() - counter) >= OPEN_DIVERSITIES_TIMEOUT)) {
-            return this.onClick(e);
+            return this.emojiChosen(e);
         }
     }
 
@@ -115,6 +119,7 @@ class Emoji extends Component {
         return (
             <a href="#!"
                 className={className}
+                onClick={this.onClick}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}
                 onMouseDown={this.onMouseDown}

diff --git a/src/EmojiPicker/index.js b/src/EmojiPicker/index.js
@@ -198,7 +198,9 @@ class EmojiPicker extends Component {
 
     onEmojiClick(unified, emoji, e) {
 
-        e.preventDefault();
+        if (!e.defaultPrevented) {
+            e.preventDefault();
+        }
 
         const usedModifiers = modifiers.filter((modifier) => unified.indexOf(modifier) > -1);