GoogleChrome/dialog-polyfill

Safari ignores onclose handler attribute

inopinatus opened this issue · 0 comments

Whilst taking a look at #211 I noticed a related issue when using the polyfill: Safari ignores the onclose handler attribute.

As a result the following important application functions correctly in Chrome, and in Firefox (with both native and polyfilled dialogs), but not in polyfill'd Safari:

<button accesskey='i' onclick="icecreamPicker.showModal()">The Burden of Choice</button>
<dialog id="icecreamPicker" onclose="icecreamResult.value = this.returnValue">
  <form method="dialog">
    <h1>Decide</h1>
    <input type="submit" style="background-color: #93C572" value="Pistachio">
    <input type="submit" style="background-color: #805a46" value="Chocolate">
  </form>
</dialog>
<output id="icecreamResult" />

Now, for contextual reasons the telling of which is beyond the scope of this bug report, this fragment could not be easily changed, nor could it be extracted to a good old-fashioned addEventListener. Imagine my dismay at such a critical utility being therefore unavailable to a reasonable proportion of users.

Instead, I hacked in support, by forcing Safari to compile the handler string in the approved manner via an otherwise unused handler attribute that it does choose to honour:

<script>
  window.addEventListener('DOMContentLoaded', _ => document.querySelectorAll('dialog').forEach(dialog => {
    dialogPolyfill.registerDialog(dialog)
    if (dialog.hasAttribute("onclose") && !dialog.onclose) {
      dialog.setAttribute("ontoggle", dialog.getAttribute("onclose"))
      dialog.onclose = dialog.ontoggle
      dialog.removeAttribute("ontoggle")
    }
  }))
</script>

and this works, and works particularly well by leaning on the otherwise inaccessible browser internals implementing the Event Handler Content Attribute Change Steps, and it works across the browsers I personally have to shepherd along; however, I'm unsure whether there's a less depraved solution, and of course devotees of the <summary>/<details> combo will have stern things to say about my abuse of ontoggle, and polyfill authors of my flagrant disregard for backwards compatibility.