Skip to content

Instantly share code, notes, and snippets.

@tomsontom

tomsontom/dialog.html

Last active April 3, 2024 10:55
Show Gist options
  • Save tomsontom/96fcb7674d1473379d4adde50cb97a32 to your computer and use it in GitHub Desktop.
Save tomsontom/96fcb7674d1473379d4adde50cb97a32 to your computer and use it in GitHub Desktop.
Download ZIP
Scrollbars inside Dialogs remove focus
Raw
dialog.html
<html>
<head>
<title>Overflow Page vs Overflow Dialog</title>
<style>
.scroll-container {
max-height: 200px;
max-width: 200px;
min-width: 200px;
padding: 10px;
background-color: red;
overflow: scroll;
}
.focus-owner {
height: 300px;
width: 50px;
background-color: yellow;
}
.focus-owner:focus {
background-color: green;
}
</style>
</head>
<body>
<button
type="button"
onclick="document.getElementById('my-dialog').showModal()"
>
Open Dialog
</button>
<div class="scroll-container">
<button
type="button"
class="focus-owner"
onblur="console.log('Page Blur', event.relatedTarget)"
onfocus="console.log('Page Focus', event.relatedTarget)"
>
Test
</button>
</div>
<dialog id="my-dialog">
<h1>Dialog</h1>
<div class="scroll-container">
<button
type="button"
class="focus-owner"
onblur="console.log('Dialog Blur', event.relatedTarget)"
onfocus="console.log('Dialog Focus', event.relatedTarget)"
>
Test
</button>
</div>
</dialog>
</body>
</html>
@tomsontom
Copy link
Author

Chrome and Firefox breaks with a well known focus behavior when you use scrollabl content inside your <dialog>.

Try the following:

  • Open Page
  • Move Focus to Yellow Rect (it turns green)
  • Use the scrollbar
    You should have noticed that the rect still has focus, which is what i expect i just scrolled.

In contrast now open the dialog using the button and repeat the above steps and you'll notice that the focus is removed from the element (and if you look at the log you see it got move to the dialog).

This means as of today it is impossible to implement things like Pickers, ComboBoxes, ... because whenever the uses the scrollbar the focus gets pushed to the dialog-element.

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