When @bind-Value is used, the tags are ordered in the way the user chose them, which is the expected behavior.

When you don't use two-way binding, but alter the Value in the ValueChanged event (to implement some logic), the tags get reordered according to the their occurrence in the data source.

I would expect that they remain the user order in all cases.

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

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.

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 a requirement to be able to select multiple values. I have filtering enabled, but I only want the user to be able to select valid values and not enter custom data. My approach would be to clear any invalid data when the control loses focus. I want the MultiSelect input to be cleared when it looses focus (similar to the ComboBox behavior).

=========================

ADMIN EDIT

=========================

In the meantime, such behavior could be achieved with a JavaScript function called through the JS Interop.

@inject IJSRuntime JsInterop

<TelerikMultiSelect Filterable="true" Data="@Countries"
                    @bind-Value="@Values"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true" 
                    AutoClose="false" OnBlur="@OnBlurHandler">
</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>();

    async Task OnBlurHandler()
    {
        await JsInterop.InvokeVoidAsync("clearMultiselectInput");
    }

    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();
    }
}

You can include the following script tag in your index page or place the function in a separate JavaScript file in your project. This function will clear all instances of the Multiselect inputs, so you don't have to specify separate selectors for each of them. If you only want to work with one instance, you can use another approach.

<script>
        function clearMultiselectInput() {
            var inputs = document.querySelectorAll(".k-multiselect .k-input-values input");
            inputs.forEach(e => e.value = "")                     
        }
</script>

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.

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

To reproduce:

• Use the Local Data code snippet
• Open the popup
• Scroll down
• Close the popup
• Open the popup again
• Blank space will be rendered above the visible items.

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

Hi,

When displaying a MultiSelect control on a TelerikWindow (modal), the dropdown of items is displayed behind the dialog:

How can I change the Z-Index of the dropdown?

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.

Using row virtualization on MultiSelect, and am attempting to put a loading indicator into the popup content if the request to the server is still ongoing.

Problem with this is that the popup contents don't update if the popup is open when loading finishes.  I put together a reproduction on Telerik REPL showing the behavior I am experiencing.

https://blazorrepl.telerik.com/mvvQvVvN2458vinQ36

Note, Options finish loading (seen by the div update above the MultiSelect component), but if the popup is open, the contents do not update to reflect the loaded options.

My current workaround is to just make the MultiSelect disabled while it is doing its initial load.

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.

Hi team,

I just upgraded Blazor version to 2.25 and the primary button in FooterTemplate of MultiSelect started behaving differently. This was shown correctly prior to update. Also, normal button where Primary="true" is shown with correct styling.

I have written a little code snippet to demonstrate.

As it can be seen the the code for button is exactly same in both places but the output is different.

Please have a look into this.

Many thanks,