FIX: Regression with chat shift+select messages (#20305)

Followup to b94fa3b87a035fceff95909f0e866ccd9142ef7c,
which broke the functionality to click on a message
checkbox, hold shift, then click another one, and have
the messages inbetween selected. Add system spec to
catch this.

plugins/chat/assets/javascripts/discourse/components/chat-message.hbs

@@ -60,6 +60,7 @@
         @type="checkbox"
         class="chat-message-selector"
         @checked={{@message.selected}}
+        {{on "click" this.toggleChecked}}
       />
     {{/if}}
 

plugins/chat/assets/javascripts/discourse/components/chat-message.js

@@ -5,7 +5,7 @@ import Component from "@glimmer/component";
 import I18n from "I18n";
 import getURL from "discourse-common/lib/get-url";
 import optionalService from "discourse/lib/optional-service";
-import { afterRender, bind } from "discourse-common/utils/decorators";
+import { bind } from "discourse-common/utils/decorators";
 import EmberObject, { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { cancel, schedule } from "@ember/runloop";
@@ -754,7 +754,6 @@ export default class ChatMessage extends Component {
   }
 
   @action
-  @afterRender
   toggleChecked(e) {
     if (e.shiftKey) {
       this.args.bulkSelectMessages(this.args.message, e.target.checked);

plugins/chat/spec/system/channel_message_selection_spec.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+RSpec.describe "Channel message selection", type: :system, js: true do
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:channel_1) { Fabricate(:chat_channel) }
+  fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1) }
+  fab!(:message_2) { Fabricate(:chat_message, chat_channel: channel_1) }
+  fab!(:message_3) { Fabricate(:chat_message, chat_channel: channel_1) }
+
+  let(:chat) { PageObjects::Pages::Chat.new }
+  let(:channel) { PageObjects::Pages::ChatChannel.new }
+
+  before do
+    chat_system_bootstrap
+    channel_1.add(current_user)
+    sign_in(current_user)
+  end
+
+  it "can select multiple messages" do
+    chat.visit_channel(channel_1)
+    channel.select_message(message_1)
+
+    expect(page).to have_css(".chat-selection-management")
+
+    channel.message_by_id(message_2.id).find(".chat-message-selector").click
+    expect(page).to have_css(".chat-message-selector:checked", count: 2)
+  end
+
+  it "can shift + click to select messages between the first and last" do
+    chat.visit_channel(channel_1)
+    channel.select_message(message_1)
+
+    expect(page).to have_css(".chat-selection-management")
+
+    channel.message_by_id(message_3.id).find(".chat-message-selector").click(:shift)
+    expect(page).to have_css(".chat-message-selector:checked", count: 3)
+  end
+
+  context "when visiting another channel" do
+    fab!(:channel_2) { Fabricate(:chat_channel) }
+
+    before { channel_2.add(current_user) }
+
+    it "resets message selection" do
+      chat.visit_channel(channel_1)
+      channel.select_message(message_1)
+
+      expect(page).to have_css(".chat-selection-management")
+
+      chat.visit_channel(channel_2)
+
+      expect(page).to have_no_css(".chat-selection-management")
+    end
+  end
+end

plugins/chat/spec/system/chat_channel_spec.rb

@@ -171,27 +171,6 @@ RSpec.describe "Chat channel", type: :system, js: true do
     end
   end
 
-  context "when visiting another channel" do
-    fab!(:channel_2) { Fabricate(:chat_channel) }
-
-    before do
-      channel_1.add(current_user)
-      channel_2.add(current_user)
-      sign_in(current_user)
-    end
-
-    it "resets message selection" do
-      chat.visit_channel(channel_1)
-      channel.select_message(message_1)
-
-      expect(page).to have_css(".chat-selection-management")
-
-      chat.visit_channel(channel_2)
-
-      expect(page).to have_no_css(".chat-selection-management")
-    end
-  end
-
   context "when a message contains code fence" do
     fab!(:message_2) { Fabricate(:chat_message, chat_channel: channel_1, message: <<~MESSAGE) }
       Here's a message with code highlighting