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.
Currently, it is possible to expand or collapse PanelBar items programmatically.
There should be a way to prevent a specific PanelBar item from collapsing or expanding.
Please expose cancellable OnExpand and OnCollapse events similar to other components. This will give developers the ability to apply custom interaction based on their scenario.