Emoji Picker open/close event

[Quasarman]

Hey!

First of all let me say you did an awesome job with this component it is really neat!

I dont know if I have overlooked something in the documentation but is there a way to detect when the emoji picker is opened/closed? I want to listen for an event that tells me if the picker was opened/closed so I can accordingly move the chat history, which sits ontop of the message input, up and down.

Since there are a few ways the emoji picker can be closed (pressing the designated button, clicking anywhere else) it would be nice to listen for an event that tells you exactly that.

If this is not already part of the component Id really like to see this feature in the future.

My current workaround is to check the "isPickerOpen" variable but I dont know how to check it when the emojipicker is closed by a click outside of the picker itself and not the button.

[kevinfaveri]

Thank you @Quasarman, glad you liked it!

As an workaround you can use a Vue watcher into the mounted function like that:

mounted() {
    this.$watch(
      () => {
        return this.$refs.twemojiTextareaRef.twemojiPicker.isPickerOpen;
        // OR
        // return this.$refs.twemojiPickerRef.isPickerOpen;
      },
      (value: boolean) => {
      	// Changes the emoji of the button based on it being open or closed
        this.randomEmojiArray = value ? ['😄'] : ['🙂'];
      }
    );
  },

However, I think this can be better documented... And maybe an event could be developed (considering it right now), so thank you for your feedback

[Quasarman]

Neat, thank you for the quick example, I came up with a similar soluition. Also thank you for considering implementing it as an event I really appreciate it!