happy-dom icon indicating copy to clipboard operation
happy-dom copied to clipboard

When submitting a form, the `event.target` is not the proper node.

Open juandiegombr opened this issue 5 months ago • 1 comments

Describe the bug When submitting a form, the form element obtained via the event.target is different from the form element obtained via document.getElementById(formId) or document.forms.namedItem(formId)

To Reproduce This test should pass:

it('submit target node is equal to node retrieved from document', () => {
	const element = <HTMLFormElement>document.createElement('form');
	element.setAttribute('id', 'form-id');
	element.innerHTML = `
						<div>
								<input type="text" name="text1">
						</div>
				`;

	document.body.appendChild(element);

	let submitEvent: Event | null = null;
	let target: EventTarget | null = null;

	element.addEventListener('submit', (event: Event) => {
		submitEvent = event;
		target = event.target;
	});

	element.action = 'https://localhost:3000';
	element.noValidate = true;
	element.requestSubmit();

	const form = document.forms.namedItem('form-id');
	expect(form === target).toBeTruthy();
});

Expected behavior Both nodes should be the same.

Additional context This problem came up when using conform-to/react. In the source code of this library makes this comparison. While in the browser works well it fails if a try to test it.

https://github.com/edmundhung/conform/blob/main/packages/conform-dom/form.ts#L784-L794

juandiegombr avatar Sep 18 '24 08:09 juandiegombr