How to auto-close emoji picker after choosing an emoji

[Vidhya-Dilip]

trafficstars

How to auto-close emoji picker after choosing an emoji?

[DCzajkowski]

I think it's possible, but not pretty. Current API was not designed to handle this case.

What you could do is attach a ref (A) on the component and a click handler (B) on the emoji panel. When B is called, get A using this.$refs and call a hide() function directly on A.

However, this isn't recommended. I could make the API support this, but I am currently on vacation.

[trd-warren]

In my case :)

          <div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
              <div class="emoji-picker">
                <div class="emoji-picker__search">
                  <input type="text" v-model="search" />
                </div>
                <div>
                  <div v-for="(emojiGroup, category) in emojis" :key="category">
                    <h5>{{ category }}</h5>
                    <div class="emojis">
                      <span
                        v-for="(emoji, emojiName) in emojiGroup"
                        :key="emojiName"
                        @click="insert(emoji); display.visible = false"  // <---  close after selecting
                        :title="emojiName"
                        >{{ emoji }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>

[DCzajkowski]

Closing, since there is a way to achieve this as @trd-warren suggested :)