HTML dialog focusing button element when opened

Question

I currently have a <dialog> which I am opening via JS. For demonstration purposes, my dialog has a single <button> element within it.

My issue is, when I open the dialog using .showModal(), the button within the modal gets focused for some reason. See example of issue below:

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>

As you can see, when the dialog is opened, the background of the button within the dialog gets the :focus styles applied, showing that it is focused.

My question is: Why is this happening? My expected behaviour would be for the dialog to open and for the button to not be focused when opening the dialog. I'm aware that I can .blur() the close button programatically, but that feels like I'm just "hiding" the issue rather than addressing the thing that's actually causing it.

Note: This issue is present in the latest version of Google Chrome (Version 81.0.4044.138)

Answer 1

This is seems default behavior defined in the standard to focus the modal subtree once its rendered, from the HTML live standard:

8. Run the dialog focusing steps for subject.

If you want to keep it like this and prevent the button from focus just trigger blur() event on the button, I tried to use inert and autofocus attributes but they doesn't seems to work work, so I think you have to stick with .blur() implementation:

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>

Answer 2

Above snapshot is captured from the style section of the close-btn after opening the dialog box (developer tools of the browser/simply press F12 key to open it).

Webkit of browser is adding outline property explicitly when the dialog box is opened.

The outline property provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

But if you still want to remove it, then use below code.

#close-btn {
  background: red;
  outline: none;
}

I hope this will help you

Answer 3

You can simply do a focus() followed by an immeridate blur() on some arbitrary element.

For example -

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

In the above example I chose to focus and blur on the dialog element itself - that's enough to counteract the default autofocus behavior. Works on Chromium-based browsers.