html
html copied to clipboard
whatwg
Enable support for<dialog> to be dismissed using the back button
One of the biggest shortcomings, in my opinion, of HTML over native mobile apps is the behaviour of the back button in relation to popups / pop-outs.
Currently developers have to use the History API to be able to dismiss a popup when the back button is pressed. I think this adds extra complexity and also it is incorrect since the popup isn't really a new history state.
I propose that the <dialog> element should have native back button support, so that whenever a dialog is manually triggered on a page, it can be dismissed by using the back button. The <dialog> element could contain any content, such as a popup or a custom dropdown menu.
In this case the back button would simply act as an "escape" or "cancel" key - there would be no history state added when the dialog is triggered and also it would not re-trigger if the forward button is pressed.
This would bring the behaviour in line with how native apps work, as users are accustomed to using the back button to dismiss popups. But this experience isn't the same on mobile browsers - I can imagine users will have been pressing the back button on a popup, thinking it will make it go away, but instead navigating to the previous page.
Perhaps this feature could be enabled on mobile/touch devices only? Currently in mobile browsers you can dismiss a <select> and some input controls (such as date) using the back button.
This is actually already supported in the specification: see https://html.spec.whatwg.org/#canceling-dialogs . It's not mandated, because the HTML Standard cannot mandate how browser UI like the back button behaves. But it's definitely allowed, if browsers want to implement this.
The current work on CloseWatcher integration with the dialog element should implement the desired behavior here, right?
Yes! And the spec support for that is in https://wicg.github.io/close-watcher/, which I hope to add to HTML soon-ish.
Regarding the question of which issues in https://github.com/whatwg/html/pull/4184#issuecomment-1072536425 should be considered blocking for writing up a spec of https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#initial-dialog-focus-logic : I don't think this is blocking.
This would be closed by https://github.com/whatwg/html/pull/9462 right?