I'm seeing a scroll bar appear then disappear as I type. Repeatedly typing "a" in the box will show/hide the scroll bar. Also typing "a" then backspace has the same behavior.
<TelerikMultiSelect Filterable="true" Data="@Countries"
@bind-Value="@Values"
Placeholder="Enter Balkan country, e.g., Bulgaria"
Width="350px" ClearButton="true"
AutoClose="false">
</TelerikMultiSelect>
@if (Values.Count > 0)
{
<ul>
@foreach (var item in Values)
{
<li>@item</li>
}
</ul>
}
@code {
List<string> Countries { get; set; } = new List<string>();
List<string> Values { get; set; } = new List<string>();
protected override void OnInitialized()
{
Countries.Add("Albania");
Countries.Add("Bosnia & Herzegovina");
Countries.Add("Bulgaria");
Countries.Add("Croatia");
base.OnInitialized();
}
}
---
ADMIN EDIT:
Currently, the component works the following way:
- User starts typing in the input of the component.
- Popup of the MultiSelect opens.
- Skeleton is shown:
- Data processing starts.
- After the data is processed, the skeleton is replaced with the actual data.
The scrollbar is shown by the skeleton and is always present (visible on step 3). The tricky part is that If the user is typing very fast, the Blazor framework bundles 2 renderings together and thus the scrollbar is not visible. The result is that the user sees a very brief flicker with the skeleton. Adding a small delay before showing the skeleton on step 3 will prevent the user from seeing the skeleton and thus remove the impression of seeing a "flicker".
As a workaround, you can hide the skeleton with CSS. This is applicable for all "select" components
<TelerikMultiSelect>
<MultiSelectSettings>
<MultiSelectPopupSettings Class="no-skeleton"></MultiSelectPopupSettings>
</MultiSelectSettings>
</TelerikMultiSelect>
<TelerikComboBox>
<ComboBoxSettings>
<ComboBoxPopupSettings Class="no-skeleton"></ComboBoxPopupSettings>
</ComboBoxSettings>
</TelerikComboBox>
<style>
.no-skeleton .k-skeleton {
display: none;
}
</style>---
Adding a delay would be one option to prevent the flickering, when filter responses arrive very quick.
Another option might be to display a less immense animation instead, like a spinner?
Here is an example how this could look like. Notice the spinning animation on the right side within the textbox after each keystroke. I think this is not perceived as flickering?
This behaviour is really ugly and should be changed soon. Here is video from the Telerik Live Demo Page of this control. The flickering happens on every keystroke. (Just because of the video's sampling rate it is not visible every time below.)
