FIX: messages list shouldn't scroll on new message (#26438)

The expected behavior when receiving a message is the following:

- if user is at the bottom of the screen, scroll and append message
- if user is not at the bottom of the screen, don't scroll, show arrow and don't append message
This commit is contained in:
Joffrey JAFFEUX 2024-04-01 13:58:23 +02:00 committed by GitHub
parent 07605e52c2
commit 453bf3acb3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 6 deletions

View File

@ -74,7 +74,7 @@ export default class ChatChannel extends Component {
@tracked showChatQuoteSuccess = false; @tracked showChatQuoteSuccess = false;
@tracked includeHeader = true; @tracked includeHeader = true;
@tracked needsArrow = false; @tracked needsArrow = false;
@tracked atBottom = false; @tracked atBottom = true;
@tracked uploadDropZone; @tracked uploadDropZone;
@tracked isScrolling = false; @tracked isScrolling = false;
@ -173,6 +173,12 @@ export default class ChatChannel extends Component {
@bind @bind
onNewMessage(message) { onNewMessage(message) {
if (!this.atBottom) {
this.needsArrow = true;
this.messagesLoader.canLoadMoreFuture = true;
return;
}
stackingContextFix(this.scrollable, () => { stackingContextFix(this.scrollable, () => {
this.messagesManager.addMessages([message]); this.messagesManager.addMessages([message]);
}); });

View File

@ -53,7 +53,7 @@ export default class ChatThread extends Component {
@service router; @service router;
@service siteSettings; @service siteSettings;
@tracked isAtBottom = true; @tracked atBottom = true;
@tracked isScrolling = false; @tracked isScrolling = false;
@tracked needsArrow = false; @tracked needsArrow = false;
@tracked uploadDropZone; @tracked uploadDropZone;
@ -316,7 +316,15 @@ export default class ChatThread extends Component {
@bind @bind
onNewMessage(message) { onNewMessage(message) {
if (!this.atBottom) {
this.needsArrow = true;
this.messagesLoader.canLoadMoreFuture = true;
return;
}
stackingContextFix(this.scrollable, () => {
this.messagesManager.addMessages([message]); this.messagesManager.addMessages([message]);
});
} }
@bind @bind

View File

@ -164,12 +164,12 @@ RSpec.describe "Chat channel", type: :system do
50.times { Fabricate(:chat_message, chat_channel: channel_1) } 50.times { Fabricate(:chat_message, chat_channel: channel_1) }
end end
xit "doesnt scroll the pane" do it "doesnt append the message when not at bottom" do
visit("/chat/c/-/#{channel_1.id}/#{message_1.id}") visit("/chat/c/-/#{channel_1.id}/#{message_1.id}")
new_message = Fabricate(:chat_message, chat_channel: channel_1) new_message = Fabricate(:chat_message, chat_channel: channel_1, use_service: true)
expect(page).to have_no_content(new_message.message) expect(channel_page.messages).to have_no_message(id: new_message.id)
end end
end end