diff --git a/core/src/components/cat-select/cat-select.e2e.ts b/core/src/components/cat-select/cat-select.e2e.ts
index 4a7762b80..1b5882622 100644
--- a/core/src/components/cat-select/cat-select.e2e.ts
+++ b/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(`
+
+
+ `);
+
+ const select = await page.find('cat-select');
+ const changeSpy = await select.spyOnEvent('catChange');
+
+ await page.waitForChanges();
+
+ expect(changeSpy).not.toHaveReceivedEvent();
+ });
});
diff --git a/core/src/components/cat-select/cat-select.spec.tsx b/core/src/components/cat-select/cat-select.spec.tsx
index 10b5516bc..fbecb6a23 100644
--- a/core/src/components/cat-select/cat-select.spec.tsx
+++ b/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', () => {
`);
});
+
+ describe('catChange', () => {
+ it('should not emit catChange event on initialization with value', async () => {
+ const page = await newSpecPage({
+ components: [CatSelect],
+ html: ``
+ });
+
+ 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: ``
+ });
+
+ 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: ``
+ });
+
+ 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();
+ });
+ });
});
diff --git a/core/src/components/cat-select/cat-select.tsx b/core/src/components/cat-select/cat-select.tsx
index 398e1fbc3..4de9b7a94 100644
--- a/core/src/components/cat-select/cat-select.tsx
+++ b/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();
}
}