Fix StickerButton

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
signalapp · Jun 8, 2022 · 79c5284 · 79c5284
1 parent f1b05af
commit 79c5284
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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) => {