diff --git a/src/components/views/rooms/MessageComposerButtons.tsx b/src/components/views/rooms/MessageComposerButtons.tsx index 6375519621..0dbeacc719 100644 --- a/src/components/views/rooms/MessageComposerButtons.tsx +++ b/src/components/views/rooms/MessageComposerButtons.tsx @@ -70,7 +70,7 @@ const MessageComposerButtons: React.FC = (props: IProps) => { emojiButton(props), ]; moreButtons = [ - uploadButton(props, roomId), + uploadButton(), // props passed via UploadButtonContext showStickersButton(props), voiceRecordingButton(props, narrow), pollButton(room, props.relation), @@ -79,7 +79,7 @@ const MessageComposerButtons: React.FC = (props: IProps) => { } else { mainButtons = [ emojiButton(props), - uploadButton(props, roomId), + uploadButton(), // props passed via UploadButtonContext ]; moreButtons = [ showStickersButton(props), @@ -98,7 +98,7 @@ const MessageComposerButtons: React.FC = (props: IProps) => { mx_MessageComposer_closeButtonMenu: props.isMenuOpen, }); - return <> + return { mainButtons } = (props: IProps) => { ) } - ; + ; }; function emojiButton(props: IProps): ReactElement { @@ -175,23 +175,22 @@ const EmojiButton: React.FC = ({ addEmoji, menuPosition }) => ; }; -function uploadButton(props: IProps, roomId: string): ReactElement { - return ; +function uploadButton(): ReactElement { + return ; } +type UploadButtonFn = () => void; +export const UploadButtonContext = createContext(null); + interface IUploadButtonProps { roomId: string; relation?: IEventRelation | null; } -const UploadButton = ({ roomId, relation }: IUploadButtonProps) => { +// We put the file input outside the UploadButton component so that it doesn't get killed when the context menu closes. +const UploadButtonContextProvider: React.FC = ({ roomId, relation, children }) => { const cli = useContext(MatrixClientContext); const roomContext = useContext(RoomContext); - const overflowMenuCloser = useContext(OverflowMenuContext); const uploadInput = useRef(); const onUploadClick = () => { @@ -200,7 +199,6 @@ const UploadButton = ({ roomId, relation }: IUploadButtonProps) => { return; } uploadInput.current?.click(); - overflowMenuCloser?.(); // close overflow menu }; useDispatcher(dis, payload => { @@ -229,12 +227,9 @@ const UploadButton = ({ roomId, relation }: IUploadButtonProps) => { }; const uploadInputStyle = { display: 'none' }; - return <> - + return + { children } + { multiple onChange={onUploadFileInputChange} /> - ; + ; +}; + +// Must be rendered within an UploadButtonContextProvider +const UploadButton = () => { + const overflowMenuCloser = useContext(OverflowMenuContext); + const uploadButtonFn = useContext(UploadButtonContext); + + const onClick = () => { + uploadButtonFn?.(); + overflowMenuCloser?.(); // close overflow menu + }; + + return ; }; function showStickersButton(props: IProps): ReactElement {