From bdec88072ebfe91236cf40e46ae34d63ddbb831e Mon Sep 17 00:00:00 2001
From: hackerbirds <120066692+hackerbirds@users.noreply.github.com>
Date: Thu, 7 Dec 2023 19:57:07 +0100
Subject: [PATCH] Don't close sticker picker if shift is pressed when sending
 stickers

---
 ts/components/stickers/StickerButton.tsx | 22 ++------------------
 ts/components/stickers/StickerPicker.tsx | 26 ++++++++++++++++++++----
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx
index f29bc9ba9a..fe3ced6a6b 100644
--- a/ts/components/stickers/StickerButton.tsx
+++ b/ts/components/stickers/StickerButton.tsx
@@ -106,22 +106,6 @@ export const StickerButton = React.memo(function StickerButtonInner({
     setOpen,
   ]);
 
-  const handlePickSticker = React.useCallback(
-    (packId: string, stickerId: number, url: string) => {
-      setOpen(false);
-      onPickSticker(packId, stickerId, url);
-    },
-    [setOpen, onPickSticker]
-  );
-
-  const handlePickTimeSticker = React.useCallback(
-    (style: 'analog' | 'digital') => {
-      setOpen(false);
-      onPickTimeSticker?.(style);
-    },
-    [setOpen, onPickTimeSticker]
-  );
-
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, [setOpen]);
@@ -367,10 +351,8 @@ export const StickerButton = React.memo(function StickerButtonInner({
                     onClickAddPack={
                       onClickAddPack ? handleClickAddPack : undefined
                     }
-                    onPickSticker={handlePickSticker}
-                    onPickTimeSticker={
-                      onPickTimeSticker ? handlePickTimeSticker : undefined
-                    }
+                    onPickSticker={onPickSticker}
+                    onPickTimeSticker={onPickTimeSticker}
                     recentStickers={recentStickers}
                     showPickerHint={showPickerHint}
                   />
diff --git a/ts/components/stickers/StickerPicker.tsx b/ts/components/stickers/StickerPicker.tsx
index 8e3d28dec7..aeb0f62fcb 100644
--- a/ts/components/stickers/StickerPicker.tsx
+++ b/ts/components/stickers/StickerPicker.tsx
@@ -92,8 +92,11 @@ export const StickerPicker = React.memo(
         tabIds[recentStickers.length > 0 ? 0 : Math.min(1, tabIds.length)]
       );
       const selectedPack = packs.find(({ id }) => id === currentTab);
+      // Prevent recent stickers from re-rendering each time the user sends a sticker
+      // while keeping the sticker picker open (using Shift).
+      const recentStickersRef = React.useRef(recentStickers);
       const {
-        stickers = recentStickers,
+        stickers = recentStickersRef.current,
         title: packTitle = 'Recent Stickers',
       } = selectedPack || {};
 
@@ -321,7 +324,12 @@ export const StickerPicker = React.memo(
                         <button
                           type="button"
                           className="module-sticker-picker__body__cell module-sticker-picker__time--digital"
-                          onClick={() => onPickTimeSticker('digital')}
+                          onClick={e => {
+                            if (!e.shiftKey) {
+                              onClose();
+                            }
+                            return onPickTimeSticker('digital');
+                          }}
                         >
                           {getDateTimeFormatter({
                             hour: 'numeric',
@@ -337,7 +345,12 @@ export const StickerPicker = React.memo(
                             'icu:stickers__StickerPicker__analog-time'
                           )}
                           className="module-sticker-picker__body__cell module-sticker-picker__time--analog"
-                          onClick={() => onPickTimeSticker('analog')}
+                          onClick={e => {
+                            if (!e.shiftKey) {
+                              onClose();
+                            }
+                            return onPickTimeSticker('analog');
+                          }}
                           type="button"
                         >
                           <span
@@ -378,7 +391,12 @@ export const StickerPicker = React.memo(
                           ref={maybeFocusRef}
                           key={`${packId}-${id}`}
                           className="module-sticker-picker__body__cell"
-                          onClick={() => onPickSticker(packId, id, url)}
+                          onClick={e => {
+                            if (!e.shiftKey) {
+                              onClose();
+                            }
+                            return onPickSticker(packId, id, url);
+                          }}
                         >
                           <img
                             className="module-sticker-picker__body__cell__image"