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

WIP dialog closedby attribute spec #10157

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

lukewarlow
Copy link
Member

@lukewarlow lukewarlow commented Feb 22, 2024

FIxes #9373

This is a very rough WIP draft at this. Needs linting etc.

  • At least two implementers are interested (and none opposed):
    • Chromium
  • Tests are written and can be reviewed and commented upon at:
  • Implementation bugs are filed:
    • Chromium: …
    • Gecko: …
    • WebKit: …
  • MDN issue is filed: …
  • The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)


💥 Error: 429 Too Many Requests 💥

PR Preview failed to build. (Last tried on May 8, 2024, 8:18 PM UTC).

More

PR Preview relies on a number of web services to run. There seems to be an issue with the following one:

🚨 HTML Diff Service - The HTML Diff Service is used to create HTML diffs of the spec changes suggested in a pull request.

🔗 [Related URL]([object Object])

<!DOCTYPE html><html lang="en-US"><head><title>Just a moment...</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="robots" content="noindex,nofollow"><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{box-sizing:border-box;margin:0;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%;color:#313131}button,html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}@media (prefers-color-scheme:dark){body{background-color:#222;color:#d9d9d9}body a{color:#fff}body a:hover{color:#ee730a;text-decoration:underline}body .lds-ring div{border-color:#999 transparent transparent}body .font-red{color:#b20f03}body .pow-button{background-color:#4693ff;color:#1d1d1d}body #challenge-success-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI2IDI2Ij48cGF0aCBmaWxsPSIjZDlkOWQ5IiBkPSJNMTMgMGExMyAxMyAwIDEgMCAwIDI2IDEzIDEzIDAgMCAwIDAtMjZtMCAyNGExMSAxMSAwIDEgMSAwLTIyIDExIDExIDAgMCAxIDAgMjIiLz48cGF0aCBmaWxsPSIjZDlkOWQ5IiBkPSJtMTAuOTU1IDE2LjA1NS0zLjk1LTQuMTI1LTEuNDQ1IDEuMzg1IDUuMzcgNS42MSA5LjQ5NS05LjYtMS40Mi0xLjQwNXoiLz48L3N2Zz4=)}body #challenge-error-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0IyMEYwMyIgZD0iTTE2IDNhMTMgMTMgMCAxIDAgMTMgMTNBMTMuMDE1IDEzLjAxNSAwIDAgMCAxNiAzbTAgMjRhMTEgMTEgMCAxIDEgMTEtMTEgMTEuMDEgMTEuMDEgMCAwIDEtMTEgMTEiLz48cGF0aCBmaWxsPSIjQjIwRjAzIiBkPSJNMTcuMDM4IDE4LjYxNUgxNC44N0wxNC41NjMgOS41aDIuNzgzem0tMS4wODQgMS40MjdxLjY2IDAgMS4wNTcuMzg4LjQwNy4zODkuNDA3Ljk5NCAwIC41OTYtLjQwNy45ODQtLjM5Ny4zOS0xLjA1Ny4zODktLjY1IDAtMS4wNTYtLjM4OS0uMzk4LS4zODktLjM5OC0uOTg0IDAtLjU5Ny4zOTgtLjk4NS40MDYtLjM5NyAxLjA1Ni0uMzk3Ii8+PC9zdmc+)}}body{display:flex;flex-direction:column;min-height:100vh}body.no-js .loading-spinner{visibility:hidden}body.no-js .challenge-running{display:none}body.dark{background-color:#222;color:#d9d9d9}body.dark a{color:#fff}body.dark a:hover{color:#ee730a;text-decoration:underline}body.dark .lds-ring div{border-color:#999 transparent transparent}body.dark .font-red{color:#b20f03}body.dark .pow-button{background-color:#4693ff;color:#1d1d1d}body.dark #challenge-success-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI2IDI2Ij48cGF0aCBmaWxsPSIjZDlkOWQ5IiBkPSJNMTMgMGExMyAxMyAwIDEgMCAwIDI2IDEzIDEzIDAgMCAwIDAtMjZtMCAyNGExMSAxMSAwIDEgMSAwLTIyIDExIDExIDAgMCAxIDAgMjIiLz48cGF0aCBmaWxsPSIjZDlkOWQ5IiBkPSJtMTAuOTU1IDE2LjA1NS0zLjk1LTQuMTI1LTEuNDQ1IDEuMzg1IDUuMzcgNS42MSA5LjQ5NS05LjYtMS40Mi0xLjQwNXoiLz48L3N2Zz4=)}body.dark #challenge-error-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0IyMEYwMyIgZD0iTTE2IDNhMTMgMTMgMCAxIDAgMTMgMTNBMTMuMDE1IDEzLjAxNSAwIDAgMCAxNiAzbTAgMjRhMTEgMTEgMCAxIDEgMTEtMTEgMTEuMDEgMTEuMDEgMCAwIDEtMTEgMTEiLz48cGF0aCBmaWxsPSIjQjIwRjAzIiBkPSJNMTcuMDM4IDE4LjYxNUgxNC44N0wxNC41NjMgOS41aDIuNzgzem0tMS4wODQgMS40MjdxLjY2IDAgMS4wNTcuMzg4LjQwNy4zODkuNDA3Ljk5NCAwIC41OTYtLjQwNy45ODQtLjM5Ny4zOS0xLjA1Ny4zODktLjY1IDAtMS4wNTYtLjM4OS0uMzk4LS4zODktLjM5OC0uOTg0IDAtLjU5Ny4zOTgtLjk4NS40MDYtLjM5NyAxLjA1Ni0uMzk3Ii8+PC9zdmc+)}body.light{background-color:transparent;color:#313131}body.light a{color:#0051c3}body.light a:hover{color:#ee730a;text-decoration:underline}body.light .lds-ring div{border-color:#595959 transparent transparent}body.light .font-red{color:#fc574a}body.light .pow-button{background-color:#003681;border-color:#003681;color:#fff}body.light #challenge-success-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI2IDI2Ij48cGF0aCBmaWxsPSIjMzEzMTMxIiBkPSJNMTMgMGExMyAxMyAwIDEgMCAwIDI2IDEzIDEzIDAgMCAwIDAtMjZtMCAyNGExMSAxMSAwIDEgMSAwLTIyIDExIDExIDAgMCAxIDAgMjIiLz48cGF0aCBmaWxsPSIjMzEzMTMxIiBkPSJtMTAuOTU1IDE2LjA1NS0zLjk1LTQuMTI1LTEuNDQ1IDEuMzg1IDUuMzcgNS42MSA5LjQ5NS05LjYtMS40Mi0xLjQwNXoiLz48L3N2Zz4=)}body.light #challenge-error-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZjNTc0YSIgZD0iTTE2IDNhMTMgMTMgMCAxIDAgMTMgMTNBMTMuMDE1IDEzLjAxNSAwIDAgMCAxNiAzbTAgMjRhMTEgMTEgMCAxIDEgMTEtMTEgMTEuMDEgMTEuMDEgMCAwIDEtMTEgMTEiLz48cGF0aCBmaWxsPSIjZmM1NzRhIiBkPSJNMTcuMDM4IDE4LjYxNUgxNC44N0wxNC41NjMgOS41aDIuNzgzem0tMS4wODQgMS40MjdxLjY2IDAgMS4wNTcuMzg4LjQwNy4zODkuNDA3Ljk5NCAwIC41OTYtLjQwNy45ODQtLjM5Ny4zOS0xLjA1Ny4zODktLjY1IDAtMS4wNTYtLjM4OS0uMzk4LS4zODktLjM5OC0uOTg0IDAtLjU5Ny4zOTgtLjk4NS40MDYtLjM5NyAxLjA1Ni0uMzk3Ii8+PC9zdmc+)}a{background-color:transparent;color:#0051c3;text-decoration:none;transition:color .15s ease}a:hover{color:#ee730a;text-decoration:underline}.main-content{margin:8rem auto;max-width:60rem;width:100%}.heading-favicon{height:2rem;margin-right:.5rem;width:2rem}@media (width <= 720px){.main-content{margin-top:4rem}.heading-favicon{height:1.5rem;width:1.5rem}}.footer,.main-content{padding-left:1.5rem;padding-right:1.5rem}.main-wrapper{align-items:center;display:flex;flex:1;flex-direction:column}.font-red{color:#b20f03}.spacer{margin:2rem 0}.h1{font-size:2.5rem;font-weight:500;line-height:3.75rem}.h2{font-weight:500}.core-msg,.h2{font-size:1.5rem;line-height:2.25rem}.body-text,.core-msg{font-weight:400}.body-text{font-size:1rem;line-height:1.25rem}@media (width <= 720px){.h1{font-size:1.5rem;line-height:1.75rem}.h2{font-size:1.25rem}.core-msg,.h2{line-height:1.5rem}.core-msg{font-size:1rem}}#challenge-error-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZjNTc0YSIgZD0iTTE2IDNhMTMgMTMgMCAxIDAgMTMgMTNBMTMuMDE1IDEzLjAxNSAwIDAgMCAxNiAzbTAgMjRhMTEgMTEgMCAxIDEgMTEtMTEgMTEuMDEgMTEuMDEgMCAwIDEtMTEgMTEiLz48cGF0aCBmaWxsPSIjZmM1NzRhIiBkPSJNMTcuMDM4IDE4LjYxNUgxNC44N0wxNC41NjMgOS41aDIuNzgzem0tMS4wODQgMS40MjdxLjY2IDAgMS4wNTcuMzg4LjQwNy4zODkuNDA3Ljk5NCAwIC41OTYtLjQwNy45ODQtLjM5Ny4zOS0xLjA1Ny4zODktLjY1IDAtMS4wNTYtLjM4OS0uMzk4LS4zODktLjM5OC0uOTg0IDAtLjU5Ny4zOTgtLjk4NS40MDYtLjM5NyAxLjA1Ni0uMzk3Ii8+PC9zdmc+);padding-left:34px}#challenge-error-text,#challenge-success-text{background-repeat:no-repeat;background-size:contain}#challenge-success-text{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI2IDI2Ij48cGF0aCBmaWxsPSIjMzEzMTMxIiBkPSJNMTMgMGExMyAxMyAwIDEgMCAwIDI2IDEzIDEzIDAgMCAwIDAtMjZtMCAyNGExMSAxMSAwIDEgMSAwLTIyIDExIDExIDAgMCAxIDAgMjIiLz48cGF0aCBmaWxsPSIjMzEzMTMxIiBkPSJtMTAuOTU1IDE2LjA1NS0zLjk1LTQuMTI1LTEuNDQ1IDEuMzg1IDUuMzcgNS42MSA5LjQ5NS05LjYtMS40Mi0xLjQwNXoiLz48L3N2Zz4=);padding-left:42px}.text-center{text-align:center}.pow-button{background-color:#0051c3;border:.063rem solid #0051c3;border-radius:.313rem;color:#fff;font-size:.875rem;line-height:1.313rem;margin:2rem 0;padding:.375rem 1rem;transition-duration:.2s;transition-property:background-color,border-color,color;transition-timing-function:ease}.pow-button:hover{background-color:#003681;border-color:#003681;color:#fff;cursor:pointer}.footer{font-size:.75rem;line-height:1.125rem;margin:0 auto;max-width:60rem;width:100%}.footer-inner{border-top:1px solid #d9d9d9;padding-bottom:1rem;padding-top:1rem}.clearfix:after{clear:both;content:"";display:table}.clearfix .column{float:left;padding-right:1.5rem;width:50%}.diagnostic-wrapper{margin-bottom:.5rem}.footer .ray-id{text-align:center}.footer .ray-id code{font-family:monaco,courier,monospace}.core-msg,.zone-name-title{overflow-wrap:break-word}@media (width <= 720px){.diagnostic-wrapper{display:flex;flex-wrap:wrap;justify-content:center}.clearfix:after{clear:none;content:none;display:initial;text-align:center}.column{padding-bottom:2rem}.clearfix .column{float:none;padding:0;width:auto;word-break:keep-all}.zone-name-title{margin-bottom:1rem}}.loading-spinner{height:76.391px}.lds-ring{display:inline-block;position:relative}.lds-ring,.lds-ring div{height:1.875rem;width:1.875rem}.lds-ring div{animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:.3rem solid transparent;border-radius:50%;border-top-color:#313131;box-sizing:border-box;display:block;position:absolute}.lds-ring div:first-child{animation-delay:-.45s}.lds-ring div:nth-child(2){animation-delay:-.3s}.lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.main-wrapper,body{display:block}}.rtl .heading-favicon{margin-left:.5rem;margin-right:0}.rtl #challenge-success-text{background-position:100%;padding-left:0;padding-right:42px}.rtl #challenge-error-text{background-position:100%;padding-left:0;padding-right:34px}</style><meta http-equiv="refresh" content="375"></head><body class="no-js"><div class="main-wrapper" role="main"><div class="main-content"><noscript><div id="challenge-error-title"><div class="h2"><span id="challenge-error-text">Enable JavaScript and cookies to continue</span></div></div></noscript></div></div><script>(function(){window._cf_chl_opt={cvId: '3',cZone: "services.w3.org",cType: 'managed',cNounce: '59356',cRay: '880c23d73ee50618',cHash: 'd715817c168c47a',cUPMDTk: "\/htmldiff?doc1=https%3A%2F%2Fwhatpr.org%2Fhtml%2F10157%2Ff499167%2Finteractive-elements.html&doc2=https%3A%2F%2Fwhatpr.org%2Fhtml%2F10157%2Finteractive-elements.html&__cf_chl_tk=NplpTXK0.OenFucugBKlxSfPcZpwfWggZcQvcmUUOCU-1715199517-0.0.1.1-2005",cFPWv: 'b',cTTimeMs: '1000',cMTimeMs: '375000',cTplV: 5,cTplB: 'cf',cK: "visitor-time",fa: "\/htmldiff?doc1=https%3A%2F%2Fwhatpr.org%2Fhtml%2F10157%2Ff499167%2Finteractive-elements.html&doc2=https%3A%2F%2Fwhatpr.org%2Fhtml%2F10157%2Finteractive-elements.html&__cf_chl_f_tk=NplpTXK0.OenFucugBKlxSfPcZpwfWggZcQvcmUUOCU-1715199517-0.0.1.1-2005",md: "MKs4Skq0JvbY_UZ9sUcJGrellGjYuvcA7ZNokQNQyB8-1715199517-1.1.1.1-ka1.CEEbIpEdn7XgkmC3oWCMgP27Svci9fR_aE5Uw7nyPbD4nqym6dYJCgDfYhlGKyLsAFFRk37Xn98kpNfpUaz5B5nXIvAHjCmU3IEewzPFFblJw44Z_AoiGmkhrULatGZ0ize.sTUItFRnaxV0Mp9OCjmJgtQayqgFUm4XSHgzjHEuCnNQZTaTgUaLChUW3QauCh1IOJPBARg6mVUUlSz9RCe4BQczlnC2Hee0LY.o2c8RGomgackbHPJbDtel_2F643mdIjRNk9xy67VojlAAF17K4MCKPHhmLQH5epPNaU1l.9uR6.pwrVYIEqawmI5WGxCxtM6bcrRIdHh0UfMCXXq8RyX8frHitYxD_LT8YIVdst0nzfPYXZOLPvw2XPqZma.bL5BLy2jwhOKVUauny3K5aB7D.UzT9YjE.MZOYD7brguzt.PDTbnYxgokDqKiEffU8D.I2fzJCAXjo_DXmh5jfmWXmJkHQh3kBrkEsZhZGUTu1o0SSVkkO0YgE0wbiq.99IHCOOnmPuj9BiK6wFvgQV8obRkfQzyDdXBH6R3Wtpl2MUPGedQuLtAu.qiHNiJtc7cUG5bmvYuX.u8XQWfnzPP1Dp6WOkG7_cxeirfLjl4R.w1ZB27lTeE6MBQunRqyxhs6xkc6Myh6tC.inMxrqVbZM8Tofb_1Gnisx3Z0QOURRueISwX7FXHM9C6y23c_lMpsXFkonraTQQ2Zaub49VI4e9tKi.4sJDvuSqB8vtykRIIROObn2CsYqkLzZPd4jRScN5GXyU_nOeLeGzFT3iWEluqqgkAjDk1712Zc0zoQKTVU75kgyzL8uf2ddjXzANYtqFaHJjjuJJknfLVAYsjt.9UqU.ATBz6JkUJaE.eslR2_HPZxLmEdKktLGXbN6ilMRUNONOUFStmQ_mNi2g3itd4RZWII0xYC4QE266uBUSUfWYOtLKhpJ93Q06XpOYRi9WPgf8HRAbOcC8wCKMb7l1ZmXu5_hqyy0q5cqhFtZ.gIb4ilU_3HUxMKsVUcadlkJUvczwwAzvz4V18KYEMVUtiAdqimx7eRI_zTfQiYs_8s7PSmzyyMbqKKcs7lDlXpfQ0ADJWGkPQkZl4y.dO8ItRsUoxCQjq9RVSVQLchHytdPVx0w5rNFnDoUzs9Ixc68QoIMEgeeK7tZxHu5Xt5JvoTO_uBBZNw8KmSPpuT7l7RFoDBhb2V2HXfr0_CIfUTPUOUfYETGvfj.Q.y2wEt14vai4UDqYVG2l9mVHGVlraxuLZXEu8X.zgGb03GhkkymzAaIPOkNCl7.Qf9ac.jG.SnaHjgzykDD2nolc1E9cD3.zrfc5AQjw5gnPhKfMdKdSefuZGgAxR4E7vw6ehXuB2KopxP26XPei27KSancVq7rIob5b..q6T_WsXy2rKIbNv.hZ4rqOA_wQGQAQlwRKNi2M6.RZZEUTY0s37a.G0l2iofQrl1p8ACtprYgK5Nse7SGnipFhenlr4J0FzMV0yK0bLYAcJWN8.uvFFY8tl98oWT1B5vYpunC3sgunPUg30VXaFUXPactk8M1HISJ8tBmzsgXCuiz7hiOxkcZzv6tdd35q2Mhp2aPYLjdmjkwf7bhGL96C_TkKRPFPbqVnFr6SvI2j5BRkbUS5XE3ELAJVDcRbyTa5qkmggybf79bUuRMepZCf5PSuCdqeIZ.wZWZHOla9PLk3hbO_hFFZZcbYOUwy7qvu_P2VJuDm8UpdH4KJ_ZY9rydJ_aufZSzZ5v3.ZwdVRZTqPu7gvUNJ8LDOHju5xKU59U98MbXOwBsvAxLK8YtP5JymzsHUZPoshI9kW4DrcVjYhzdzzYvWtU2mNlKrxl1ZV___KDliG0ZQHn0SdBkF1VKAV4tj9WbUPKWCY8g.vJvFOlEM9QPu6n47aUQLZTeLW4y5LCnzH._93AkLtLew",mdrd: "IcEbTUQak.3hGPemFmztEEeHz7HYJsrnC2aM9jmRElc-1715199517-1.1.1.1-W1ElFzDbd.l6qXvYwM8UBfM7VsRJDvl1MlzDXqwOei.h2TUOCCLMBmo9iSc3ETW3zJ1sKd2Di2LXO1z2wbMWDrulIPdsryNTQw3AsESbJVYEpfOICiJ00yglQ.MI.Hdqex8.1z6CCwvecBL_RRRWf1uZhFv20JmhsVLlGKxcgR_5conkXld5MhV8RXhZ0fiU7KbqWsAgnL3ez1gxP9uXybivTwzTwKQl9n0_dxbDhgBt0BFeTi5FxWU2o41bHbSF5WO974IEANXPlS56TGXqJJGeZE1yumyJSU3g3VNEWOZxppk0RnWmjWta1YY8OrQjkvkHNh3AelShBTwM.HJA5ojLYSYcOJX5CM6RyWMlp7uqH1elSPY6GqlG4HaWEUf5TgyUHTUYmzGzM6Fa..H_9IRTSHNDQfbkbVhx_N4zKfZtiTaOQMRx9hoDnZQukmERvE1SEi2ehGh2Ra5Sd4fu.cBcHXVFltBLqEgdbcfG51sX6ArvRPtQj16oAU9wQqKC0vNUR4ilpBWXeaJGKVYMBOdJ7ZsB3PsAk2keCulONfGHEqXGx7_VY8DdnlrTSOrMnQ8EVvRpLpn1CW3wh5_VtXfBRmpxkdCNo9VsVcRX7kKdkPeTQl7zG5_9uVr.KG_hH87KJ2iU9i8ztOkXxiuzf1zDL1fGhFlzZnDIjuWT6r_Elw5z9YroSTtJrtf2XtUeoAeQMAUIY269qPLXz8AAleFvbmU1kVcsni9sEUwWRNtxwsKdwzG_JNHN_TN9FumdF0lYh4p2vICD6zNbJUvwNQofSPCHzdkKyD2g7e3BDsrSN3nr.odkVTJsFZg7jvimigB0qOV6RxAu.2Wi0SLE_Ex7ubAiaT28iFUfEVjZG.kS69YiqnuLUKKAUNbvfsqvM0FZOe.PqBuZq5knvHF3dlofcxWEThc3fBVtw7sy5DMALm4Kajg3.JPli3aqOSFSR9qq7hLoHINRuYruMagnGXNtj_YVhgQRLMjuZP0l5rOknQ8DCRnFjKdkq0uTIfgXADrU_RIelw.zS5R_fxw4_.txpLrY.5Pp2rg5MuCB3FW80uo7QIDEzdAhmIC8Ne2vZqPNU9YgSOjh6eINkq4ZSljX3vxADY7ZruHbBezwSHbgW0S.kWIY0Qwz9T6C.mUCjP6M7zBJDs.wbX9l90CfPJXya52AbX_0rnvEQ6rxqGBv6SJZRx7O_MpLuHrZPG0qgRIbV1AcsRmvGBISKnKQvqE4ihyYDm.oAvNY9u8TuJSlH_CuWrD1kl9TYwrXkJKa7E09IH.R1rCfW3lWJGESyDDKmmVRKwNWwDOeMXLoIWAw4YU7n9NWTrdORzUizmhN068dz4IFtnMBT7H56iibMY4ckuOMCcw9gMqz.gTTYNJ.2HndUw5GemFCdOfqzJU6ioHChqWMiOSetZXslZzZB26VYMEF82inXzSaezuJKxJiBVrrY0K2IPdYBi0tL66STA1WhWqa80BFL9Z1MyJsXHiptzZU0GpV_Te6Y39yfGxXI1dzFq2SaauR0YsslyP_87VqJwkqyJ7QWosXlF.jcJD5s0X7RjvArt66dl_9EnC8yBe1nmk14LMTHc_IAo5DTYiJFH9nSgOULuwag2noznnXTjNoHvPkvirbQbml9PtVGzuUN0dRdDMXah3.y7dEWaYeRi8JeanxNnX4f4GvCxeJBWIpSYdKwiSpv1GGoZQ5ObrWPkmarFC81FVcpYNeQxyMOz.JJodhqZTrMFb9JN7qzUzteNeHP5mLiik6hz2Jl.lTFEyxal2zt4NwMk7RAH4d6.OMplVBc7nnsrY8YIS7rnjjb2SoW5pw1u1v5sl8I_crd8xKgA7Y2Aiq7wQxAWOpYLVEm6eY8_VcTwkCGbkXDwHkvH6rr7t6UBgnx0fB_7Q_J_2g.zCpIqWeBi5UKTtNgL60wrZxJCpuy2BlnTSWuz8vPWqCJR5UBofvUogeAi2dGu4h9pRC4J9NorHxTMoMxwWY7m8bnNCkhX4fnJhdA03GIv1AAyvU4raNOtan_qp0Vx6azmsf_25AxtknGgaOon0u3G1irdi2swQtdub3af0fRKt7qRc9kc2_BgczUbnvezJM1kC0Ry0BN7ZOYs9EHZZMDbdZmUeyWyEnjGUgcDRSYXfa5gZAm30MblNwMHkyH2ScgEfJeoA_4rSsPf6k_rXwuVaUo.fD1aQbS8XowzOzsbhObwHezvxic4AAefKimGmIHUz85IG6DtCyHyzPLhZid5ytI_x4P7EzLQo6htMHX494xtlbC3nDWOqfVQH8E05dOiSjLoUXiMcGDynjTNqbmvhIPaVkynDktCeg9lQ6K.ynSb3aKG9ANCmWjhZjB9q_z0YOXax7LKZelD7zWVk5PbJDVnT_m3Fi_2TILN4qrLVvlTJrkZy4sbX1.kX.DM68MBGHNABhIET8xn_1ymp9YoZf_c6pz3yYo0F5ZxapTVLRO0COwRebfssSNbrQniJEOUrp0LJRSfuvJhd3SYq2GH2KwQDxjG0oKn1zrjLSJIPfG.RB2SXyrxU",cRq: {ru: 'aHR0cHM6Ly9zZXJ2aWNlcy53My5vcmcvaHRtbGRpZmY/ZG9jMT1odHRwcyUzQSUyRiUyRndoYXRwci5vcmclMkZodG1sJTJGMTAxNTclMkZmNDk5MTY3JTJGaW50ZXJhY3RpdmUtZWxlbWVudHMuaHRtbCZkb2MyPWh0dHBzJTNBJTJGJTJGd2hhdHByLm9yZyUyRmh0bWwlMkYxMDE1NyUyRmludGVyYWN0aXZlLWVsZW1lbnRzLmh0bWw=',ra: 'cHItcHJldmlldw==',rm: 'R0VU',d: '52RVdHtOyutYPcujgC6XKdR993B+wDsQsnqXKMcCTq+1BLgn5FNwJbs8DNLbhuXlK92Gazb0zsNaA1jy3sYyIjul26XNgAfq/ecwAgtJzqrqtsV47frz8xNa2ZZqpS5OABderFFlwnoE06CPEKZYVq8YoafEoPPe6+FMmh5F3V+btcGkZ7efSDUBoiOnPx3Q30lC8JWSY6cMASs2E3ef/qM0n2E1ARR8HF/XgSj28UppYyE92ST7Rgn87O1SnQ5xphaiKaHayvOvN/mRQoUwFkj3fdhUIRyimtmq0553NRQTv0I4flLHJJCppYqRA4YbTv7b6LgA+iG9XDfyG18jqog0e6nQEwJYFNUAiid6ckTPJ2L+dYkQLCoqRNmu8pgWQFbRhVQvUd3GFF7sklSQpwpsR+GZEbYMSfjxzTRtSgP9j/03+H7wYkgZCkA2RSha5+QgcTqmyAbtfrybQEusWjMHElZZ8Dj+wgRM22kd6EJ/8Iq4kRNF/4LCPtn48FDn0IojxxdN5YNHSMuObmUPwUSWwzFFSF9knCu4ypi1En4fRD8EqObIIG7arFwRjkNjAcrdhoKtu+ASrqu+WhaqMA==',t: 'MTcxNTE5OTUxNy4zMjQwMDA=',cT: Math.floor(Date.now() / 1000),m: 'RnJTAYT2za8AlOvvTzestgPJUxQewkorWhWNCrlOHF0=',i1: 'p4gcorYRoYpRMf+/8mMBwg==',i2: 'yGvCurf+9GxJGomIHRh9ew==',zh: 'gvqBexlHwYqbPdEKVOESB26WtJhepk3u30GnpcBsnIA=',uh: 's+AnNBlTs9nVVi+ohfmLEzstXwnj2u/PnHISVVjgyos=',hh: 'kSjHB2LsEQAjilyKtGYkb5IrGAp4MXsXWa6wsS3D2kM=',}};var cpo = document.createElement('script');cpo.src = '/cdn-cgi/challenge-platform/h/b/orchestrate/chl_page/v1?ray=880c23d73ee50618';window._cf_chl_opt.cOgUHash = location.hash === '' && location.href.indexOf('#') !== -1 ? '#' : location.hash;window._cf_chl_opt.cOgUQuery = location.search === '' && location.href.slice(0, location.href.length - window._cf_chl_opt.cOgUHash.length).indexOf('?') !== -1 ? '?' : location.search;if (window.history && window.history.replaceState) {var ogU = location.pathname + window._cf_chl_opt.cOgUQuery + window._cf_chl_opt.cOgUHash;history.replaceState(null, null, "\/htmldiff?doc1=https%3A%2F%2Fwhatpr.org%2Fhtml%2F10157%2Ff499167%2Finteractive-elements.html&doc2=https%3A%2F%2Fwhatpr.org%2Fhtml%2F10157%2Finteractive-elements.html&__cf_chl_rt_tk=NplpTXK0.OenFucugBKlxSfPcZpwfWggZcQvcmUUOCU-1715199517-0.0.1.1-2005" + window._cf_chl_opt.cOgUHash);cpo.onload = function() {history.replaceState(null, null, ogU);}}document.getElementsByTagName('head')[0].appendChild(cpo);}());</script></body></html>

If you don't have enough information above to solve the error by yourself (or to understand to which web service the error is related to, if any), please file an issue.

source Outdated
data-x="event-cancel">cancel</code> at <span>this</span>, with the <code
data-x="dom-Event-cancelable">cancelable</code> attribute initialized to true.</p></li>

<li><p><i data-x="create-close-watcher-closeAction">closeAction</i> being to <span>close the
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps rather than conditionally applying the close watcher we could just adjust the close and cancel actions dynamically based on the closedby attribute value? This way they'd keep their user activation flags and order in stack would be what's expected?

This would require changing close watchers to treat null actions as effectively destroyed for the purposes of consuming? COuld also get confusing if the user deletes down the stack past where this active but empty watcher is?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we have to do something like this. #9373 (comment) was my idea but using null cancel/close actions instead of a separate boolean might work as well.

source Outdated
<li><p>If <var>oldValue</var> and <var>value</var> are in the same
<span data-x="attr-dialog-closedby">state</span>, then return.</p></li>

<li><p>If <var>value</var> is <span data-x="attr-closedby-none">none</span> then:</p></li>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to add more steps dictating exactly what to do with the various oldValue vs value combinations.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess one option is like popover to just close a dialog if you dynamically update this attribute while it's open?

source Outdated Show resolved Hide resolved
@lukewarlow lukewarlow force-pushed the closetrigger-dialog branch 3 times, most recently from dfbe28a to a5df507 Compare February 24, 2024 01:32
</ol>

<p class="XXX"><span>Light dismiss open dialogs</span> will be called by the <a
href="https://github.com/w3c/pointerevents">Pointer Events spec</a> when the user clicks
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to make a PR for this spec like the popover one to call this function.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be best to have a single hook from pointer events into HTML, I think. So we should either combine this with light dismiss open popovers or create a wrapper algorithm around both of them.

@lukewarlow lukewarlow marked this pull request as ready for review February 24, 2024 01:43
@lukewarlow lukewarlow marked this pull request as draft February 24, 2024 01:44
@lukewarlow
Copy link
Member Author

Not sure why but the diff link is outdated


<li><p>If <var>clickedTopDialog</var>, then return.</p></li>

<li><p>Perform <span>close the dialog</span> given <var>topDialog</var>.</p></li>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to close the dialog here or do we actually want to do cancel and close (aka requestClose())?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes sense to fire cancel and then fire close as a follow up if not cancelled?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

openui/open-ui#950 (reply in thread) - Based on this comment, I need to change this to be cancel + close not just close.

Copy link
Member

@domenic domenic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Started with editorial review, but then realized that wasn't as helpful at this stage...

source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
</ol>

<p class="XXX"><span>Light dismiss open dialogs</span> will be called by the <a
href="https://github.com/w3c/pointerevents">Pointer Events spec</a> when the user clicks
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be best to have a single hook from pointer events into HTML, I think. So we should either combine this with light dismiss open popovers or create a wrapper algorithm around both of them.

source Outdated
<p>The following <span data-x="concept-element-attributes-change-ext">attribute change
steps</span>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
<var>value</var>, and <var>namespace</var>, are used for <span data-x="HTMLDialogElement">HTML
dialog elements</span>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This approach seems busted as the close watcher will be in the wrong place in the stack. The dialog will visually stay below any others, but behaviorally will move to the top of the close watcher stack. The user will be very confused.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that was my gut feeling too. Thought I'd go ahead and write a rough spec though to have some of these weird edge cases in our minds when we discuss in whatnot.

source Outdated
@@ -61264,6 +61328,48 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Set <var>topDocument</var>'s <span>autofocus processed flag</span> to true.</p></li>
</ol>

<p>To get the <dfn id="any-dialog-list">showing any dialog list</dfn> for a
<code>Document</code> <var>document</var>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All these light dismiss-only helpers should move into the dialog light dismiss section.

source Outdated
data-x="event-cancel">cancel</code> at <span>this</span>, with the <code
data-x="dom-Event-cancelable">cancelable</code> attribute initialized to true.</p></li>

<li><p><i data-x="create-close-watcher-closeAction">closeAction</i> being to <span>close the
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we have to do something like this. #9373 (comment) was my idea but using null cancel/close actions instead of a separate boolean might work as well.

@lukewarlow
Copy link
Member Author

Sorry for the delays on this, I wanted to wait till close watcher spec was a bit more settled. Now that the basic machinery is pretty stable I'm going to pick this back up and try and get a draft of this where the attribute updates dynamically and does the right thing.

@@ -82286,7 +82500,8 @@ body { display:none }
in reverse order:</p>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The groups not empty check should probably be a check that there's a group with an enabled close watcher in?

And <var>group</var> needs to be the last group with an enabled close watcher in

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

Successfully merging this pull request may close these issues.

Add light dismiss functionality to <dialog>
2 participants