FIX: ensures message has been added before scroll (#21636)

Wrap scroll to bottom inside a next block to ensure the message has correctly been added to the array before actually attempt to scroll.

This commit also removes an unnecessary line which was essentially adding the message two times with no real consequences as we are uniq on ID.
This commit is contained in:
Joffrey JAFFEUX 2023-05-18 13:50:09 +02:00 committed by GitHub
parent ab4e2bed84
commit c1d3a6a205
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 30 deletions

View File

@ -9,7 +9,7 @@ import { action } from "@ember/object";
import { handleStagedMessage } from "discourse/plugins/chat/discourse/services/chat-pane-base-subscriptions-manager";
import { ajax } from "discourse/lib/ajax";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { cancel, later, schedule } from "@ember/runloop";
import { cancel, later, next, schedule } from "@ember/runloop";
import discourseLater from "discourse-common/lib/later";
import { inject as service } from "@ember/service";
import { Promise } from "rsvp";
@ -479,18 +479,20 @@ export default class ChatLivePane extends Component {
@action
scrollToLatestMessage() {
schedule("afterRender", () => {
if (this._selfDeleted) {
return;
}
next(() => {
schedule("afterRender", () => {
if (this._selfDeleted) {
return;
}
if (this.args.channel?.canLoadMoreFuture) {
this._fetchAndScrollToLatest();
} else if (this.args.channel.messages?.length > 0) {
this.scrollToMessage(
this.args.channel.messages[this.args.channel.messages.length - 1].id
);
}
if (this.args.channel?.canLoadMoreFuture) {
this._fetchAndScrollToLatest();
} else if (this.args.channel.messages?.length > 0) {
this.scrollToMessage(
this.args.channel.messages[this.args.channel.messages.length - 1].id
);
}
});
});
}
@ -653,7 +655,6 @@ export default class ChatLivePane extends Component {
}
this.args.channel.stageMessage(message);
const stagedMessage = message;
this.resetComposer();
if (!this.args.channel.canLoadMoreFuture) {
@ -671,7 +672,7 @@ export default class ChatLivePane extends Component {
this.scrollToLatestMessage();
})
.catch((error) => {
this._onSendError(stagedMessage.id, error);
this._onSendError(message.id, error);
this.scrollToBottom();
})
.finally(() => {

View File

@ -6,7 +6,7 @@ import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { bind, debounce } from "discourse-common/utils/decorators";
import { inject as service } from "@ember/service";
import { schedule } from "@ember/runloop";
import { next, schedule } from "@ember/runloop";
import discourseLater from "discourse-common/lib/later";
import { resetIdle } from "discourse/lib/desktop-notifications";
@ -185,23 +185,21 @@ export default class ChatThreadPanel extends Component {
this.chatChannelThreadPane.sending = true;
this.thread.stageMessage(message);
const stagedMessage = message;
this.resetComposer();
this.thread.messagesManager.addMessages([stagedMessage]);
this.scrollToBottom();
return this.chatApi
.sendMessage(this.channel.id, {
message: stagedMessage.message,
in_reply_to_id: stagedMessage.inReplyTo?.id,
staged_id: stagedMessage.id,
upload_ids: stagedMessage.uploads.map((upload) => upload.id),
thread_id: this.thread.staged ? null : stagedMessage.thread.id,
staged_thread_id: this.thread.staged ? stagedMessage.thread.id : null,
message: message.message,
in_reply_to_id: message.inReplyTo?.id,
staged_id: message.id,
upload_ids: message.uploads.map((upload) => upload.id),
thread_id: this.thread.staged ? null : message.thread.id,
staged_thread_id: this.thread.staged ? message.thread.id : null,
})
.catch((error) => {
this.#onSendError(stagedMessage.id, error);
this.#onSendError(message.id, error);
})
.finally(() => {
if (this._selfDeleted) {
@ -235,13 +233,17 @@ export default class ChatThreadPanel extends Component {
// to the bottom
@action
scrollToBottom() {
if (!this.scrollable) {
return;
}
next(() => {
schedule("afterRender", () => {
if (!this.scrollable) {
return;
}
this.scrollable.scrollTop = this.scrollable.scrollHeight + 1;
this.forceRendering(() => {
this.scrollable.scrollTop = this.scrollable.scrollHeight;
this.scrollable.scrollTop = this.scrollable.scrollHeight + 1;
this.forceRendering(() => {
this.scrollable.scrollTop = this.scrollable.scrollHeight;
});
});
});
}