chore: emoji picker disorder

src/common/component/EmojiPicker.js

@@ -1,8 +1,8 @@
-// import React from 'react'
+import { useState, useEffect } from "react";
 // import { NimblePicker } from "emoji-mart";
+import "emoji-mart/css/emoji-mart.css";
 import { Picker } from "emoji-mart";
 // import data from "emoji-mart/data/";
-import "emoji-mart/css/emoji-mart.css";
 import styled from "styled-components";
 const StyledWrapper = styled.div`
   filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
@@ -19,8 +19,19 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function EmojiPicker({ onSelect, ...rest }) {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const inter = setTimeout(() => {
+      setVisible(true);
+    }, 500);
+    return () => {
+      clearTimeout(inter);
+    };
+  }, []);
+
   return (
     <StyledWrapper>
+      {visible ? (
         <Picker
           // set="twitter"
           // data={data}
@@ -30,6 +41,7 @@ export default function EmojiPicker({ onSelect, ...rest }) {
           onSelect={onSelect}
           {...rest}
         />
+      ) : null}
     </StyledWrapper>
   );
 }

src/common/component/Send/EmojiPicker.js

@@ -1,8 +1,7 @@
-import { useState } from "react";
+// import { useState } from "react";
 import Tippy from "@tippyjs/react";
 import styled from "styled-components";
 import Tooltip from "../../component/Tooltip";
-import { useKey } from "rooks";
 const StyledBtn = styled.button`
   outline: none;
   width: fit-content;
@@ -18,38 +17,21 @@ import Picker from "../EmojiPicker";
 import SmileIcon from "../../../assets/icons/emoji.smile.svg";
 
 export default function EmojiPicker({ selectEmoji }) {
-  const [visible, setVisible] = useState(false);
-  useKey(
-    "Escape",
-    (evt) => {
-      evt.preventDefault();
-      toggleVisible();
-    },
-    {
-      // eventTypes: ["keydown"],
-      // target: editableRef,
-      when: visible,
-    }
-  );
-  const toggleVisible = () => {
-    console.log("toggle picker");
-    setVisible((prev) => !prev);
-  };
   const handleSelect = (emoji) => {
     selectEmoji(emoji.native);
   };
   return (
-    <Tooltip placement="top" tip="Emojis" disabled={visible}>
+    <Tooltip placement="top" tip="Emojis">
       <Tippy
-        onClickOutside={toggleVisible}
+        duration={0}
-        visible={visible}
+        delay={[0, 0]}
         offset={[-18, 25]}
         interactive
         placement="top-start"
-        // trigger="click"
+        trigger="click"
         content={<Picker onSelect={handleSelect} />}
       >
-        <StyledBtn onClick={toggleVisible}>
+        <StyledBtn>
           <SmileIcon />
         </StyledBtn>
       </Tippy>