Completed
Last Updated: 11 Dec 2024 14:18 by ADMIN
Release 2025 Q1 (Feb)
Amanatios Amanatidis
Created on: 06 Dec 2024 09:38
Category: SplitButton
Type: Bug Report
2
SplitButton and DropDownButton throw heap exception when OnClick updates the Enabled parameter

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)
0 comments