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>

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.

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

First visit of options in drop down, using keyboard:

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

At the moment, the OnChange even fires when:

• the user selects an item from the dropdown
• the user blurs the input
• the user presses enter in the input

The problem with the multiselect is that we have two extra actions:

• remove an already selected item from its own [x] button - OnChange does not fire even though the value changes
• clear all items with the ClearAll button - OnChange does not fire even though the value changes
• delete items with the backspace key