From 1690566413bc29fb8acc9e8ae30bf8a6753bd440 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Thu, 17 Nov 2022 21:11:58 +0800
Subject: [PATCH] chore: update emoji picker (#483)

---
 web/src/components/Editor/EmojiPicker.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Editor/EmojiPicker.tsx b/web/src/components/Editor/EmojiPicker.tsx
index 191c9e4d2..75f13f54a 100644
--- a/web/src/components/Editor/EmojiPicker.tsx
+++ b/web/src/components/Editor/EmojiPicker.tsx
@@ -1,5 +1,5 @@
 import Picker, { IEmojiPickerProps } from "emoji-picker-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 interface Props {
   shouldShow: boolean;
@@ -7,8 +7,15 @@ interface Props {
   onShouldShowEmojiPickerChange: (status: boolean) => void;
 }
 
+interface State {
+  hasShown: boolean;
+}
+
 export const EmojiPicker: React.FC<Props> = (props: Props) => {
   const { shouldShow, onEmojiClick, onShouldShowEmojiPickerChange } = props;
+  const [state, setState] = useState<State>({
+    hasShown: false,
+  });
 
   useEffect(() => {
     if (shouldShow) {
@@ -25,13 +32,20 @@ export const EmojiPicker: React.FC<Props> = (props: Props) => {
         capture: true,
         once: true,
       });
+      setState({
+        hasShown: true,
+      });
     }
   }, [shouldShow]);
 
   return (
-    <div className={`emoji-picker ${shouldShow ? "" : "hidden"}`}>
-      <Picker onEmojiClick={onEmojiClick} disableSearchBar />
-    </div>
+    <>
+      {state.hasShown && (
+        <div className={`emoji-picker ${shouldShow ? "" : "hidden"}`}>
+          <Picker onEmojiClick={onEmojiClick} disableSearchBar />
+        </div>
+      )}
+    </>
   );
 };