Completed
Last Updated: 22 Jan 2024 16:06 by ADMIN
Release 5.1.0 (31 Jan 2024) (R1 2024)
Adam
Created on: 17 Mar 2021 11:01
Category: MultiSelect
Type: Feature Request
60
The popup of a MultiSelect flickers when typing quickly

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:

  1. User starts typing in the input of the component.
  2. Popup of the MultiSelect opens.
  3. Skeleton is shown:
  4.  Data processing starts.
  5. 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>

---

4 comments
Srinivas
Posted on: 22 Nov 2022 04:41
Much needed feature
Thorsten
Posted on: 18 Nov 2022 07:25

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?

 

 

Aditya
Posted on: 18 Nov 2022 06:54
We are also waiting for this feature from a long time. Hope it is added very soon.
Thorsten
Posted on: 18 Nov 2022 05:45

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.)