In Vue3, onClick is called twice.

[Koki07]

Hi.
I have found that when I use @click from the Emoji component, it is called twice in Vue 3. I believe this is because the Emoji component is not using the emits option.

https://github.com/serebrov/emoji-mart-vue/blob/master/src/components/Emoji.vue#L11

Thank you.

[Hysterelius]

If you are only trying to get an event when the user has selected an emoji, I would recommend using the @select on the Emoji component instead (this is called once).

<Picker
@select = "myEvent"
/>

[Koki07]

@Hysterelius Thanks!
However, I do not plan to use the Picker as I only want to use the Emoji component.

<emoji
  data="index"
  :emoji="santaEmojiObject"
  :size="32"
  @click="myEvent"
/>

<script>
import data from 'emoji-mart-vue-fast/data/all.json'
let index = new EmojiIndex(data)

export default {
  computed: {
    santaEmojiObject() {
      return index.findEmoji(':santa:')
    },
  },
}
</script>

[serebrov]

I reproduced this issue in the vue3 demo project, the click handler invoked twice, first with emoji object and second time with PointerEvent object.

Related discussion: vuejs/core#813

Adding emits: ["click"] to the component definition seems to help and vue 2 project works with this change too.

[serebrov]

I published version 12.0.1 with the fix.

[Koki07]

Fixed in #243