Don't close sticker picker if shift is pressed when sending stickers

ts/components/stickers/StickerButton.tsx

@@ -70,6 +70,8 @@ export const StickerButton = React.memo(function StickerButtonInner({
 }: Props) {
   const [open, internalSetOpen] = React.useState(false);
 
+  const [shiftHeld, setShiftHeld] = React.useState(false);
+
   const setOpen = React.useCallback(
     (value: boolean) => {
       internalSetOpen(value);
@@ -80,6 +82,8 @@ export const StickerButton = React.memo(function StickerButtonInner({
     [internalSetOpen, onOpenStateChanged]
   );
 
+  const [recentStickersState, setRecentStickersState] =
+    React.useState(recentStickers);
   const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(null);
   const buttonRef = React.useRef<HTMLButtonElement | null>(null);
   const refMerger = useRefMerger();
@@ -95,6 +99,8 @@ export const StickerButton = React.memo(function StickerButtonInner({
     } else if (popperRoot) {
       setOpen(false);
     } else {
+      // Re-render recent stickers whenever we reopen the sticker picker
+      setRecentStickersState(recentStickers);
       setOpen(true);
     }
   }, [
@@ -103,23 +109,31 @@ export const StickerButton = React.memo(function StickerButtonInner({
     installedPacks,
     onClickAddPack,
     popperRoot,
+    setRecentStickersState,
+    recentStickers,
     setOpen,
   ]);
 
   const handlePickSticker = React.useCallback(
     (packId: string, stickerId: number, url: string) => {
-      setOpen(false);
+      if (!shiftHeld) {
+        setOpen(false);
+      }
+
       onPickSticker(packId, stickerId, url);
     },
-    [setOpen, onPickSticker]
+    [shiftHeld, setOpen, onPickSticker]
   );
 
   const handlePickTimeSticker = React.useCallback(
     (style: 'analog' | 'digital') => {
-      setOpen(false);
+      if (!shiftHeld) {
+        setOpen(false);
+      }
+
       onPickTimeSticker?.(style);
     },
-    [setOpen, onPickTimeSticker]
+    [shiftHeld, setOpen, onPickTimeSticker]
   );
 
   const handleClose = React.useCallback(() => {
@@ -202,19 +216,39 @@ export const StickerButton = React.memo(function StickerButtonInner({
         return;
       }
 
-      if (commandOrCtrl && shiftKey && (key === 'g' || key === 'G')) {
-        event.stopPropagation();
-        event.preventDefault();
+      if (shiftKey) {
+        setShiftHeld(true);
+
+        if (commandOrCtrl && (key === 'g' || key === 'G')) {
+          event.stopPropagation();
+          event.preventDefault();
+
+          setOpen(!open);
+        }
+      }
+    };
+
+    const handleKeyup = (event: KeyboardEvent) => {
+      // event.shiftKey shouldn't be used here--it tells us
+      // if shift was being pressed when the event happened.
 
-        setOpen(!open);
+      // We use event.key to know which specific key was
+      // was released (in this case, Shift), not know about whether
+      // it was held down when the event happened (because it
+      // wouldn't be).
+      if (event.key === 'Shift') {
+        setShiftHeld(false);
       }
     };
+
+    document.addEventListener('keyup', handleKeyup);
     document.addEventListener('keydown', handleKeydown);
 
     return () => {
+      document.removeEventListener('keyup', handleKeyup);
       document.removeEventListener('keydown', handleKeydown);
     };
-  }, [open, setOpen]);
+  }, [open, setOpen, shiftHeld, setShiftHeld]);
 
   // Clear the installed pack after one minute
   React.useEffect(() => {
@@ -371,7 +405,7 @@ export const StickerButton = React.memo(function StickerButtonInner({
                     onPickTimeSticker={
                       onPickTimeSticker ? handlePickTimeSticker : undefined
                     }
-                    recentStickers={recentStickers}
+                    recentStickers={recentStickersState}
                     showPickerHint={showPickerHint}
                   />
                 </div>