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(