#101 - click outside of emoji implementation

1 files changed, 12 insertions, 0 deletions

diff --git a/src/components/emoji-selector/emoji-selector.js b/src/components/emoji-selector/emoji-selector.js
index 6d45df1f..969b880b 100644
--- a/src/components/emoji-selector/emoji-selector.js
+++ b/src/components/emoji-selector/emoji-selector.js
@@ -3,6 +3,12 @@ const filterByKeyword = (list, keyword = '') => {
 }
 
 const EmojiSelector = {
+  mounted () {
+    document.body.addEventListener('click', this.outsideClicked)
+  },
+  destroyed () {
+    document.body.removeEventListener('click', this.outsideClicked)
+  },
   data () {
     return {
       open: false,
@@ -14,6 +20,12 @@ const EmojiSelector = {
     togglePanel () {
       this.open = !this.open
     },
+    insideClicked (e) {
+      e.stopPropagation()
+    },
+    outsideClicked () {
+      this.open = false
+    },
     onEmoji (emoji) {
       const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
       this.$emit('emoji', ` ${value} `)