Last Updated: 03 Jun 2024 08:10 by 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) {

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

<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");