Position sticker picker correctly

src/components/views/rooms/MessageComposer.tsx

@@ -33,7 +33,6 @@ import {
     ContextMenuTooltipButton,
     useContextMenu,
     MenuItem,
-    alwaysAboveRightOf,
 } from "../../structures/ContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
@@ -407,15 +406,9 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         });
     };
 
-    private renderButtons(): JSX.Element | JSX.Element[] {
+    private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
         const buttons = [];
 
-        let menuPosition;
-        if (this.ref.current) {
-            const contentRect = this.ref.current.getBoundingClientRect();
-            menuPosition = alwaysAboveRightOf(contentRect);
-        }
-
         if (!this.state.haveRecording) {
             buttons.push(
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
@@ -466,7 +459,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                         menuWidth={50}
                     >
                         { buttons.slice(1).map((button, index) => (
-                            <MenuItem className="mx_CallContextMenu_item" key={index} onClick={() => setTimeout(this.toggleButtonMenu, 500)}>
+                            <MenuItem className="mx_CallContextMenu_item" key={index} onClick={this.toggleButtonMenu}>
                                 { button }
                             </MenuItem>
                         )) }
@@ -484,6 +477,12 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 null,
         ];
 
+        let menuPosition;
+        if (this.ref.current) {
+            const contentRect = this.ref.current.getBoundingClientRect();
+            menuPosition = aboveLeftOf(contentRect);
+        }
+
         if (!this.state.tombstone && this.state.canSendMessages) {
             controls.push(
                 <SendMessageComposer
@@ -547,7 +546,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             <Stickerpicker
                 room={this.props.room}
                 showStickers={this.state.showStickers}
-                setShowStickers={this.showStickers} />,
+                setShowStickers={this.showStickers}
+                menuPosition={menuPosition} />,
         );
 
         const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording;
@@ -559,7 +559,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                     <ReplyPreview permalinkCreator={this.props.permalinkCreator} />
                     <div className="mx_MessageComposer_row">
                         { controls }
-                        { this.renderButtons() }
+                        { this.renderButtons(menuPosition) }
                         { showSendButton && (
                             <SendButton
                                 key="controls_send"

src/components/views/rooms/Stickerpicker.tsx

@@ -43,6 +43,7 @@ const PERSISTED_ELEMENT_KEY = "stickerPicker";
 interface IProps {
     room: Room;
     showStickers: boolean;
+    menuPosition?: any;
     setShowStickers: (showStickers: boolean) => void;
 }
 
@@ -407,6 +408,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
             menuPaddingLeft={0}
             menuPaddingRight={0}
             zIndex={STICKERPICKER_Z_INDEX}
+            {...this.props.menuPosition}
         >
             <GenericElementContextMenu element={this.getStickerpickerContent()} onResize={this.onFinished} />
         </ContextMenu>;