From 6d42f64b147e7b4ae0c3278afe676f06f8228030 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 1 Sep 2025 18:36:46 +0300 Subject: [PATCH 1/5] chore(Dialog): add kb for focusable content --- knowledge-base/dialog-close-on-esc.md | 78 +++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 knowledge-base/dialog-close-on-esc.md diff --git a/knowledge-base/dialog-close-on-esc.md b/knowledge-base/dialog-close-on-esc.md new file mode 100644 index 000000000..1d106930a --- /dev/null +++ b/knowledge-base/dialog-close-on-esc.md @@ -0,0 +1,78 @@ +--- +title: How to Close the Dialog on ESC When its Content is Focused +description: Learn how to enable closing the Dialog on ESC key after focusing the content by adding a focusable wrapper. +type: how-to +page_title: How to Close the Dialog on ESC When its Content is Focused +tags: Dialog, ESC, Keyboard, Focus +slug: dialog-kb-close-on-esc +--- + +## Description + +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 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. + +## Solution + +To ensure the Dialog closes on `ESC` even after focusing the content, wrap the Dialog content in a `div` with `tabindex="0"`. This makes the content wrapper focusable and allows keyboard events to be captured. Add custom styling to handle the focus state and preserve the existing content padding. + +>caption Example of Implementing a Focusable Wrapper with Visual Indication + +````RAZOR + + +
+

Click anywhere in this content area, then press ESC to close the dialog.

+
+ + + Close + + + +Open Dialog + + + +@code { + private bool DialogVisible { get; set; } + private string SampleText { get; set; } = string.Empty; + + private void OpenDialog() + { + DialogVisible = true; + } + + private void CloseDialog() + { + DialogVisible = false; + } +} +```` From 05c87ecfadf7d9f2b6db3a2a0f1db7714ba7c04e Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 2 Sep 2025 14:19:31 +0300 Subject: [PATCH 2/5] Update knowledge-base/dialog-close-on-esc.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/dialog-close-on-esc.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/dialog-close-on-esc.md b/knowledge-base/dialog-close-on-esc.md index 1d106930a..8ddcd52e7 100644 --- a/knowledge-base/dialog-close-on-esc.md +++ b/knowledge-base/dialog-close-on-esc.md @@ -3,7 +3,7 @@ title: How to Close the Dialog on ESC When its Content is Focused description: Learn how to enable closing the Dialog on ESC key after focusing the content by adding a focusable wrapper. type: how-to page_title: How to Close the Dialog on ESC When its Content is Focused -tags: Dialog, ESC, Keyboard, Focus +tags: blazor, dialog, keyboard slug: dialog-kb-close-on-esc --- From 2075637fd76fb5368cc7cfa91a0a11a304ce7555 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 2 Sep 2025 14:19:37 +0300 Subject: [PATCH 3/5] Update knowledge-base/dialog-close-on-esc.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/dialog-close-on-esc.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/dialog-close-on-esc.md b/knowledge-base/dialog-close-on-esc.md index 8ddcd52e7..db81f1413 100644 --- a/knowledge-base/dialog-close-on-esc.md +++ b/knowledge-base/dialog-close-on-esc.md @@ -56,7 +56,7 @@ To ensure the Dialog closes on `ESC` even after focusing the content, wrap the D } /* Visual indication when the wrapper is focused */ - .focusable-content .dialog-content-wrapper:focus { + .focusable-content .dialog-content-wrapper:focus-within { background-color: rgba(0, 123, 255, 0.05); } From f269698c647d83591f368a3d2c0a9ba574e937ef Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 2 Sep 2025 14:19:44 +0300 Subject: [PATCH 4/5] Update knowledge-base/dialog-close-on-esc.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/dialog-close-on-esc.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/dialog-close-on-esc.md b/knowledge-base/dialog-close-on-esc.md index db81f1413..304d8e7d7 100644 --- a/knowledge-base/dialog-close-on-esc.md +++ b/knowledge-base/dialog-close-on-esc.md @@ -55,7 +55,7 @@ To ensure the Dialog closes on `ESC` even after focusing the content, wrap the D transition: background-color 0.2s ease; } - /* Visual indication when the wrapper is focused */ + /* Optional visual indication when the wrapper is focused */ .focusable-content .dialog-content-wrapper:focus-within { background-color: rgba(0, 123, 255, 0.05); } From 948fce0383e8d6d4fa0aac919fb34b39119c2d98 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 2 Sep 2025 14:20:08 +0300 Subject: [PATCH 5/5] Update knowledge-base/dialog-close-on-esc.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/dialog-close-on-esc.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/dialog-close-on-esc.md b/knowledge-base/dialog-close-on-esc.md index 304d8e7d7..a3e87e25b 100644 --- a/knowledge-base/dialog-close-on-esc.md +++ b/knowledge-base/dialog-close-on-esc.md @@ -62,7 +62,7 @@ To ensure the Dialog closes on `ESC` even after focusing the content, wrap the D @code { - private bool DialogVisible { get; set; } + private bool DialogVisible { get; set; } = true; private string SampleText { get; set; } = string.Empty; private void OpenDialog()