From 7405dee7f6670790bf87a5ec83c31853d608dad0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 25 Dec 2022 17:58:00 +0100
Subject: [PATCH] fix: emoji picker stops showing (#559)

---
 components/publish/PublishEmojiPicker.client.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/publish/PublishEmojiPicker.client.vue b/components/publish/PublishEmojiPicker.client.vue
index 0529cbd3..255cafdc 100644
--- a/components/publish/PublishEmojiPicker.client.vue
+++ b/components/publish/PublishEmojiPicker.client.vue
@@ -11,7 +11,7 @@ let picker = $ref<Picker>()
 
 async function openEmojiPicker() {
   if (!picker) {
-    updateCustomEmojis()
+    await updateCustomEmojis()
     const promise = import('@emoji-mart/data').then(r => r.default)
     const { Picker } = await import('emoji-mart')
     picker = new Picker({
@@ -22,9 +22,15 @@ async function openEmojiPicker() {
       theme: isDark.value ? 'dark' : 'light',
       custom: customEmojisData.value,
     })
-    // TODO: custom picker
-    el?.appendChild(picker as any as HTMLElement)
   }
+  await nextTick()
+  // TODO: custom picker
+  el?.appendChild(picker as any as HTMLElement)
+}
+
+const hidePicker = () => {
+  if (picker)
+    el?.removeChild(picker as any as HTMLElement)
 }
 
 watch(isDark, () => {
@@ -43,6 +49,7 @@ watch(customEmojisData, () => {
 <template>
   <VDropdown
     @apply-show="openEmojiPicker()"
+    @apply-hide="hidePicker()"
   >
     <button btn-action-icon :title="$t('tooltip.emoji')">
       <div i-ri:emotion-line />