22974 2013-08-15 17:53:36 +0000 Ancestors of a modal dialog should not originate events 2013-09-12 20:52:01 +0000 1 1 1 Unclassified WHATWG HTML unspecified PC All RESOLVED WONTFIX http://jsbin.com/okuqoc/2/edit P2 normal Unsorted 1 ykyyip ian bugs falken ian mike contributor oldest_to_newest 92101 0 ykyyip 2013-08-15 17:53:36 +0000 Currently a modal dialog makes every node in its document except for the dialog's ancestors and descendants inert. That means it's possible for a dialog's ancestors to originate events. As a web developer it doesn't make sense to, for example, be able to click on a modal dialog's ancestor node. It seems to me that a modal dialog should be defined such that: * Every node in a modal dialog's document except for its ancestors and descendants do not participate in events. * A modal dialog's ancestors should be able to receive events via event bubbling/capturing, but cannot be an event target. * A modal dialog's descendants participate in events as normal. 92114 1 ian 2013-08-15 20:50:45 +0000 Any node, even an inert node, can be an event target. All it does, basically, is prevent clicks and doesn't let you focus the element. What ancestors are you imagining a <dialog> having where it would be bad if they could be clicked or focused? 92120 2 ykyyip 2013-08-15 21:28:52 +0000 Can an inert node be an event.target? I thought an inert node behaves as if it's missing and therefore can't be an event.target. I think in all cases it would be bad to be able to click on a modal dialog's ancestor. For example, below it doesn't make sense if you can click on #div1 when the modal dialog is open. <body> <div id="div1" style="position:absolute;top:0;left:0;width:100px;height:100px;"> <dialog></dialog> </div> </body> 92123 3 ykyyip 2013-08-15 22:40:01 +0000 Example where you can select text behind a modal dialog: http://jsbin.com/evafib/1/edit Example where you can toggle a modal dialog by clicking on the parent: http://jsbin.com/eqidoc/1/edit 92135 4 falken 2013-08-16 04:23:42 +0000 I'm still undecided about the ideal behavior, but want to point out two use cases for clicking outside the dialog: 1. Clicking outside to dismiss the dialog. For example, go to https://twitter.com/WHATWG while not logged in and try to Retweet something. Clicking outside the resulting dialog dismisses it. 2. Clicking outside shakes the dialog. For example, in Chrome, go to chrome://settings/fonts and click outside the dialog. It's possible ::backdrop meets these use cases (see bug 22569). (In reply to comment #3) > Example where you can select text behind a modal dialog: > http://jsbin.com/evafib/1/edit This is an implementation bug: http://crbug.com/252071 Although the spec just says the user agent may prevent the user from selecting text. 92202 5 ian 2013-08-16 21:04:58 +0000 (In reply to comment #3) > Example where you can select text behind a modal dialog: > http://jsbin.com/evafib/1/edit The Text nodes here are inert, so you shouldn't be able to select them. It's onl the <body> that's not inert. > Example where you can toggle a modal dialog by clicking on the parent: > http://jsbin.com/eqidoc/1/edit Use a <button> for a button, not a <div>. (In reply to comment #2) > Can an inert node be an event.target? Yes. What did you read that made you think otherwise? The problem with making the ancestors inert is that "inert" is defined to operate on entire subtrees, so if the ancestor was inert, the <dialog> would be too.