fix: [#1614] Fixes issue where change event wasn't triggered for an i…

…nput inside of a label (#1743)

* fix: [#1605] Fixes issue when using filtering in TreeWalker, which caused it not to work according to spec

* fix: [#1605] Fixes issue when using filtering in TreeWalker, which caused it not to work according to spec

* chore: [#1614] Fixes issue where input change event wasnt triggered when clicking on an element inside of a label

* chore: [#1614] Fixes issue where input change event wasnt triggered when clicking on an element inside of a label

packages/happy-dom/src/nodes/html-label-element/HTMLLabelElement.ts

@@ -113,7 +113,8 @@ export default class HTMLLabelElement extends HTMLElement {
 		if (
 			!event[PropertySymbol.defaultPrevented] &&
 			event.type === 'click' &&
-			event.eventPhase === EventPhaseEnum.none &&
+			(event.eventPhase === EventPhaseEnum.atTarget ||
+				event.eventPhase === EventPhaseEnum.bubbling) &&
 			event instanceof MouseEvent
 		) {
 			const control = this.control;

packages/happy-dom/test/nodes/html-label-element/HTMLLabelElement.test.ts

@@ -2,7 +2,6 @@ import Window from '../../../src/window/Window.js';
 import Document from '../../../src/nodes/document/Document.js';
 import HTMLLabelElement from '../../../src/nodes/html-label-element/HTMLLabelElement.js';
 import HTMLInputElement from '../../../src/nodes/html-input-element/HTMLInputElement.js';
-import PointerEvent from '../../../src/event/events/PointerEvent.js';
 import { beforeEach, describe, it, expect } from 'vitest';
 import MouseEvent from '../../../src/event/events/MouseEvent.js';
 
@@ -171,5 +170,44 @@ describe('HTMLLabelElement', () => {
 			expect(input.checked).toBe(false);
 			expect(inputClickCount).toBe(0);
 		});
+
+		it('It triggers "change" event on the control element when clicking on a span inside the label.', () => {
+			const div = document.createElement('div');
+			div.innerHTML = `
+                <label>
+                  <input type="checkbox">
+                  <span>Description</span>
+                </label>
+            `;
+			let isChangeFired = false;
+
+			document.body.appendChild(div);
+
+			div.querySelector('input')?.addEventListener('change', () => (isChangeFired = true));
+
+			div.querySelector('span')?.click();
+
+			expect(isChangeFired).toBe(true);
+		});
+
+		it('Doesn\'t trigger "change" event a second time when clicking on control element inside of a label.', () => {
+			const div = document.createElement('div');
+			div.innerHTML = `
+                <label>
+                  <input type="checkbox">
+                  <span>Description</span>
+                </label>
+            `;
+			let changeFiredCount = 0;
+
+			document.body.appendChild(div);
+
+			div.querySelector('input')?.addEventListener('change', () => changeFiredCount++);
+
+			div.querySelector('input')?.click();
+
+			expect(changeFiredCount).toBe(1);
+			expect(div.querySelector('input')?.checked).toBe(true);
+		});
 	});
 });