Cannot close <dialog> element with display set to grid

user_12237251 0
Viewed 82

The HtmlDialogElement.close() function seems to have no effect on a <dialog> element when that dialog has its display style set to grid.

Does anyone happen to know why? Note that removing the display: grid allow the dialog to function correctly. I have seen this behavior on the latest versions of both Chrome and Firefox.

See minimum reproduction below. If you prefer, here's a Codepen: https://codepen.io/ChristianMay/pen/MWrmdzJ

let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
  dialog.close();
})
dialog {
  display: grid;
}
<dialog class="dialog" open="">
  Test
</dialog>

<button id="dialog-close">Close dialog</button>

dialog css html javascript
2 Answers

The dialog is considered to be open (or shown) if the attribute open is present.

Once this attribute is not present, the dialog is hidden. I suppose that setting the display to grid overrides the default styling for dialog, which should hide the dialog whenever open is removed. We could restore this behavior by adding styling to the dialog without open attribute.

let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
   dialog.close();
})
dialog:not([open]){
  display:none;
}


dialog{
  display:grid;
}
<dialog class="dialog" open="">
  Test
</dialog>

<button id="dialog-close">Close dialog</button>

user_29636520

Already answered , but you could also display <dialog> as a grid only if it is an opened dialog ;)

dialog[open] {
  display: grid;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

The CSS attribute selector matches elements based on the presence or value of a given attribute.

Demo snippet using the CSS attribute selector

const dialog = document.querySelector('dialog')

let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
  dialog.removeAttribute("open");
})

let openButton = document.querySelector("#dialog-open");
openButton.addEventListener('click', () => {
  dialog.setAttribute("open", "");
})
dialog[open] {
  display: grid;
}
<dialog class="dialog" open="">
  Test
</dialog>

<button id="dialog-close">Close dialog</button>
<button id="dialog-open">Open dialog</button>

fork of your pen

user_24420990
Related