Version: 14.0.0
Description:
Behavior of TabStripTab is inconsistent when working with Mouse vs Keyboard driven workflow. The OnStateChanged event documentation states it fires "on any change to the active tab, tab visibility, pinning, or order." In practice, this only holds true for mouse-click tab activation. Keyboard-driven tab activation (arrow keys, Home, End) changes the active tab and raises ActiveTabIdChanged , but never raises OnStateChanged .
This creates an inconsistency for anyone using the documented state-persistence pattern ( OnStateInit / OnStateChanged ) to save and restore the TabStrip's state: tabs selected via keyboard navigation render correctly, but are silently never persisted, since the app only listens to OnStateChanged . On the next reload/restore, the selection reverts to the last mouse-selected tab.
Root cause (from the TabStrip source):
• Click path — ActivateTab(TabStripTab tab) :
await SetActiveTabAsync(tab); // raises ActiveTabIdChanged
InvokeOnStateChanged(); // raises OnStateChanged
• Keyboard path — HandleActiveTabIdNavigationAsync(...) :
await SetActiveTabAsync(nextActiveTab); // raises ActiveTabIdChanged only — InvokeOnStateChanged() is never called
Steps to reproduce:
1. Add a TelerikTabStrip with OnStateChanged bound to a handler that logs/persists the received TabStripState .
2. Add 3+ TabStripTab s.
3. Click into the tab header area to focus it, then use the arrow keys (or Home/End) to move between tabs.
4. Observe: the active tab panel changes visually, but the OnStateChanged handler is never invoked.
5. Now click a tab header directly — OnStateChanged fires as expected.
Expected: OnStateChanged should fire for every active-tab change, regardless of whether it was triggered by mouse click or keyboard navigation, matching the documented behavior.
Actual: OnStateChanged only fires for mouse-click tab activation; keyboard navigation only raises ActiveTabIdChanged .
Workaround used: Also bind ActiveTabIdChanged and merge the received tab id into the previously-captured/persisted state object (rather than relying on OnStateChanged alone).
(Also applies to AutoComplete, DropDownList, MultiSelect, MultiColumnComboBox).
When using Height="auto" in the popup settings and filtering with a dropdown above the component, the dropdown detaches from the main component.
<ComboBoxPopupSettings Height="auto"></ComboBoxPopupSettings>https://blazorrepl.telerik.com/cKkSQGFO50ovCpr829
A possible workaround is to use a MaxHeight that is less than half the browser viewport.
<ComboBoxPopupSettings Height="auto" MaxHeight="45vh"></ComboBoxPopupSettings>
With Blazor server, clicking the NOW button (obviously) sets the time to the time on the server since that's where the code is running. Is there a way to trap the NOW button click or somehow give it an offset or define the value that NOW means so NOW will mean the time that the user is sitting in?
---
TELERIK EDIT
In the meantime, here are a few possible workarounds:
1. Use the DateTimePicker's ValueChanged event to detect new values that are very close or match the server's current DateTime. In such cases, you can assume that the user has clicked on TODAY / NOW, and set the local user time as a component value.
Server Time on UI Refresh: @DateTime.Now.ToLongTimeString()
<br />
User Local Time on Page Load: @LocalTime?.ToLongTimeString()
<br />
User Local Time Offset: @LocalOffset
<br />
<br />
<TelerikDateTimePicker Value="@PickerValue"
ValueChanged="@( (DateTime? newValue) => PickerValueChanged(newValue) )"
ValueExpression="@( () => LocalTime )"
Format="yyyy-MMM-dd HH:mm:ss"
Width="240px" />
<!-- Move JS code to a separate JS file in production -->
<script suppress-error="BL9992">
function getLocalTime() {
var d = new Date();
return d.getTimezoneOffset();
}
</script>
@code {
private DateTime? PickerValue { get; set; }
private DateTime? LocalTime { get; set; }
private int LocalOffset { get; set; }
private void PickerValueChanged(DateTime? newValue)
{
DateTime serverNow = DateTime.Now;
DateTime utcNow = DateTime.UtcNow;
TimeSpan nowTolerance = new TimeSpan(0, 0, 10);
if (newValue - serverNow < nowTolerance)
{
PickerValue = utcNow.AddMinutes(-LocalOffset);
}
else
{
PickerValue = newValue;
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
LocalOffset = await js.InvokeAsync<int>("getLocalTime");
LocalTime = DateTime.UtcNow.AddMinutes(-LocalOffset);
StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
}
2. Use the DatePicker's HeaderTemplate with a custom TODAY / NOW button.
3. Hide the NOW button with CSS:
<style>
.no-now-button .k-time-now {
display: none;
}
</style>
<TelerikDateTimePicker @bind-Value="@PickerValue"
Format="yyyy-MMM-dd HH:mm:ss"
PopupClass="no-now-button"
Width="240px" />
@code {
private DateTime? PickerValue { get; set; }
}
When the user presses ESC to exit edit mode from an EditorTemplate with a ComboBox / MultiColumnComboBox / MultiSelect, the cell value is cleared and this change persists in subsequent editing. The original data item value is cleared too, although this is not immediately obvious.
The issue occurs in version 14.1.0 and WebAssembly apps are more likely to suffer from it.
When double-clicking a task in the Gantt Timeline, the popup edit form may not appear. Instead, the vertical blue band for task dragging may show.
The problem is more likely to occur when using a touchpad.
Example:
<PageTitle>Home</PageTitle>
<div>
<TelerikTextBox Width="20rem" Placeholder="Pallet" DebounceDelay="1000" @bind-Value="@_textInput" OnChange="@(async (input) => await OnInputChanged(input))" />
</div>
<p>@_textInput</p>
@code {
private string? _textInput;
private async Task OnInputChanged(object input)
{
Console.WriteLine($"Immediate: function parameter: {input}, bound variable: {_textInput}");
await Task.Delay(1000);
Console.WriteLine($"Delayed: function parameter: {input}, bound variable: {_textInput}");
//Make the OnChange event receive the immediate value when the DebounceDelay is set
}
}The DebounceDelay is set to 1 second to highlight the behavior, although we have observed it with delays less than 100 milliseconds when the input is from a barcode scanner and the Enter is part of the scan. Start the sample, type "123" in the input, and hit enter within 1 second.
The output in the console is:
Immediate: function parameter: , bound variable:
Delayed: function parameter: , bound variable: 123
The ability to choose which options to appear in the ContextMenu.
=====
TELERIK EDIT: In the meantime, here is how to hide context menu items with CSS:
/* Hide the Rename item in the FileManager context menu */
.k-context-menu:has(.k-svg-i-download) .k-menu-item:nth-of-type(1) {
display: none;
}
/* Hide the Delete item in the FileManager context menu */
.k-context-menu:has(.k-svg-i-download) .k-menu-item:nth-of-type(3) {
display: none;
}Here is a complete example: https://blazorrepl.telerik.com/cpPkuBEq408A36p010