解决HTML Dialog中文件选择取消或重复选择导致Dialog关闭的问题

<dialog id="dialog">
  <form id="form">
    <label>Buggy input</label>
    <input type="file" />
    <label>Patched input</label>
    <div id="pick-file-wrapper">
      <button id="pick-file-button" type="button">Choose File</button>
      <span id="file-name">No file chosen</span>
      <input id="pick-file-input" type="file" />
    </div>
  </form>
</dialog>
<button id="button">Open dialog</button>

#pick-file-wrapper {
  width: 252.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#pick-file-input {
  display: none;
}
#pick-file-button {
  max-width: 253px;
  font-size: smaller;
  flex-shrink: 0;
  flex-grow: 0;
}
#file-name {
  font-size: 13px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: auto;
}
#form {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 4px 8px;
}

/** @type {HTMLDialogElement} dialog */
const dialog = document.getElementById("dialog");
/** @type {HTMLButtonElement} dialog */
const button = document.getElementById("button");
button.addEventListener("click", () => dialog.showModal());

/** @type {HTMLButtonElement} dialog */
const pickFileButton = document.getElementById("pick-file-button");
/** @type {HTMLSpanElement} dialog */
const fileName = document.getElementById("file-name");
pickFileButton.addEventListener("click", handlePickFileByCustomButton);

const filePickerId = "file-picker";
async function handlePickFileByCustomButton() {
  const file = await pickFile();
  /** @type {HTMLInputElement} dialog */
  let inputTag = document.getElementById(filePickerId).cloneNode();
  /** @type {HTMLInputElement} dialog */
  const pickFileInput = document.getElementById("pick-file-input");
  inputTag.style.display = pickFileInput.style.display;
  migrateElementAttributes(pickFileInput, inputTag);
  pickFileInput.parentElement.replaceChild(inputTag, pickFileInput);
  fileName.innerText = Array.from(file)
    .map((fileItem) => fileItem.name)
    .join(", ");
}

/** @return {Promise<FileList>} */
function pickFile() {
  return new Promise((resolve, reject) => {
    /** @type {HTMLInputElement} dialog */
    let inputTag = document.getElementById(filePickerId);
    if (!inputTag) {
      inputTag = document.createElement("input");
      inputTag.type = "file";
      inputTag.id = filePickerId;
      inputTag.style.display = "none";
      document.body.appendChild(inputTag);
    }
    inputTag.onchange = () => {
      if (!inputTag?.files || !inputTag?.value) {
        return;
      }
      resolve(inputTag.files);
    };
    inputTag.click();
  });
}

/**
 * Copy attributes from the existing input element to the new input element
 *
 * @argument {HTMLInputElement} templateElement
 * @argument {HTMLInputElement} targetElement
 */
function migrateElementAttributes(templateElement, targetElement) {
  Array.from(templateElement.attributes).forEach((attr) => {
    if (attr.name !== "files" && attr.name !== "value") {
      targetElement.setAttribute(attr.name, attr.value);
    }
  });
}