TelerikComboBox requires double-click to load dropdown values

0 Answers 4 Views
ComboBox Grid
Arjun
Top achievements
Rank 1
Iron
Arjun asked on 26 Nov 2025, 10:40 AM | edited on 26 Nov 2025, 10:44 AM

I’m using a TelerikComboBox in a Blazor application, and I’ve encountered an issue where the dropdown requires two clicks to display the loader and populate the values. On the first click, nothing happens—the loader does not appear, and the dropdown remains empty. Only after clicking a second time does the loader show and the data load correctly.

Here’s the relevant code snippet:


<TelerikComboBox Data="LookupDropdown" @bind-Value="@Compare.Operand2.Value" TextField="@nameof(KeyValueDropdownsModel.Label)"
                 ValueField="@nameof(KeyValueDropdownsModel.Action)" Filterable="true" AllowCustom=IsEnabled
                 Placeholder=@PlaceholderContent FilterOperator="@FilterOperator" Width="270px" OnRead="LoadDropdownDataAsync">
    <ItemTemplate>
        <span class="selectedOptionCode" aria-label="@context.Label" title="@context.Description">@context.Label</span>
    </ItemTemplate>
    <HeaderTemplate>
        @if (IsLoading || isEOBCodeLoading)
        {
            <div class="dropdown-spinner">
                <TelerikLoader Type="@LoaderType.InfiniteSpinner" Size="@(ThemeConstants.Loader.Size.Small)"></TelerikLoader>
            </div>
        }
    </HeaderTemplate>

    <NoDataTemplate>
        @if (!IsLoading && !isEOBCodeLoading)
        {
            <div>No data available</div>
        }
    </NoDataTemplate>
    <ComboBoxSettings>
        <ComboBoxPopupSettings Height="auto" MinHeight="30px" MaxHeight="250px" />
    </ComboBoxSettings>
</TelerikComboBox>

As finding:

Root Cause:
It seems that the issue occurs when the EOB Code option is first selected from one menu, and then the EOB Code dropdown requires a second click for the loader to appear and display the values. This behavior only happens if the user does not focus out of the first menu before attempting to open the EOB Code dropdown.

Why it happens

  • Focus handling: If the user doesn’t “focus out” of the first menu, the second dropdown doesn’t register the initial click as a data‑load trigger.
  • Async loading: The loader is tied to the dropdown’s open event. If the component is still resolving focus or rendering, the first click only sets focus, and the second click actually opens the list.
  • Telerik specifics: Telerik  dropdowns often require explicit focus before they can trigger data binding. This is why we see the loader only after the second click.
    It’s not a defect in code alone, it’s tied to how Telerik manages focus and rendering in dropdown components

No answers yet. Maybe you can help?

Tags
ComboBox Grid
Asked by
Arjun
Top achievements
Rank 1
Iron
Share this question
or