From 0ef6f963a43184c6acf08983bee679f1e9642d9b Mon Sep 17 00:00:00 2001
From: "@daniel-lxs" <57051444+daniel-lxs@users.noreply.github.com>
Date: Mon, 7 Sep 2026 01:09:42 +0000
Subject: [PATCH] fix: retain saved Slack channel selection markers

---
 .../SlackChannelSelect.client.test.tsx        | 79 +++++++++++++++++++
 .../automations/SlackChannelSelect.tsx        |  4 +-
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/settings/automations/SlackChannelSelect.client.test.tsx

diff --git a/apps/web/src/components/settings/automations/SlackChannelSelect.client.test.tsx b/apps/web/src/components/settings/automations/SlackChannelSelect.client.test.tsx
new file mode 100644
index 000000000..3f2a9238d
--- /dev/null
+++ b/apps/web/src/components/settings/automations/SlackChannelSelect.client.test.tsx
@@ -0,0 +1,79 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { SlackChannelSelect } from './SlackChannelSelect';
+
+const options = [
+  { id: 'C123ABC456', name: 'product-debug', label: '#product-debug' },
+  { id: 'C987DEF654', name: 'engineering', label: '#engineering' },
+];
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+describe('SlackChannelSelect', () => {
+  it.each(['C123ABC456', '#product-debug', 'product-debug'])(
+    'marks the displayed channel when its value is %s',
+    (value) => {
+      render(
+        <SlackChannelSelect
+          value={value}
+          options={options}
+          onChange={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByRole('combobox')).toHaveTextContent('#product-debug');
+      fireEvent.click(screen.getByRole('combobox'));
+
+      // The marker's visibility is the regression: saved settings hydrate a name,
+      // while a fresh selection supplies an ID. Both must mark the same channel.
+      expect(
+        screen
+          .getByRole('option', { name: '#product-debug' })
+          .querySelector('svg'),
+      ).toHaveClass('opacity-100');
+      expect(
+        screen
+          .getByRole('option', { name: '#engineering' })
+          .querySelector('svg'),
+      ).toHaveClass('opacity-0');
+    },
+  );
+
+  it.each([null, 'CUNKNOWN'])(
+    'does not mark a channel for an unmatched value %s',
+    (value) => {
+      render(
+        <SlackChannelSelect
+          value={value}
+          options={options}
+          onChange={vi.fn()}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('combobox'));
+
+      for (const option of screen.getAllByRole('option')) {
+        expect(option.querySelector('svg')).toHaveClass('opacity-0');
+      }
+    },
+  );
+
+  it('emits the canonical ID and closes when changing a hydrated selection', () => {
+    const onChange = vi.fn();
+    render(
+      <SlackChannelSelect
+        value="#product-debug"
+        options={options}
+        onChange={onChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('combobox'));
+    fireEvent.click(screen.getByRole('option', { name: '#engineering' }));
+
+    expect(onChange).toHaveBeenCalledWith('C987DEF654');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+});
diff --git a/apps/web/src/components/settings/automations/SlackChannelSelect.tsx b/apps/web/src/components/settings/automations/SlackChannelSelect.tsx
index 0aa2c3a00..1a12fefef 100644
--- a/apps/web/src/components/settings/automations/SlackChannelSelect.tsx
+++ b/apps/web/src/components/settings/automations/SlackChannelSelect.tsx
@@ -106,7 +106,9 @@ export function SlackChannelSelect({
                   <Check
                     className={cn(
                       'mr-2 size-4',
-                      option.id === value ? 'opacity-100' : 'opacity-0',
+                      option.id === selectedOption?.id
+                        ? 'opacity-100'
+                        : 'opacity-0',
                     )}
                   />
                   <span className="truncate">{option.label}</span>