From 79c52847cd6fa1427cc5d3d4e11600850b719b32 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Wed, 8 Jun 2022 14:40:08 -0700
Subject: [PATCH] Fix StickerButton

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
---
 ts/components/MainHeader.tsx             |  7 +++-
 ts/components/emoji/EmojiButton.tsx      | 19 ++++++----
 ts/components/stickers/StickerButton.tsx | 46 +++++++++++++-----------
 3 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx
index 912684467..f53d1edd9 100644
--- a/ts/components/MainHeader.tsx
+++ b/ts/components/MainHeader.tsx
@@ -61,7 +61,12 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   };
 
-  public showAvatarPopup = (): void => {
+  public showAvatarPopup = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ): void => {
+    event.preventDefault();
+    event.stopPropagation();
+
     const popperRoot = document.createElement('div');
     document.body.appendChild(popperRoot);
 
diff --git a/ts/components/emoji/EmojiButton.tsx b/ts/components/emoji/EmojiButton.tsx
index 1636cb2dd..cd94e4cd2 100644
--- a/ts/components/emoji/EmojiButton.tsx
+++ b/ts/components/emoji/EmojiButton.tsx
@@ -44,13 +44,18 @@ export const EmojiButton = React.memo(
       null
     );
 
-    const handleClickButton = React.useCallback(() => {
-      if (popperRoot) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    }, [popperRoot, setOpen]);
+    const handleClickButton = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (popperRoot) {
+          setOpen(false);
+        } else {
+          setOpen(true);
+        }
+      },
+      [popperRoot, setOpen]
+    );
 
     const handleClose = React.useCallback(() => {
       setOpen(false);
diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx
index 37e08e10c..75a9ead73 100644
--- a/ts/components/stickers/StickerButton.tsx
+++ b/ts/components/stickers/StickerButton.tsx
@@ -67,27 +67,33 @@ export const StickerButton = React.memo(
       null
     );
 
-    const handleClickButton = React.useCallback(() => {
-      // Clear tooltip state
-      clearInstalledStickerPack();
-      clearShowIntroduction();
+    const handleClickButton = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        event.preventDefault();
+        event.stopPropagation();
 
-      // Handle button click
-      if (installedPacks.length === 0) {
-        onClickAddPack?.();
-      } else if (popperRoot) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    }, [
-      clearInstalledStickerPack,
-      clearShowIntroduction,
-      installedPacks,
-      onClickAddPack,
-      popperRoot,
-      setOpen,
-    ]);
+        // Clear tooltip state
+        clearInstalledStickerPack();
+        clearShowIntroduction();
+
+        // Handle button click
+        if (installedPacks.length === 0) {
+          onClickAddPack?.();
+        } else if (popperRoot) {
+          setOpen(false);
+        } else {
+          setOpen(true);
+        }
+      },
+      [
+        clearInstalledStickerPack,
+        clearShowIntroduction,
+        installedPacks,
+        onClickAddPack,
+        popperRoot,
+        setOpen,
+      ]
+    );
 
     const handlePickSticker = React.useCallback(
       (packId: string, stickerId: number, url: string) => {