From 5693722dafc4dd3d2e3fc76baa5591caa1d4a5eb Mon Sep 17 00:00:00 2001
From: Vladimir <govorov2001gv@gmail.com>
Date: Sun, 29 Oct 2023 23:46:03 +0300
Subject: [PATCH 1/2] fix: ability to use custom button via buttonRef prop

---
 src/components/emoji-picker-button.js  | 26 +++++++++++-------
 src/components/emoji-picker-wrapper.js | 38 ++++++++++++--------------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/components/emoji-picker-button.js b/src/components/emoji-picker-button.js
index 45e7b02..429ad5e 100644
--- a/src/components/emoji-picker-button.js
+++ b/src/components/emoji-picker-button.js
@@ -15,21 +15,27 @@ import React, { useEffect, useRef, useState } from "react";
  * @return {JSX.Element}
  */
 function EmojiPickerButton({ showPicker, toggleShowPicker, buttonElement, buttonRef }) {
-  
+  const [typeButton, setTypeButton] = useState(/** @type {"OWN" | "REF" | "CUSTOM_CONTENT" | "IDLE"} */ "IDLE");
   const localButtonRef = useRef(null);
-  const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
 
   useEffect(() => {
-    if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
-      localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
-      setShowCustomButtonContent(true);
-    } else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
+    if (!buttonRef && !buttonElement) {
+      setTypeButton("OWN");
+      return;
+    }
+
+    if (buttonRef && buttonRef.current) {
+      buttonRef.current.addEventListener("click", toggleShowPicker);
+      setTypeButton("REF");
+      return () => buttonRef.current.removeEventListener("click", toggleShowPicker);
+    }
+    else if ((buttonElement?.childNodes?.length ?? 0) >= 2) {
       localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
-      setShowCustomButtonContent(true);
+      setTypeButton("CUSTOM_CONTENT");
     }
-  }, [buttonElement?.childNodes]);
+  }, [buttonRef, buttonElement, buttonElement?.childNodes])
 
-  return (
+  return ( typeButton !== "IDLE" && typeButton !== "REF" &&
     <button
       ref={localButtonRef}
       type="button"
@@ -38,7 +44,7 @@ function EmojiPickerButton({ showPicker, toggleShowPicker, buttonElement, button
       }`}
       onClick={toggleShowPicker}
     >
-      {!showCustomButtonContent && (
+      {typeButton === "OWN" && (
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
diff --git a/src/components/emoji-picker-wrapper.js b/src/components/emoji-picker-wrapper.js
index 3be4bc1..84be082 100644
--- a/src/components/emoji-picker-wrapper.js
+++ b/src/components/emoji-picker-wrapper.js
@@ -106,7 +106,6 @@ const EmojiPickerWrapper = props => {
   }
 
   /**
-   * 
    * @param {React.MouseEvent} event
    * @return {'above' | 'below'}
    */
@@ -150,26 +149,23 @@ const EmojiPickerWrapper = props => {
   }, [buttonRef, buttonElement]);
 
   return customButton ? (
-    (ReactDOM.createPortal(
-      <>
-        <EmojiPickerContainer
-          showPicker={showPicker}
-          theme={theme}
-          handleSelectEmoji={handleSelectEmoji}
-          disableRecent={disableRecent}
-          customEmojis={customEmojis}
-          position={emojiPickerPosition}
-          language={language}
-        />
-        <EmojiPickerButton
-          showPicker={showPicker}
-          toggleShowPicker={toggleShowPicker}
-          buttonElement={customButton}
-          buttonRef={buttonRef}
-        />
-      </>,
-      customButton
-    ))
+    <>
+      <EmojiPickerContainer
+        showPicker={showPicker}
+        theme={theme}
+        handleSelectEmoji={handleSelectEmoji}
+        disableRecent={disableRecent}
+        customEmojis={customEmojis}
+        position={emojiPickerPosition}
+        language={language}
+      />
+      <EmojiPickerButton
+        showPicker={showPicker}
+        toggleShowPicker={toggleShowPicker}
+        buttonElement={customButton}
+        buttonRef={buttonRef}
+      />
+    </>
   ) : (
     (<>
       <EmojiPickerContainer

From 39929574ec4eface93eba0ecb14e25142545cf0e Mon Sep 17 00:00:00 2001
From: Vladimir <govorov2001gv@gmail.com>
Date: Tue, 31 Oct 2023 16:00:50 +0300
Subject: [PATCH 2/2] fix: during unmounting we may not have the
 buttonRef.current element.

---
 src/components/emoji-picker-button.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji-picker-button.js b/src/components/emoji-picker-button.js
index 429ad5e..b298b03 100644
--- a/src/components/emoji-picker-button.js
+++ b/src/components/emoji-picker-button.js
@@ -27,7 +27,10 @@ function EmojiPickerButton({ showPicker, toggleShowPicker, buttonElement, button
     if (buttonRef && buttonRef.current) {
       buttonRef.current.addEventListener("click", toggleShowPicker);
       setTypeButton("REF");
-      return () => buttonRef.current.removeEventListener("click", toggleShowPicker);
+      return () => {
+        if (!buttonRef.current) return;
+        return buttonRef.current.removeEventListener("click", toggleShowPicker);
+      }
     }
     else if ((buttonElement?.childNodes?.length ?? 0) >= 2) {
       localButtonRef.current.appendChild(buttonElement?.childNodes[0]);