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();
}
}
I have a panel bar and I have components in those panels bars and some of them have text boxes I noticed that when I am entering text in those and hit enter the space bar the panel collapses, is there a way to prevent this?
===Admin Edit===
The issue stems from the fact the keydown bubbles out of the item content template. While waiting for a fix, a workaround would be to manually stop the propagation of the keydown.
<TelerikPanelBar Data="@Items">
<PanelBarBindings>
<PanelBarBinding>
<ContentTemplate>
@{
var item = context as PanelBarItem;
<div onkeydown="stopPropagation(event)">
<TelerikTextArea @bind-Value="item.Text"></TelerikTextArea>
</div>
}
</ContentTemplate>
</PanelBarBinding>
</PanelBarBindings>
</TelerikPanelBar>
@* move this script to a separate file in production *@
<script suppress-error="BL9992">
function stopPropagation(e) {
e.stopPropagation();
}
</script>
@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();
}
}
I am testing them out of the box with NVDA and JAWS screen readers and running into issues with how they are read. I believe part of the issue is how the aria attributes are being rendered on the controls.
Enable the NVDA screen reader. Then try to navigate first with "alt + w" then click "enter" or "space". The PanelBar dropdown will not open.