fix(core): prevent catChange event emission on select initialization

core/src/components/cat-select/cat-select.e2e.ts

@@ -13,4 +13,34 @@ describe('cat-select', () => {
     const element = await page.find('cat-select');
     expect(element).toHaveClass('hydrated');
   });
+
+  it('should not emit catChange event on initialization with value', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <cat-select label="Label" value="option1"></cat-select>
+      <script type="module">
+        const select = document.querySelector('cat-select');
+        const connector = {
+          resolve: ids => Promise.resolve([{ id: 'option1', label: 'Option 1' }].filter(item => ids.includes(item.id))),
+          retrieve: () => Promise.resolve({
+            content: [
+              { id: 'option1', label: 'Option 1' },
+              { id: 'option2', label: 'Option 2' },
+              { id: 'option3', label: 'Option 3' }
+            ],
+            last: true
+          }),
+          render: item => ({ label: item.label })
+        };
+        select.connect(connector);
+      </script>
+    `);
+
+    const select = await page.find('cat-select');
+    const changeSpy = await select.spyOnEvent('catChange');
+
+    await page.waitForChanges();
+
+    expect(changeSpy).not.toHaveReceivedEvent();
+  });
 });

core/src/components/cat-select/cat-select.spec.tsx

@@ -2,6 +2,7 @@ jest.mock('../cat-i18n/cat-i18n-registry');
 
 import { newSpecPage } from '@stencil/core/testing';
 import { CatSelect } from './cat-select';
+import { stringArrayConnector } from './connectors';
 
 describe('cat-select', () => {
   it('renders', async () => {
@@ -13,4 +14,70 @@ describe('cat-select', () => {
       <cat-select label="Label" tabindex="0"></cat-select>
     `);
   });
+
+  describe('catChange', () => {
+    it('should not emit catChange event on initialization with value', async () => {
+      const page = await newSpecPage({
+        components: [CatSelect],
+        html: `<cat-select label="Label" value="option1"></cat-select>`
+      });
+
+      const select = page.rootInstance as CatSelect;
+      const catChangeSpy = jest.fn();
+
+      page.root?.addEventListener('catChange', catChangeSpy);
+
+      await select.connect(stringArrayConnector(['option1', 'option2', 'option3']));
+      await page.waitForChanges();
+
+      expect(catChangeSpy).not.toHaveBeenCalled();
+    });
+
+    it('should emit catChange event when selection state changes from user interaction', async () => {
+      const page = await newSpecPage({
+        components: [CatSelect],
+        html: `<cat-select label="Label"></cat-select>`
+      });
+
+      const select = page.rootInstance as CatSelect;
+      let eventEmitted = false;
+
+      await select.connect(stringArrayConnector(['option1', 'option2', 'option3']));
+      await page.waitForChanges();
+
+      page.root?.addEventListener('catChange', () => {
+        eventEmitted = true;
+      });
+
+      // Directly update selection state (simulating what happens after user interaction)
+      // This mimics the internal flow when user clicks an option
+      select['patchState']({
+        selection: [{ item: { id: 'option1' }, render: { label: 'option1' } }],
+        tempSelection: []
+      });
+      await page.waitForChanges();
+
+      expect(eventEmitted).toBe(true);
+    });
+
+    it('should not emit catChange event when value is changed programmatically', async () => {
+      const page = await newSpecPage({
+        components: [CatSelect],
+        html: `<cat-select label="Label"></cat-select>`
+      });
+
+      const select = page.rootInstance as CatSelect;
+      const catChangeSpy = jest.fn();
+
+      await select.connect(stringArrayConnector(['option1', 'option2', 'option3']));
+      await page.waitForChanges();
+
+      page.root?.addEventListener('catChange', catChangeSpy);
+
+      select.value = 'option2';
+      await page.waitForChanges();
+
+      expect(catChangeSpy).not.toHaveBeenCalled();
+    });
+  });
 });

core/src/components/cat-select/cat-select.tsx

@@ -339,8 +339,8 @@ export class CatSelect {
       if (!oldState.isResolving) {
         this.valueChangedBySelection = true;
         this.value = newValue;
+        this.catChange.emit();
       }
-      this.catChange.emit();
       this.showErrorsIfTimeout();
     }
   }