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)