diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 001966c346..70b3d8904c 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/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 { }); }; - 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( , @@ -466,7 +459,7 @@ export default class MessageComposer extends React.Component { menuWidth={50} > { buttons.slice(1).map((button, index) => ( - setTimeout(this.toggleButtonMenu, 500)}> + { button } )) } @@ -484,6 +477,12 @@ export default class MessageComposer extends React.Component { 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( { , + setShowStickers={this.showStickers} + menuPosition={menuPosition} />, ); const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording; @@ -559,7 +559,7 @@ export default class MessageComposer extends React.Component {
{ controls } - { this.renderButtons() } + { this.renderButtons(menuPosition) } { showSendButton && ( void; } @@ -407,6 +408,7 @@ export default class Stickerpicker extends React.PureComponent { menuPaddingLeft={0} menuPaddingRight={0} zIndex={STICKERPICKER_Z_INDEX} + {...this.props.menuPosition} > ;