Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari ignores onclose handler attribute #216

Open
inopinatus opened this issue Jan 20, 2021 · 0 comments
Open

Safari ignores onclose handler attribute #216

inopinatus opened this issue Jan 20, 2021 · 0 comments

Comments

@inopinatus
Copy link

inopinatus commented Jan 20, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant