The SplitButton and DropDownButton trigger client-side Blazor framework exceptions if the app tries to change the component UI in the OnClick handler, for example, toggle Enabled or set another Class.
The issue exists only in WebAssembly apps and only in Chrome / Edge. The problem doesn't exist in the Button and ToggleButton.
Test example with a possible workaround:
<p>Issue:</p>
<TelerikSplitButton OnClick="@OnClickHandler" Enabled="@SplitButtonEnabled">
<SplitButtonContent>Click Me</SplitButtonContent>
<SplitButtonItems>
<SplitButtonItem>Item 1</SplitButtonItem>
<SplitButtonItem>Item 2</SplitButtonItem>
</SplitButtonItems>
</TelerikSplitButton>
<p>Workaround:</p>
<div class="@( $"splitbutton-wrapper {(SplitButtonEnabled ? "" : " my-disabled")}" )">
<TelerikSplitButton OnClick="@OnClickHandler" TabIndex="@( SplitButtonEnabled ? 0 : -1 )">
<SplitButtonContent>Click Me</SplitButtonContent>
<SplitButtonItems>
<SplitButtonItem>Item 1</SplitButtonItem>
<SplitButtonItem>Item 2</SplitButtonItem>
</SplitButtonItems>
</TelerikSplitButton>
</div>
<style>
.splitbutton-wrapper {
display: inline-flex;
}
.my-disabled button {
outline: none !important;
cursor: default;
opacity: .6;
filter: grayscale(0.1);
pointer-events: none;
box-shadow: none !important;
}
</style>
<br />
<br />
<TelerikButton OnClick="@OnClickHandler">Toggle SplitButton Enabled</TelerikButton>
<br />
<br />
<p>OnClickHandler fired: @ClickLog</p>
@code {
private bool SplitButtonEnabled { get; set; } = true;
private string ClickLog { get; set; } = string.Empty;
public void OnClickHandler(MouseEventArgs MouseEventArgs)
{
ClickLog = DateTime.Now.ToString("HH:mm:ss.fff");
SplitButtonEnabled = !SplitButtonEnabled;
}
}Error message:
blazor.web.js:1 Uncaught (in promise) Error: Assertion failed - heap is currently locked
at Ar (blazor.web.js:1:158126)
at Object.beginInvokeDotNetFromJS (blazor.web.js:1:156049)
at y.invokeDotNetMethodAsync (blazor.web.js:1:4322)
at S.invokeMethodAsync (blazor.web.js:1:5830)
at r.invokeMethodAsync (telerik-blazor.js?63…67597060:22:1272553)
at r.invokeBlur (telerik-blazor.js?63…67597060:22:1392662)
at HTMLButtonElement.onBlur (telerik-blazor.js?63…67597060:22:1270337)
at ve.setOrRemoveAttributeOrProperty (blazor.web.js:1:29093)
at ve.applyAttribute (blazor.web.js:1:28037)
at ve.applyEdits (blazor.web.js:1:25064)
REPL example:
https://blazorrepl.telerik.com/wIEiduuB379xcqGZ08
Steps to reproduce:
- First click on the primary button. The dropdown does not open which is expected.
- After that click on the arrow button. The dropdown does not open, but it should.
Last working version is 6.0.2:
https://blazorrepl.telerik.com/coOiRYkB42URZx2823
I am experiencing an issue with UI for Blazor's SplitButton. When I click on the dropdown arrow initially, it correctly expands the dropdown list area. However, while the dropdown list area is expanded, if I click the arrow again, it does not close it, leaving the dropdown list area expanded. The exact behavior appears to be that the dropdown collapses while the mouse is pressed down over the arrow button, but when the mouse is released, the dropdown list area expands again.
Reproduction: https://blazorrepl.telerik.com/QnlPPdvv50aUXSKO14.
The desired behavior is that the split button arrow would toggle the dropdown list between expanded and collapsed states.
The DropDownButton and SplitButton exhibit the following accessibility issues:
- The screen reader cannot read the items in the DropDownButton and SplitButton popup.
- When the DropDownButton is opened with Enter, the user cannot navigate the dropdown items with the arrow keys (tested in NVDA).
I recently upgraded the target framework to .NET 7 and the UI for Blazor package to 3.7. With this configuration in my WASM app, it looks like the OnClick event for the child buttons is sometimes not fired. It happens occasionally and not for all child buttons.
===
ADMIN EDIT
===
Last working version: UI for Blazor 3.6.1. and .NET 6. You may revert to that configuration until the fix is live.
This will make it easier to have a dynamic list of options whose order can be preserved.
Otherwise, you need to use conditional markup (which puts newly made visible items at the end), or a @foreach over a descriptor model.