HTMLDialogElement

<!--  -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option></option>
        <option></option>
        <option></option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset"></button>
      <button id="submit" type="submit"></button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails"></button>
</div>

<pre id="log"></pre>

#log {
  height: 150px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const updateButton = document.getElementById("updateDetails");
const confirmButton = document.getElementById("submit");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
const selectElement = document.getElementById("favAnimal");

// 
updateButton.addEventListener("click", () => {
  dialog.showModal();
});

// 
confirmButton.addEventListener("click", () => {
  if (selectElement.value) {
    // dialog.returnValue 
    dialog.close(selectElement.value);
  }
});

// 
cancelButton.addEventListener("click", () => {
  dialog.close(); // dialog.returnValue  null 
});

dialog.addEventListener("close", (event) => {
  log(`close_event: (dialog.returnValue: "${dialog.returnValue}")`);
});

dialog.addEventListener("cancel", (event) => {
  log(`cancel_event: (dialog.returnValue: "${dialog.returnValue}")`);
  dialog.returnValue = ""; // 
});

dialog.addEventListener("toggle", (event) => {
  log(`toggle_event: Dialog ${event.newState}`);
});

dialog.addEventListener("beforetoggle", (event) => {
  log(
    `beforetoggle event: oldState: ${event.oldState}, newState: ${event.newState}`,
  );

  // event.preventDefault() 
  /*
    if (shouldCancel()) {
        event.preventDefault();
    }
  */
});