<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;
    }
}

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)

<div style="height:80vh;background:linear-gradient(white,orange)">
    <ol>
        <li>Open a ComboBox</li>
        <li>Type a character to filter and reduce the visible data items</li>
        <li>Observe incorrect popup position that leaves a gap</li>
    </ol>
    <ol>
        <li>Focus a closed ComboBox</li>
        <li>Type a character to filter and display a reduced list of data items</li>
        <li>Remove the filter string to increase the visible data item count</li>
        <li>Observe incorrect popup position that overflows the screen</li>
    </ol>
</div>

WORKS:
<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Width="300px" />

BROKEN:
<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Width="300px">
    <ComboBoxSettings>
        <ComboBoxPopupSettings Height="auto" MinHeight="50px" MaxHeight="60vh" />
    </ComboBoxSettings>
</TelerikComboBox>

<div style="height:80vh;background:linear-gradient(orange, white)">

</div>

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; }

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>();

        for (int i = 1; i <= 50; i++)
        {
            ListItems.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"
            });
        }

        base.OnInitialized();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

<script suppress-error="BL9992">
    window.navigateToHref = (ev) => {
        if (ev.key === "Enter") {
            location.href = ev.target.href
        }
    };
</script>

@* This example shows how to create header and footer for the Drawer and select an item manually. *@
<TelerikDrawer @bind-Expanded="@DrawerExpanded"
               Data="@Data"
               MiniMode="true"
               Mode="@DrawerMode.Push"
               @bind-SelectedItem="@SelectedItem"
               @ref="@DrawerRef">
    <Template>
        @* the header *@
        <div>
            <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@FontIcon.Menu" />
            @if (DrawerExpanded)
            {
                <div class="text-info" style="border-bottom:solid; font-weight: bold; margin-bottom: 3em; white-space:nowrap">
                    <a href="https://google.com" onkeydown="navigateToHref(event)">
                        My Custom Navigation to Google
                    </a>
                </div>
            }
            else
            {
                <div class="text-info" style="border-bottom:solid; font-weight: bold;">
                    Nav
                </div>
            }
        </div>

        @* custom items rendering and item selection *@

        <div class="k-drawer-items">
            <ul>
                @if (SelectedItem != null && DrawerExpanded)
                {
                    <li class="k-drawer-item" style="white-space:nowrap">
                        <div>
                            <p><strong>@SelectedItem.Text</strong></p>
                            <p>@SelectedItem.Description</p>
                        </div>
                    </li>
                }

                @foreach (var item in Data)
                {
                    @* Use onclick to handle manual item selection *@
                    <li @onclick="@(() => SelectedItem = item)"
                    class="k-drawer-item @GetSelectedItemClass(item)" style="white-space:nowrap">
                        <TelerikFontIcon Icon="@item.Icon"></TelerikFontIcon>
                        @if (DrawerExpanded)
                        {
                            <div>
                                <div>@item.Text</div>
                            </div>
                        }
                    </li>
                }
            </ul>
        </div>

        @* the footer *@
        @if (DrawerExpanded)
        {
            <div style="text-align: center; margin-top: 3em; padding-top: 2em; border-top: 2px solid black; white-space:nowrap">
                <img src="user-avatar.png" alt="my avatar" style="border-radius: 50%; width: 50px; height: 50px;" />
                <br /><br />
                <TelerikButton Icon="@FontIcon.Logout" ThemeColor="primary">Log Out</TelerikButton>
            </div>
        }
    </Template>
    <DrawerContent>
        <div class="m-5">Content for @SelectedItem?.Text - @SelectedItem?.Description</div>
    </DrawerContent>
</TelerikDrawer>


@code {
    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool DrawerExpanded { get; set; } = true;
    public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
    {
        new DrawerItem {Text = "Shopping Cart", Icon = FontIcon.Cart, Description = "Items in shopping cart"},
        new DrawerItem {Text = "Settings", Icon = FontIcon.Gear, Description = "My profile settings"},
        new DrawerItem {Text = "Notifications", Icon = FontIcon.ExclamationCircle, Description = "My profile notifications"},
        new DrawerItem {Text = "Calendar", Icon = FontIcon.Calendar, Description = "My events"},
    };

    public string GetSelectedItemClass(DrawerItem item)
    {
        if (SelectedItem == null) return string.Empty;
        return SelectedItem.Text.ToLowerInvariant().Equals(item.Text.ToLowerInvariant()) ? "text-info" : "";
    }

    public class DrawerItem
    {
        public string Text { get; set; }
        public FontIcon? Icon { get; set; }
        public string Description { get; set; }
    }
}