diff --git a/src/components/views/rooms/MSC2545StickerPicker.tsx b/src/components/views/rooms/MSC2545StickerPicker.tsx index 7f8482a1368..537591ea7c6 100644 --- a/src/components/views/rooms/MSC2545StickerPicker.tsx +++ b/src/components/views/rooms/MSC2545StickerPicker.tsx @@ -18,7 +18,7 @@ limitations under the License. */ import { IImageInfo, Room } from 'matrix-js-sdk/src/matrix'; -import React, { useCallback, useContext, useEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import MatrixClientContext from '../../../contexts/MatrixClientContext'; import { mediaFromMxc } from '../../../customisations/Media'; @@ -57,8 +57,9 @@ const PackImage: React.FC<{ image: I2545Image, roomId: string, threadId: string, - setStickerPickerOpen: (isStickerPickerOpen: boolean) => void; -}> = ({ image, roomId, threadId, setStickerPickerOpen }) => { + setStickerPickerOpen: (isStickerPickerOpen: boolean) => void, + innerRef: React.RefObject | null +}> = ({ image, roomId, threadId, setStickerPickerOpen, innerRef }) => { const cli = useContext(MatrixClientContext); const media = mediaFromMxc(image.url, cli); // noinspection JSIgnoredPromiseFromCall @@ -74,7 +75,7 @@ const PackImage: React.FC<{ // eslint-disable-next-line new-cap return
- {image.body} + {image.body}
; }; @@ -104,13 +105,18 @@ export const MSC2545StickerPicker: React.FC<{ }); }).flat(1); - const finished = () => { + const topStickerRef = React.createRef(); + + const finished = (send: boolean) => () => { if (isStickerPickerOpen) { + if (send) topStickerRef.current.click(); setStickerPickerOpen(false); + setSearchFilter(""); } }; - const renderedPacks = packs.map(({ pack, packName }) => { + + const renderedPacks = packs.map(({ pack, packName }, packIdx) => { const lcFilter = searchFilter.toLowerCase().trim(); // filter is case insensitive const images = Object.values(pack.images) .filter(im => im.body.toLowerCase().includes(lcFilter)); @@ -121,6 +127,7 @@ export const MSC2545StickerPicker: React.FC<{

{pack.pack.display_name}

{images.map((im, idx) => - { }} /> + {renderedPacks} } - onResize={finished} /> + onResize={finished(false)} /> ; };