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.
Describe the bug When submitting a form, the form element obtained via the
event.target
is different from the form element obtained viadocument.getElementById(formId)
ordocument.forms.namedItem(formId)
To Reproduce This test should pass:
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