diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss
index 9feb337042..10f8e21e43 100644
--- a/res/css/views/rooms/_ReplyPreview.scss
+++ b/res/css/views/rooms/_ReplyPreview.scss
@@ -15,10 +15,6 @@ limitations under the License.
*/
.mx_ReplyPreview {
- position: absolute;
- bottom: 0;
- z-index: 1000;
- width: 100%;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
border-bottom: none;
diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
index 0b646666e7..9f6a8d52ce 100644
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -44,10 +44,5 @@ limitations under the License.
overflow-y: auto;
}
}
-
- .mx_SendMessageComposer_overlayWrapper {
- position: relative;
- height: 0;
- }
}
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 9a61523941..a79e5b0aa8 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1913,6 +1913,7 @@ export default createReactClass({
disabled={this.props.disabled}
showApps={this.state.showApps}
e2eStatus={this.state.e2eStatus}
+ resizeNotifier={this.props.resizeNotifier}
permalinkCreator={this._getPermalinkCreatorForRoom(this.state.room)}
/>;
}
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index c4f400c872..922cc2b11e 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -30,6 +30,8 @@ import E2EIcon from './E2EIcon';
import SettingsStore from "../../../settings/SettingsStore";
import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import ReplyPreview from "./ReplyPreview";
+
function ComposerAvatar(props) {
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
return
@@ -223,7 +225,7 @@ export default class MessageComposer extends React.Component {
this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
this._onTombstoneClick = this._onTombstoneClick.bind(this);
this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
-
+ this._dispatcherRef = null;
this.state = {
isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
tombstone: this._getRoomTombstone(),
@@ -232,7 +234,20 @@ export default class MessageComposer extends React.Component {
};
}
+ onAction = (payload) => {
+ if (payload.action === 'reply_to_event') {
+ // add a timeout for the reply preview to be rendered, so
+ // that the ScrollPanel listening to the resizeNotifier can
+ // correctly measure it's new height and scroll down to keep
+ // at the bottom if it already is
+ setTimeout(() => {
+ this.props.resizeNotifier.notifyTimelineHeightChanged();
+ }, 100);
+ }
+ };
+
componentDidMount() {
+ this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
this._waitForOwnMember();
@@ -261,6 +276,7 @@ export default class MessageComposer extends React.Component {
if (this._roomStoreToken) {
this._roomStoreToken.remove();
}
+ dis.unregister(this.dispatcherRef);
}
_onRoomStateEvents(ev, state) {
@@ -364,6 +380,7 @@ export default class MessageComposer extends React.Component {
key="controls_input"
room={this.props.room}
placeholder={this.renderPlaceholderText()}
+ resizeNotifier={this.props.resizeNotifier}
permalinkCreator={this.props.permalinkCreator} />,
,
,
@@ -414,6 +431,7 @@ export default class MessageComposer extends React.Component {
return (
+
{ controls }
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 130135f641..6a7b2fc753 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -29,7 +29,6 @@ import {
} from '../../../editor/serialize';
import {CommandPartCreator} from '../../../editor/parts';
import BasicMessageComposer from "./BasicMessageComposer";
-import ReplyPreview from "./ReplyPreview";
import RoomViewStore from '../../../stores/RoomViewStore';
import ReplyThread from "../elements/ReplyThread";
import {parseEvent} from '../../../editor/deserialize';
@@ -444,9 +443,6 @@ export default class SendMessageComposer extends React.Component {
render() {
return (