From 8f5555ea2b30e554bbbcba668fb64d08e355db0a Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 23 Jul 2024 11:33:58 +0300 Subject: [PATCH 1/7] kb(window): Add KB for focus on open --- .../window-focus-button-textbox-on-open.md | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 knowledge-base/window-focus-button-textbox-on-open.md diff --git a/knowledge-base/window-focus-button-textbox-on-open.md b/knowledge-base/window-focus-button-textbox-on-open.md new file mode 100644 index 000000000..0aa8d0439 --- /dev/null +++ b/knowledge-base/window-focus-button-textbox-on-open.md @@ -0,0 +1,94 @@ +--- +title: Focus Button or TextBox on Window Open +description: Learn how to focus a button, textbox, or any component when the Telerik Window for Blazor opens. +type: how-to +page_title: How to Focus Button or TextBox on Window Open +slug: window-kb-focus-button +position: +tags: telerik, blazor, window, dialog +ticketid: 1659021 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductWindow for Blazor,
Dialog for Blazor
+ +## Description + +This KB article answers the following questions: + +* How to set default focus to a Button in a TelerikWindow? +* How to focus a button or a textbox inside a Window when the Window is made visible? +* How to focus a component when the Window shows? + + +## Solution + +To focus any element or component in the [Telerik Window for Blazor]({%slug dialog-overview%}), follow the steps below. They are also applicable for the [Telerik Dialog component]({%slug dialog-overview%}). + +1. Raise a `bool` flag when showing the Window. +1. Check the boolean flag's value in `OnAfterRenderAsync()`. +1. Use a small `Task.Delay()` to wait for the Window to display and gain focus. +1. Focus the desired button, textbox, or input component. If it's a Telerik Blazor component, use the [`FocusAsync()` method]({%slug inputs-kb-focus%}). + + +````CSHTML +Show Window + + + + + + + Window Title + + + Click Me +
+ @(DateTime.Now.ToString("HH:mm:ss")).@DateTime.Now.Millisecond + + + +@code { + private TelerikButton? ButtonRef { get; set; } + + private bool WindowVisible { get; set; } + + private bool ShouldFocusButton { get; set; } + + private void ShowWindow() + { + WindowVisible = true; + ShouldFocusButton = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (ShouldFocusButton && ButtonRef != null) + { + ShouldFocusButton = false; + // Wait for the Window to gain focus and then steal it + await Task.Delay(200); + await ButtonRef.FocusAsync(); + } + + await base.OnAfterRenderAsync(firstRender); + } +} +```` + + +## See Also + +* [Window Overview]({%slug window-overview%}) +* [Focus Telerik Input Components]({%slug inputs-kb-focus%}) From e1fe6a805c7a58205e02c9815f5fda99f7919a89 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 23 Jul 2024 13:41:39 +0300 Subject: [PATCH 2/7] docs(dialog|window): Add KB for focus on open --- components/dialog/events.md | 7 +- components/window/events.md | 2 + .../window-focus-button-textbox-on-open.md | 71 +++++++++++++++---- 3 files changed, 66 insertions(+), 14 deletions(-) diff --git a/components/dialog/events.md b/components/dialog/events.md index ae5bd63da..992b4b3df 100644 --- a/components/dialog/events.md +++ b/components/dialog/events.md @@ -103,4 +103,9 @@ You can use the `VisibleChanged` event to get notifications when the user tries } } -```` \ No newline at end of file +```` + + +## See Also + +* [Focus TextBox on Dialog Open]({%slug window-kb-focus-button-textbox-on-open%}) diff --git a/components/window/events.md b/components/window/events.md index f92b6d5e5..8cd4b2903 100644 --- a/components/window/events.md +++ b/components/window/events.md @@ -18,6 +18,7 @@ This article explains the events available in the Telerik Window for Blazor: * [WidthChanged and HeightChanged](#widthchanged-and-heightchanged) * [Action Click](#action-click) * [LeftChanged and TopChanged](#leftchanged-and-topchanged) + @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) @@ -271,3 +272,4 @@ The `LeftChanged` event fires second, so if you intend to store locations in an * [Window Overview]({%slug window-overview%}) * [Window State]({%slug components/window/size%}) * [Window Actions]({%slug components/window/actions%}) +* [Focus TextBox on Window Open]({%slug window-kb-focus-button-textbox-on-open%}) diff --git a/knowledge-base/window-focus-button-textbox-on-open.md b/knowledge-base/window-focus-button-textbox-on-open.md index 0aa8d0439..ff05aaddb 100644 --- a/knowledge-base/window-focus-button-textbox-on-open.md +++ b/knowledge-base/window-focus-button-textbox-on-open.md @@ -1,12 +1,12 @@ --- title: Focus Button or TextBox on Window Open -description: Learn how to focus a button, textbox, or any component when the Telerik Window for Blazor opens. +description: Learn how to focus a button, input, textbox, or any component when the Telerik Window for Blazor opens. type: how-to page_title: How to Focus Button or TextBox on Window Open -slug: window-kb-focus-button +slug: window-kb-focus-button-textbox-on-open position: tags: telerik, blazor, window, dialog -ticketid: 1659021 +ticketid: 1486212, 1513605, 1610413, 1659021 res_type: kb --- @@ -16,32 +16,37 @@ res_type: kb Product - Window for Blazor,
Dialog for Blazor + Dialog for Blazor,
Window for Blazor + ## Description This KB article answers the following questions: -* How to set default focus to a Button in a TelerikWindow? +* How to set default focus to a TextBox or a Button in a TelerikWindow? * How to focus a button or a textbox inside a Window when the Window is made visible? -* How to focus a component when the Window shows? +* How to focus a component after the Window opens? The JavaScript call is made before the Window actually shows, so the focusable element is `null`. +* How do you set focus on an input element in a Window, so that the user doesn't have to use their mouse? ## Solution To focus any element or component in the [Telerik Window for Blazor]({%slug dialog-overview%}), follow the steps below. They are also applicable for the [Telerik Dialog component]({%slug dialog-overview%}). +1. If the goal is to focus a Telerik Blazor component, [set the `@ref` attribute to obtain the component's reference]({%slug components/textbox/overview%}#textbox-reference-and-methods). 1. Raise a `bool` flag when showing the Window. 1. Check the boolean flag's value in `OnAfterRenderAsync()`. -1. Use a small `Task.Delay()` to wait for the Window to display and gain focus. +1. Use a small `Task.Delay()` to wait for the Window to display and gain focus. Without a delay, the focusable component will either no exist yet, or the Window will steal the focus. 1. Focus the desired button, textbox, or input component. If it's a Telerik Blazor component, use the [`FocusAsync()` method]({%slug inputs-kb-focus%}). +>caption Focus a component on Dialog or Window open ````CSHTML -Show Window +Show Window and Focus Button +Show Dialog and Focus TextBox @@ -49,22 +54,40 @@ To focus any element or component in the [Telerik Window for Blazor]({%slug dial - Window Title + Window +

This Button is now focused:

Click Me -
- @(DateTime.Now.ToString("HH:mm:ss")).@DateTime.Now.Millisecond + OnClick="@OnWindowButtonClick"> + Click Me + +

StringValue: @StringValue

 + + + + + + Close + + + @code { private TelerikButton? ButtonRef { get; set; } + private TelerikTextBox? TextBoxRef { get; set; } + + private string StringValue { get; set; } = string.Empty; private bool WindowVisible { get; set; } + private bool DialogVisible { get; set; } private bool ShouldFocusButton { get; set; } + private bool ShouldFocusTextBox { get; set; } private void ShowWindow() { @@ -72,16 +95,37 @@ To focus any element or component in the [Telerik Window for Blazor]({%slug dial ShouldFocusButton = true; } + private void ShowDialog() + { + StringValue = string.Empty; + DialogVisible = true; + ShouldFocusTextBox = true; + } + + private void OnWindowButtonClick() + { + var now = DateTime.Now; + StringValue = $"{now.ToString("HH:mm:ss")}.{now.Millisecond}"; + } + protected override async Task OnAfterRenderAsync(bool firstRender) { if (ShouldFocusButton && ButtonRef != null) { ShouldFocusButton = false; - // Wait for the Window to gain focus and then steal it + // Wait for the Window to render and gain focus. await Task.Delay(200); await ButtonRef.FocusAsync(); } + if (ShouldFocusTextBox && TextBoxRef != null) + { + ShouldFocusTextBox = false; + // Wait for the Dialog to render and gain focus. + await Task.Delay(200); + await TextBoxRef.FocusAsync(); + } + await base.OnAfterRenderAsync(firstRender); } } @@ -90,5 +134,6 @@ To focus any element or component in the [Telerik Window for Blazor]({%slug dial ## See Also +* [Dialog Overview]({%slug dialog-overview%}) * [Window Overview]({%slug window-overview%}) * [Focus Telerik Input Components]({%slug inputs-kb-focus%}) From 1e7bea6a51c9c3fe7feb20c316089a2409d156a8 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:52:14 +0300 Subject: [PATCH 3/7] Update knowledge-base/window-focus-button-textbox-on-open.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/window-focus-button-textbox-on-open.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/window-focus-button-textbox-on-open.md b/knowledge-base/window-focus-button-textbox-on-open.md index ff05aaddb..925757400 100644 --- a/knowledge-base/window-focus-button-textbox-on-open.md +++ b/knowledge-base/window-focus-button-textbox-on-open.md @@ -34,7 +34,7 @@ This KB article answers the following questions: ## Solution -To focus any element or component in the [Telerik Window for Blazor]({%slug dialog-overview%}), follow the steps below. They are also applicable for the [Telerik Dialog component]({%slug dialog-overview%}). +To focus any element or component in the [Telerik UI Window for Blazor]({%slug dialog-overview%}), follow the steps below. They are also applicable for the [Dialog component]({%slug dialog-overview%}). 1. If the goal is to focus a Telerik Blazor component, [set the `@ref` attribute to obtain the component's reference]({%slug components/textbox/overview%}#textbox-reference-and-methods). 1. Raise a `bool` flag when showing the Window. From 7a67aea1d9f16889896302de023b884b719bb3d3 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:52:30 +0300 Subject: [PATCH 4/7] Update knowledge-base/window-focus-button-textbox-on-open.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/window-focus-button-textbox-on-open.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/window-focus-button-textbox-on-open.md b/knowledge-base/window-focus-button-textbox-on-open.md index 925757400..7c6ce41df 100644 --- a/knowledge-base/window-focus-button-textbox-on-open.md +++ b/knowledge-base/window-focus-button-textbox-on-open.md @@ -36,7 +36,7 @@ This KB article answers the following questions: To focus any element or component in the [Telerik UI Window for Blazor]({%slug dialog-overview%}), follow the steps below. They are also applicable for the [Dialog component]({%slug dialog-overview%}). -1. If the goal is to focus a Telerik Blazor component, [set the `@ref` attribute to obtain the component's reference]({%slug components/textbox/overview%}#textbox-reference-and-methods). +1. To focus a Telerik UI for Blazor component, [set the `@ref` attribute to obtain the component's reference]({%slug components/textbox/overview%}#textbox-reference-and-methods). 1. Raise a `bool` flag when showing the Window. 1. Check the boolean flag's value in `OnAfterRenderAsync()`. 1. Use a small `Task.Delay()` to wait for the Window to display and gain focus. Without a delay, the focusable component will either no exist yet, or the Window will steal the focus. From 4a8c542bebb624a67a4dc654578f0537c9ece18a Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:52:43 +0300 Subject: [PATCH 5/7] Update knowledge-base/window-focus-button-textbox-on-open.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/window-focus-button-textbox-on-open.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/window-focus-button-textbox-on-open.md b/knowledge-base/window-focus-button-textbox-on-open.md index 7c6ce41df..968d08781 100644 --- a/knowledge-base/window-focus-button-textbox-on-open.md +++ b/knowledge-base/window-focus-button-textbox-on-open.md @@ -39,7 +39,7 @@ To focus any element or component in the [Telerik UI Window for Blazor]({%slug d 1. To focus a Telerik UI for Blazor component, [set the `@ref` attribute to obtain the component's reference]({%slug components/textbox/overview%}#textbox-reference-and-methods). 1. Raise a `bool` flag when showing the Window. 1. Check the boolean flag's value in `OnAfterRenderAsync()`. -1. Use a small `Task.Delay()` to wait for the Window to display and gain focus. Without a delay, the focusable component will either no exist yet, or the Window will steal the focus. +1. Use a small `Task.Delay()` to wait for the Window to display and gain focus. Without a delay, the focusable component will either not exist yet, or the Window will steal the focus. 1. Focus the desired button, textbox, or input component. If it's a Telerik Blazor component, use the [`FocusAsync()` method]({%slug inputs-kb-focus%}). >caption Focus a component on Dialog or Window open From c91fb6976274e298643049601c1f3a43d0e2c1f1 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:52:57 +0300 Subject: [PATCH 6/7] Update knowledge-base/window-focus-button-textbox-on-open.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/window-focus-button-textbox-on-open.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/window-focus-button-textbox-on-open.md b/knowledge-base/window-focus-button-textbox-on-open.md index 968d08781..2ebc3ad24 100644 --- a/knowledge-base/window-focus-button-textbox-on-open.md +++ b/knowledge-base/window-focus-button-textbox-on-open.md @@ -40,7 +40,7 @@ To focus any element or component in the [Telerik UI Window for Blazor]({%slug d 1. Raise a `bool` flag when showing the Window. 1. Check the boolean flag's value in `OnAfterRenderAsync()`. 1. Use a small `Task.Delay()` to wait for the Window to display and gain focus. Without a delay, the focusable component will either not exist yet, or the Window will steal the focus. -1. Focus the desired button, textbox, or input component. If it's a Telerik Blazor component, use the [`FocusAsync()` method]({%slug inputs-kb-focus%}). +1. Focus the desired button, textbox, or input component. If it's a Telerik UI for Blazor component, use the [`FocusAsync()` method]({%slug inputs-kb-focus%}). >caption Focus a component on Dialog or Window open From 8a5dcf302bb979e8c5371deaae4939103bf1ac7d Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:53:26 +0300 Subject: [PATCH 7/7] Update knowledge-base/window-focus-button-textbox-on-open.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/window-focus-button-textbox-on-open.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/window-focus-button-textbox-on-open.md b/knowledge-base/window-focus-button-textbox-on-open.md index 2ebc3ad24..61b788ba8 100644 --- a/knowledge-base/window-focus-button-textbox-on-open.md +++ b/knowledge-base/window-focus-button-textbox-on-open.md @@ -26,7 +26,7 @@ res_type: kb This KB article answers the following questions: -* How to set default focus to a TextBox or a Button in a TelerikWindow? +* How to set default focus to a TextBox or a Button in a Telerik UI for Blazor Window? * How to focus a button or a textbox inside a Window when the Window is made visible? * How to focus a component after the Window opens? The JavaScript call is made before the Window actually shows, so the focusable element is `null`. * How do you set focus on an input element in a Window, so that the user doesn't have to use their mouse?