Unable to close the emoji picker after clicking outside it

[eakenbor]

I have tried using custom vue directives to close the modal upon clicking outside it but does not work as the event is triggered prematurely irrespective of the root element it is placed. Is there any inbuilt custom event for this? Or anyway around it?

[OneMoreRound82]

It would be good if there was a simple 'x' on the pop up to close the modal. Can this be easily done?

[merfed]

This can easily be done with placing a div that gets displayed when you toggle the picker.

<div 
    class="modal-container"
    v-show="showEmojiPicker"
    @click="toggleEmojiPicker"></div>

.modal-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
}

And then adjust the z-index of the emoji-mart container. Which I think by default is 1 or 2.

.emoji-mart {
    z-index: 1020;
}

[coolstackdev]

@eakenbor I did the followings and it worked smoothly.

• First of all, you can add click event listener to body tag on mounted event, which closes emoji picker.
• Please make sure that you remove it on beforeDestroy event to reduce memory leak
• In picker component, stop propagation of click event to prevent closing picker when you select any emoji

Here is the emoji picker component which is toggled by icon button

<template>
  <div class="emoji" @click.stop>
    <div>
      <font-awesome-icon
        class="check"
        icon="smile-beam"
        @click.stop="toggleWindow"
      />
    </div>
    <picker
      v-show="isOpen"
      @select="addEmoji"
    />
  </div>
</template>
<script>
import { Picker } from 'emoji-mart-vue'

export default {
  components: {
    Picker
  },
  data() {
    return {
      isOpen: false,
    }
  },
  methods: {
    toggleWindow() {
      this.isOpen = !this.isOpen
    },
    addEmoji(emoji) {
      // emit to parent or do something
    },
    hidePopup() {
      this.isOpen = false
    }
  },
  mounted() {
    document.body.addEventListener('click', this.hidePopup)
  },
  beforeDestroy() {
    document.body.removeEventListener('click', this.hidePopup)
  }
}
</script>