#101 - click outside of emoji implementation

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} `)

src/components/emoji-selector/emoji-selector.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="emoji-dropdown">
+  <div class="emoji-dropdown" @click.prevent="insideClicked">
-    <span class="emoji-dropdown-toggle" @click="togglePanel">
+    <span class="emoji-dropdown-toggle" @click.prevent="togglePanel">
       <i class="icon-smile"></i>
     </span>
     <div class="emoji-dropdown-menu panel panel-default" v-if="open">
@@ -48,7 +48,7 @@
     &-toggle {
       cursor: pointer;
       position: absolute;
-      top: -25px;
+      top: -23px;
       right: 2px;
       line-height: 1;