Completed
Last Updated: 27 Oct 2021 08:50 by ADMIN
Release 2.28.0
Todd
Created on: 03 Jun 2021 08:40
Category: PanelBar
Type: Bug Report
8
Some keyboard shortcuts do not work inside PanelBar ContentTemplate

Hello,

Some keyboard shortcuts do not work inside PanelBar ContentTemplate. For example, when any text input control (TelerikTextBox, TelerikComboBox, etc.) exists inside the ContentTemplate of a TelerikPanelBar, the input will no longer accept space characters and certain other keyboard input such as arrow keys. 

This is very easy to reproduce.  Here is a simple example:

<div>
    <TelerikPanelBar Data="@Items">
        <PanelBarBindings>
            <PanelBarBinding>
                <ContentTemplate>
                    @{
                        var item = context as PanelBarItem;
                        <div>
                            <TelerikTextBox @bind-Value="item.Text"></TelerikTextBox>
                        </div>
                    }
                </ContentTemplate>
            </PanelBarBinding>
        </PanelBarBindings>
    </TelerikPanelBar>
</div>

@code {
    public List<PanelBarItem> Items { get; set; }

    public class PanelBarItem
    {
        public string Text { get; set; }
        public List<PanelBarItem> Items { get; set; }
    }

    protected override void OnInitialized()
    {
        Items = new List<PanelBarItem>()
    {
            new PanelBarItem() { Text = "Item 1" },
            new PanelBarItem() { Text = "Item 2" }
        };
        base.OnInitialized();
    }
}


1 comment
ADMIN
Dimo
Posted on: 12 Aug 2021 07:39

Hi Todd,

While we fix the issue, I can share a possible workaround - stop the keydown event propagation from the TextBox container.

Razor

<div onkeydown="stopPropagation(event)">
    <TelerikTextBox @bind-Value="item.Text"></TelerikTextBox>
</div>

JavaScript

window.stopPropagation = (e) => {
    e.stopPropagation();
}

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.