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