Unplanned
Last Updated: 12 Mar 2021 10:38 by ADMIN
Adam
Created on: 12 Mar 2021 10:30
Category: MultiSelect
Type: Bug Report
1
Clear MultiSelect input when it loses focus

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-wrap .k-searchbar input");
            inputs.forEach(e => e.value = "")                     
        }
</script>

 

 

0 comments