From 1c61aef83bc37f89f4f28f5b3ef88771c1e1d3fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Tue, 27 Dec 2022 13:28:02 +0100
Subject: [PATCH] fix: emoji picker not showing emojis (#569)

---
 .../publish/PublishEmojiPicker.client.vue     | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/components/publish/PublishEmojiPicker.client.vue b/components/publish/PublishEmojiPicker.client.vue
index 255cafdc..fd2044d1 100644
--- a/components/publish/PublishEmojiPicker.client.vue
+++ b/components/publish/PublishEmojiPicker.client.vue
@@ -10,8 +10,14 @@ const el = $ref<HTMLElement>()
 let picker = $ref<Picker>()
 
 async function openEmojiPicker() {
-  if (!picker) {
-    await updateCustomEmojis()
+  await updateCustomEmojis()
+  if (picker) {
+    picker.update({
+      theme: isDark.value ? 'dark' : 'light',
+      custom: customEmojisData.value,
+    })
+  }
+  else {
     const promise = import('@emoji-mart/data').then(r => r.default)
     const { Picker } = await import('emoji-mart')
     picker = new Picker({
@@ -28,28 +34,16 @@ async function openEmojiPicker() {
   el?.appendChild(picker as any as HTMLElement)
 }
 
-const hidePicker = () => {
+const hideEmojiPicker = () => {
   if (picker)
     el?.removeChild(picker as any as HTMLElement)
 }
-
-watch(isDark, () => {
-  picker?.update({
-    theme: isDark.value ? 'dark' : 'light',
-  })
-})
-
-watch(customEmojisData, () => {
-  picker?.update({
-    custom: customEmojisData.value,
-  })
-})
 </script>
 
 <template>
   <VDropdown
     @apply-show="openEmojiPicker()"
-    @apply-hide="hidePicker()"
+    @apply-hide="hideEmojiPicker()"
   >
     <button btn-action-icon :title="$t('tooltip.emoji')">
       <div i-ri:emotion-line />