Merge pull request #1465 from amitdahan/fix-anchor-react-click-preven…

…tDefault fix: [#1464] Fix react click handler with `preventDefault` on anchor not preventing navigation
capricorn86 · Jun 20, 2024 · 8da51ee · 8da51ee
2 parents ef2dfea + a3b6d86
commit 8da51ee
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/happy-dom/src/nodes/html-anchor-element/HTMLAnchorElement.ts b/packages/happy-dom/src/nodes/html-anchor-element/HTMLAnchorElement.ts
@@ -500,8 +500,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLHyper
 		if (
 			event.type === 'click' &&
 			event instanceof MouseEvent &&
-			(event.eventPhase === EventPhaseEnum.atTarget ||
-				event.eventPhase === EventPhaseEnum.bubbling) &&
+			event.eventPhase === EventPhaseEnum.none &&
 			!event.defaultPrevented
 		) {
 			const href = this.href;

diff --git a/packages/jest-environment/test/react/React.test.tsx b/packages/jest-environment/test/react/React.test.tsx
@@ -110,4 +110,14 @@ describe('React', () => {
 		await TESTING_LIBRARY_USER.click(button);
 		expect(document.querySelector('p span').textContent).toBe('test');
 	});
+
+	it('Can `preventDefault` to prevent navigation with React click listener on an anchor tag', async () => {
+		location.href = 'http://localhost/';
+		const { getByRole } = ReactTestingLibrary.render(
+			<a href="http://example.com" onClick={(ev) => ev.preventDefault()} />
+		);
+		expect(document.location.href).toBe('http://localhost/');
+		await TESTING_LIBRARY_USER.click(getByRole('link'));
+		expect(document.location.href).toBe('http://localhost/');
+	});
 });