Cannot navigate out of the TelerikCalendar using tab

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 03 Jun 2024 08:10 by XMedicus

XMedicus

Created on: 03 Jun 2024 08:10

Category: Calendar

Type: Bug Report

Cannot navigate out of the TelerikCalendar using tab

I am working on adding keyboard navigation to my webpage and have encountered an issue with the Telerik Blazor Calendar. While it is possible to navigate to and through the Calendar using the tab key and arrow keys, it is not possible to tab out of the calendar once the days is in focus.

===

A possible workaround is to tab out with JavaScript. The example below uses a hard-coded element to focus. It is also possible to find an unknown focusable element after the Calendar.

@inject IJSRuntime js

<script suppress-error="BL9992">
    function focusOutCalendar() {
        var focusedCalendarCell = document.querySelector(".calendar-container td.k-focus");
        if (focusedCalendarCell) {
            document.getElementById("input-after-calendar").focus();
        }
    }
</script>

<div @onkeydown="@OnCalendarKeyDown" class="calendar-container">
    <TelerikCalendar />
</div>

<input id="input-after-calendar" style="width:20em" value="focusable element after the Calendar" />

@code {
    private async Task OnCalendarKeyDown(KeyboardEventArgs args)
    {
        if (args.Key == "Tab")
        {
            await js.InvokeVoidAsync("focusOutCalendar");
        }
    }
}