From b42cd1022b1cd8e378fc02c4a7bb89423b5754fb Mon Sep 17 00:00:00 2001
From: AfonsoOrmonde <93348169+AfonsoOrmonde@users.noreply.github.com>
Date: Thu, 16 May 2024 01:22:03 +0100
Subject: [PATCH] streams: Close color picker when scrolling stream settings.

Fixes #17451.
---
 web/src/stream_edit.js               |  7 ++++
 web/tests/stream_settings_ui.test.js | 55 ++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/web/src/stream_edit.js b/web/src/stream_edit.js
index eb60c1a374..4114dabf13 100644
--- a/web/src/stream_edit.js
+++ b/web/src/stream_edit.js
@@ -133,6 +133,13 @@ function show_subscription_settings(sub) {
     const color = stream_data.get_color(sub.stream_id);
     stream_color.set_colorpicker_color($colorpicker, color);
     stream_ui_updates.update_add_subscriptions_elements(sub);
+    const $scroll_container = scroll_util.get_scroll_element($("#stream_settings"));
+
+    $scroll_container.on("scroll", () => {
+        $colorpicker.spectrum("destroy");
+        const color = stream_data.get_color(sub.stream_id);
+        stream_color.set_colorpicker_color($colorpicker, color);
+    });
 
     if (!sub.render_subscribers) {
         return;
diff --git a/web/tests/stream_settings_ui.test.js b/web/tests/stream_settings_ui.test.js
index 930925a6ea..494b95d46c 100644
--- a/web/tests/stream_settings_ui.test.js
+++ b/web/tests/stream_settings_ui.test.js
@@ -233,3 +233,58 @@ run_test("redraw_left_panel", ({mock_template}) => {
     assert.ok(!$(".right .settings").visible());
     assert.ok($(".nothing-selected").visible());
 });
+
+run_test("close color container when scrolling", ({mock_template}) => {
+    // Test to see if logic of the colorpicker closing is correct
+    const admins_group = {
+        name: "Admins",
+        id: 1,
+        members: new Set([1]),
+        is_system_group: true,
+        direct_subgroup_ids: new Set([]),
+    };
+    user_groups.initialize({realm_user_groups: [admins_group]});
+
+    const denmark = {
+        elem: "denmark",
+        subscribed: false,
+        name: "Denmark",
+        stream_id: denmark_stream_id,
+        description: "Copenhagen",
+        subscribers: [1],
+        stream_weekly_traffic: null,
+        color: "red",
+        can_remove_subscribers_group: admins_group.id,
+    };
+
+    const populated_subs = [denmark];
+
+    mock_template("stream_settings/browse_streams_list.hbs", false, (data) => {
+        data.subscriptions = populated_subs;
+    });
+
+    stream_settings_ui.render_left_panel_superset();
+
+    const sub_stubs = [];
+
+    for (const data of populated_subs) {
+        const sub_row = `.stream-row-${CSS.escape(data.elem)}`;
+        sub_stubs.push(sub_row);
+
+        $(sub_row).attr("data-stream-id", data.stream_id);
+    }
+
+    $.create("#streams_overlay_container .stream-row", {children: sub_stubs});
+
+    let colorpicker_closed = false;
+
+    $("#stream_settings").on("scroll", () => {
+        // Set colorpicker_closed to true when scrolling to test out the logic
+        colorpicker_closed = true;
+    });
+
+    $("#stream_settings").trigger("scroll");
+
+    // Check that the variable was indeed changed following the logic
+    assert.ok(colorpicker_closed);
+});