capricorn86 / happy-dom

A JavaScript implementation of a web browser without its graphical user interface
MIT License
3.38k stars 200 forks source link

method="dialog" form submission does not close the dialog element (modal) #1184

Open hyunbinseo opened 10 months ago

hyunbinseo commented 10 months ago

Describe the bug

When the form (of method="dialog") is inside a <dialog>, closes the dialog and causes a submit event to be fired on submission, without submitting data or clearing the form.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method

To Reproduce

import { Window } from 'happy-dom';

const window = new Window();
const document = window.document;

// Copy below and paste it in a browser console.

document.body.innerHTML = `
<dialog>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>`;

const dialog = document.querySelector('dialog');
console.log(dialog.open); // false

dialog.showModal();
console.log(dialog.open); // true

const button = document.querySelector('button');
button.click();
console.log(dialog.open); // true - should be false

const form = document.querySelector('form');
form.submit();
console.log(dialog.open); // true - should be false

Expected behavior

Dialog should have been closed on the button press.

Device:

OS: macOS 14.2.1 CPU: (10) arm64 Apple M1 Pro Memory: 85.06 MB / 16.00 GB

Chrome: 120.0.6099.129 Edge: 120.0.2210.91 Safari: 17.2.1

fmorency commented 2 months ago

This also bites me.

daniellevinson commented 1 week ago

same for Escape key