Siguiendo este ejemplo , creo un dialog simple que contiene un form :

 const diag = document.querySelector("#diag") diag.addEventListener("close", () => { if (!diag.returnValue) { return; } document.querySelector(".result").textContent = document.querySelector("#txt-name").value; }); document.querySelector("#btn-show").addEventListener("click", () => { diag.showModal(); });

 <dialog id="diag"> <form method="dialog"> <input id="txt-name" required /> <button value="submit">Submit</button> <button value="">Cancel</button> </form> </dialog> <button id="btn-show">Show Dialog</button> <p>Result: <span class="result"></span></p>

Sin embargo, dado que la input tiene un atributo required , el usuario no puede hacer clic en ella sin completarla. Sé que puedo agregar un evento de click al botón Cancelar y cerrar el cuadro de diálogo, pero tengo muchos cuadros de diálogo como este y es mejor si hay una solución nativa general.

Necesito una solución que cierre el diálogo; y establece su returnValue en vacío ("") si dicho botón genera un evento de close .

Solución actual:

 document.querySelector("#btn-cancel") .addEventListener("click", () => { diag.close(""); // Have to set this since onclose event is raised. })