Skip to content

chore: polish article and update example #3235

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore: polish article and update example #3235

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions knowledge-base/dialog-close-on-esc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ This knowledge base article answers to the following questions:

* How to make Dialog responsive to keyboard events when content is clicked?
* Why doesn't ESC key work after clicking inside Dialog content?
* How can I make the Dialog close with the ESC key after the title has been clicked?
* How to maintain keyboard functionality in Dialog after focus changes?

When you click or focus inside the Dialog content area, the focus moves away from the Dialog component. As a result, the Dialog does not receive keyboard events, and pressing the `ESC` key does not close it. This behavior occurs because the keydown events are not invoked for the Dialog when the focus is on another element or the body tag.
Expand All @@ -28,8 +29,13 @@ To ensure the Dialog closes on `ESC` even after focusing the content, wrap the D
Width="500px"
Height="300px"
Class="focusable-content">
<DialogTitle>
<div tabindex="0" class="dialog-wrapper">
Copy link
Contributor

@dimodi dimodi Sep 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

You can also consider tabindex -1 if you want the element to be focusable with a click, but not take part in the tab navigation.

Focusable Title
</div>
</DialogTitle>
<DialogContent>
<div tabindex="0" class="dialog-content-wrapper">
<div tabindex="0" class="dialog-wrapper">
<p>Click anywhere in this content area, then press ESC to close the dialog.</p>
</div>
</DialogContent>
Expand All @@ -46,8 +52,19 @@ To ensure the Dialog closes on `ESC` even after focusing the content, wrap the D
padding: 0;
}

/* Remove default Dialog title padding to let wrapper handle it */
.focusable-content .k-dialog-titlebar {
padding: 0;
}

/* Focusable wrapper that fills the entire Dialog title area */
.focusable-content .k-dialog-titlebar-actions {
padding-block: var(--kendo-spacing-3, 0.75rem);
padding-inline: var(--kendo-spacing-4, 1rem);
}

/* Focusable wrapper that fills the entire Dialog content area */
.focusable-content .dialog-content-wrapper {
.focusable-content .dialog-wrapper {
padding: 1rem;
outline: none;
height: 100%;
Expand All @@ -56,9 +73,9 @@ To ensure the Dialog closes on `ESC` even after focusing the content, wrap the D
}

/* Optional visual indication when the wrapper is focused */
.focusable-content .dialog-content-wrapper:focus-within {
/* .focusable-content .dialog-wrapper:focus-within {
background-color: rgba(0, 123, 255, 0.05);
}
} */
</style>

@code {
Expand Down