Here is the scenario:
In this case, reducing or increasing the number of visible dropdown items does not adjust the open dropdown's position. As a result, it may either float too high, or overflow the screen.
Possible workarounds are:
Here is a test page:
<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;
}
}