为什么单击模态对话框中嵌入的表单内的选择下拉列表只会在 Firefox 中关闭模态？

Question

平台：Windows 10.Firefox 119。

我在一个更复杂的项目中构建了一个模式对话框并遇到了这个错误。 我正在测试的其他浏览器是 Chrome 和 Edge。这些都没有这个bug以下代码是我原始项目的高度简化版本。

在 Firefox 中，一旦单击选择下拉菜单，模式就会关闭，不允许提交表单。

演示：https://jsfiddle.net/najfiddle/1uxw2Le8/1/

还有其他人遇到过这个吗？有人解决了吗

/** Form **/
const form = document.getElementById("form")

form.addEventListener("submit", e => {
  e.preventDefault()
  e.target.reset()
  modal.close()
})


/** Modal **/
const launchModalBtn = document.getElementById("launch-modal")
const modal = document.getElementById("modal")

launchModalBtn.addEventListener("click", () => {
  modal.showModal()
})

/* modal backdrop */
modal.addEventListener("click", (e) => {
  const modalDimensions = modal.getBoundingClientRect()

  if (
    e.clientX < modalDimensions.left ||
    e.clientX > modalDimensions.right ||
    e.clientY < modalDimensions.top ||
    e.clientY > modalDimensions.bottom
  ) {
    form.reset()
    modal.close()
  }
})

/*Form */

form,
form>div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/** Modal */

.modal {
  z-index: 50;
  padding: 4rem;
  margin: auto;
  border-radius: 0.2rem;
  border: 0;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-end;
}

.modal::backdrop {
  background-color: rgba(9, 9, 70, 0.8);
  z-index: 40;
  cursor: pointer;
}

<button id="launch-modal">
        Open modal
    </button>
<dialog id="modal" class="modal">
  <div class="modal-content">
    <form id="form">
      <div class="word-phrase">
        <label for="term" class="term">Word</label>

        <input id="term" type="text">
      </div>
      <div>
        <label for="definition">Definition </label>
        <textarea id="definition" rows="5" cols="50"></textarea>
      </div>
      <div>
        <label for="language-select">Choose language</label>
        <select id="language-select" name="language-select">
          <option value="en">English</option>
          <option value="fr">French</option>
          <option value="de">German</option>
          <option value="it">Italian</option>
          <option value="la">Latin</option>
          <option value="es">Spanish</option>
          <option value="und">Other</option>
        </select>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
  </div>
</dialog>

Answer 1

我可以确认这个问题。拖动也存在类似问题：https://bugzilla.mozilla.org/show_bug.cgi?id=505521#c80

最安全的解决方案是不查看边界框，而只是检查单击是否在表单内部

在 Windows 10 上的 Fx 118 和 119 中进行测试

/** Form **/
const form = document.getElementById("form")

form.addEventListener("submit", e => {
  console.log("submitted")
  e.preventDefault()
  e.target.reset()
  modal.close()
})


/** Modal **/
const launchModalBtn = document.getElementById("launch-modal")
const modal = document.getElementById("modal")

launchModalBtn.addEventListener("click", () => {
  modal.showModal()
})

/* modal backdrop */
modal.addEventListener("click", (e) => {
  const formClicked = e.target.closest('form')
  if (!formClicked) {
    form.reset()
    modal.close()
  }
})

/*Form */

form,
form>div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/** Modal */

.modal {
  z-index: 50;
  padding: 4rem;
  margin: auto;
  border-radius: 0.2rem;
  border: 0;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-end;
}

.modal::backdrop {
  background-color: rgba(9, 9, 70, 0.8);
  z-index: 40;
  cursor: pointer;
}

<button id="launch-modal">
        Open modal
    </button>
<dialog id="modal" class="modal">
  <div class="modal-content">
    <form id="form">
      <div class="word-phrase">
        <label for="term" class="term">Word</label>

        <input id="term" type="text">
      </div>
      <div>
        <label for="definition">Definition </label>
        <textarea id="definition" rows="5" cols="50"></textarea>
      </div>
      <div>
        <label for="language-select">Choose language</label>
        <select id="language-select" name="language-select">
          <option value="en">English</option>
          <option value="fr">French</option>
          <option value="de">German</option>
          <option value="it">Italian</option>
          <option value="la">Latin</option>
          <option value="es">Spanish</option>
          <option value="und">Other</option>
        </select>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
  </div>
</dialog>