javascript - HTML 对话框打开时聚焦按钮元素

Question

我目前有一个<dialog>我通过 JS 打开它。出于演示目的，我的对话框有一个 <button>其中的元素。

我的问题是，当我使用 .showModal() 打开对话框时，模式中的按钮由于某种原因而获得焦点。请参阅下面的问题示例:

const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
  dialog.showModal();
});

document.querySelector("#close-btn").addEventListener('click', () => {
  dialog.close();
});

#close-btn:focus {
  background: red;
}

<button id="open-btn">Open</button>
<dialog id="dialog">
  <button id="close-btn">&times;</button>
</dialog>

如您所见，当打开对话框时，对话框内按钮的背景变为 :focus应用了样式，表明它是集中的。

我的问题是:为什么会发生这种情况？我的预期行为是打开对话框并且打开对话框时按钮不聚焦。我知道我可以.blur()以编程方式关闭按钮，但这感觉就像我只是“隐藏”问题而不是解决实际导致问题的问题。

注意:最新版本的 Google Chrome(版本 81.0.4044.138)中存在此问题

Answer 1

这似乎是标准中定义的默认行为，用于在渲染后聚焦模态子树，来自 HTML live standard :

8. Run the dialog focusing steps for subject.

如果你想保持这样并防止按钮聚焦，只需触发按钮上的 blur() 事件，我尝试使用 inert和 autofocus属性，但它们似乎不起作用，所以我认为你必须坚持使用 .blur() 实现:

const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
  dialog.showModal();
  document.getElementById('close-btn').blur();
});

document.querySelector("#close-btn").addEventListener('click', () => {
  dialog.close();
});

#close-btn:focus {
  background: red;
}

<button id="open-btn">Open</button>
<dialog id="dialog">
  <button id="close-btn" inert="false" autofocus="false">&times;</button>
</dialog>