Hi

Recently we were building a feature that allows the optional selection of multiple items, and decided to use the Telerik Multiselect component. A subcomponent of the feature reads from a file, and pre-selects items in the multiselect based on data in the file similarly to this sample:

foreach(string item in file)
{
    selectedItemsList.Add(item);
}

At the moment, however, it seems that the Telerik Multiselect does not refresh its state when selected items are added and removed programatically, only when they are added or removed via user interaction. Would it be possible to have the Telerik Multiselect support the usage of ObservableCollection?

Thanks in advance!

Michael

First visit of options in drop down, using keyboard:

• each option is read as 'blank' in screen reader
• number of options not read out

When re-visiting the input when it has options selected as badges, using keyboard;

• to move between badges it say 'blank' (see: Multiselect options read as blank by AT [WCAG 1.3.1 level A] (telerik.com))
• does not tell you what you have already selected (if you don't tab to input and just use up or down it will read the options)
• adding and removing items the user is not informed how many options have been selected

Testing this Select All Checkbox sample in Safari produces a different result compared to other browsers.

Click on the CheckBox in the MultiSelect Header Template closes the popup in Safari. In other browsers (e.g. Chrome, Firefox) the popup remains open after checking the SelectAll CheckBox.

When AutoClose is set to false and you select more than one item, then only the first one will be highlighted in the popup. Items are selected and present in the input but are visually highlighted.

Reproduction 

I have set a small size to the MultiSelect. I noticed that the Summary Tag that contains the "1 more selected" text does not change - its size always remains the same regardless of the component size.

Reproduction: https://blazorrepl.telerik.com/cxFvPxvh58SMoekS04.

The Roundness setting of the MultiSelect also does not affect the summary tag.

The dropdown (select) components such as ComboBox, MultiSelect etc. have a built-in loading indicator that includes several Skeleton instances.

I want to be able to remove that and add my custom loading indicator in the popup. Ideally, it would be a template so we could have some flexibility.

===

ADMIN EDIT

===

This request targets all the select components (AutoComplete, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect).

The DropDownList currently does not have a built-in loader but that will be added as well as a prerequisite for the current feature. See Add a loading indicator in the popup.

When user is inside list of selected options/items, navigating amongst the items with keyboard left/right keys, it states "item # of # of items of level 1". 
what is "of level 1"? (is items selected in level 1 and level 2 is the text editable section?)

i am expecting the screen reader to state item "<value/label/title>" when i set focus to an item via keyboard left or right.

The issue did not occur in firefox. Sorry, i have not provided the firefox readout w/ the screen reader for comparison.

however, for the most likely user scenario the behaviour with the screen reader is correct.

if keyboard focus is on text edit, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab keys) all selected items are read out correctly

tested in Chrome and firefox using NVDA.

The following, took a bit of effort to identify where the behaviour was failing for a screen reader.

for all scenarios below the multi-select component currently has items (more than one) in it as selected.

GOOD

if keyboard focus is on text edit, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab keys) all selected items are read out correctly

BAD

if keyboard focus is on selected item, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab key) the focused (selected) item is not read out correctly.

(sorry example read out not provided)

GOOD

selected items are read out correctly when;

• closing items panel w/ escape key,
• closing items panel when selecting an item
  

BAD

delete item;

• remove all selected items w/ escape key does not inform a screen reader user of the outcome; that no item is now selected (should state something).

• removing last item with backspace does not inform screen reader of the outcome; that no item is now selected (should state something). I swear this worked once with firefox.
  

the following behaviour also occurs after removing all items via a keyboard, the keyboard focus becomes lost;

• (BAD) most times u can't press a right / down key into the text section of the multi-select (experienced w/ firefox too)
• (GOOD) most times can press alt+down to bring the panel (experienced w/ firefox too)
• (GOOD) u can still tab out to next clickable object

Description

In Firefox, there are occasions in which multiple items remain focused (k-focus class is not removed from the blurred item)

Reproduction (if bug)

1. Create a multiselect and set AutoClose="false".
2. Open the component and select a few items.
3. Close the component.
4. Open the component and select a new item.
5. Two items have the k-focus class.

Second related case:

1. Create a multiselect and set AutoClose="false".
2. Open the component and navigate up and down with the keyboard arrows.
3. Select an item.
4. The last focused item with the arrows is focused as well as the newly selected item.

REPL for reproduction

Expected (if bug)

Only one item should have the k-focus class at a time.

Browser (if bug)

Firefox

Broken Telerik UI for Blazor version (if bug)

3.5.0

We are happy with PersistFilterOnSelect, now the filter is more useful for a multi selection.

It is not wanted that the filter text is still there if the selection list is closed!! Please allow clearing the filter value upon closing.

===

ADMIN EDIT

===

The only possible way to currently clear the filter is to force the component re-render upon closing.

Here is an example: https://blazorrepl.telerik.com/GeusuFbQ4971bi9S29.

By design, the filter should be cleared when the user blurs the component. The filter is currently persisted and this is not correct.

Reproducible in the filtering demo.

The OnBlur event does not fire after removing an item wehn using TagMode="@MultiSelectTagMode.Single"

I used this snippet in the Blazor REPL to reproduce the issue:

<p>@OnBlurMessage</p>
<TelerikMultiSelect Data="@Countries"
                    @bind-Value="@SelectedCountries"
                    TagMode="@MultiSelectTagMode.Single"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" 
                    ClearButton="true"
                    AutoClose="false"
                    OnBlur="OnBlurHandler">
</TelerikMultiSelect>

@code {
    private List<string> Countries { get; set; } = new List<string>();

    private List<string> SelectedCountries { get; set; } = new List<string>();
    string OnBlurMessage {get; set;} = "";
    int i;

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");
        base.OnInitialized();
    }

    void OnBlurHandler()
    {
        OnBlurMessage = $"OnBlurHandler touched {++i} times";
    }
}

Steps to reproduce:

1. Select an item from the list then click out of the control.  Note that the comments shows "OnBlurHandler touched 1 times".
2. Click the x for the "1 item(s) selected" tag then click outside of the control.  Note that the comment still shows "OnBlurHander touched 1 times".
3. Click into the control then outside of control.  Note that the comment is updated to show "OnBlurHandler touched 2 times".

The OnBlur event should fire after step 2.

Attached is a short video clip of what I see.

This appears to be documented behavior, but it also seems to me like this is something that the component should be handling.

When using row virtualization with a Grid, a DropDownList, a MultiSelect, etc, the OnRead is called for every scroll event, regardless of whether the component _actually_ needs to fetch new data or not.

For example:  A DropDownList with a PageSize of 100, but with only 10 items visible in the dropdown at a time will ask for 100 records every time the user even scrolls 1 record down. This results in many requests to the backend server, with many of the results being the majority of the contents from the previous request.

I have worked around this by implementing a buffer that keeps results for me and returns them as the user scrolls, only requesting for more from the backend server when the buffer runs out, but this feels like something that the components themselves should be handling.

If this is expected behavior, all good.  Just wanted to raise some awareness on it.

The https://feedback.telerik.com/blazor/1517344-filter-text-is-cleared-when-you-select-an-item ticket fixed a good usability issue with multiselect. Unfortunately, it creates a bug I ran into while starting to update my applications MultiSelects.

If you have PersistFilterOnSelect=true property set, but not AutoClose=false what happens is the user types '2' to filter the selection, selects something with the mouse and the drop down closes, but the filter doesn't clear so when next trying to select an item the old filter is still there, although it's not showing. The only way to clear the ghost filter seems to be to start typing a new thing to filter on and then backspace that which finally removes the ghost.

The docs kind of mention this with "To keep the filter upon selection, set the PersistFilterOnSelect parameter to true. It only applies when Filterable="true" and AutoClose="false"" but the ghost filter staying is clearly a bug. You can test this behaviour with a repl I made. Click the multiselect active, type for.ex. '2' and select an item with the mouse, the item is selected, the dropdown closed and the filter vanishes. Now click the multiselect again, the dropdown is already filtered as if '2' had been pressed, but it's not visible and can't be cleared without typing a new filter

Below is a screenshot where I typed 22 as the filter, selected Item 22 and then clicked the MultiSelect again

In drop down panel colour indicates which option has been selected (is it the dark colour or is the light colour). Suggestion: having an icon of tick would assist.

As an alternative option - Blazor MultiSelect - Templates | Telerik UI for Blazor this would be great if you could template selected and non-selected items, but at the moment there is just the one item template.