Closed Vidhya-Dilip closed 1 year ago
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.
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>
Closing, since there is a way to achieve this as @trd-warren suggested :)
How to auto-close emoji picker after choosing an emoji?