Integrate default value in telerik multiselect instead of blank values

Hello, 
I have implemented searching, multiselect using telerik multiselect for multiple values. And relationship between multiselect is maintained between multiple multiselect. Also, i have used getter setter to set "All" option when there is no value selected. While Searching, i have implemented an api call and get the desired output.

Issue: Whenever I select a value from multiselect and search for other value and immediately remove the values using backspace, blank is shown in the respective multiselect. But when i click outside "All" is retained in the multiselect.

I have managed to retrieve the search text from MultiSelectReadEventArgs args using OnRead, as shown below:

"dynamic item = args.Request.Filters.FirstOrDefault();
var searchText = (string)item.Value; "

Expected Result : Whenever I select a value from multiselect and search for other value and immediately remove the selected values and text using backspace, "All" should be shown in the respective multiselect. But when i click outside "All" is retained in the multiselect. Is there anyway that I could achieve it?

Here is an example of Getter setter implementation as :

@page "/multiselect/overview"

<HobbiesTemplate>
    <TelerikMultiSelect Data="@Hobbies"
                        @bind-Value="@SelectedHobbyIds"
                        ValueField="@nameof(HobbiesDto.HobbyId)"
                        TextField="@nameof(HobbiesDto.HobbyName)"
                        Placeholder="Select your favourite sport..."
                        Id="products-multiselect" Width="100%">
    </TelerikMultiSelect>
</HobbiesTemplate>

@code {
    public List<int> SelectedHobbyIds { get{return SelectedHobbyIds;}
                        set {
                                // if nothing and 'All' option should be selected 
                                if (value.Count == 0 || (value.Any(x => x == 0) && !SelectedHobbyIds.Any(x => x == 0)))
                                {
                                    SelectedHobbyIds = new List<int>() { 0 };
                                }
                                else
                                {
                                    // if other option selected then remove 'All' option
                                    if (value.Count() > 1 && value.Any(x => x == 0))
                                    {
                                        SelectedHobbyIds = value.Where(x => x != 0).ToList();
                                    }
                                    else
                                    {
                                        SelectedHobbyIds = value;
                                    }
                                }
                            }

            }

    public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
    {
        new HobbiesDto(0,"All"),
        new HobbiesDto(1, "Basketball"),
        new HobbiesDto(2, "Golf"),
        new HobbiesDto(3, "Baseball"),
        new HobbiesDto(4, "Table Tennis"),
        new HobbiesDto(5, "Volleyball"),
        new HobbiesDto(6, "Football"),
        new HobbiesDto(7, "Boxing"),
        new HobbiesDto(8, "Badminton"),
        new HobbiesDto(9, "Cycling"),
        new HobbiesDto(10, "Gymnastics"),
        new HobbiesDto(11, "Swimming"),
        new HobbiesDto(12, "Wrestling"),
        new HobbiesDto(13, "Snooker"),
        new HobbiesDto(14, "Skiing"),
        new HobbiesDto(15, "Handball"),
    };

    public class HobbiesDto
    {
        public int HobbyId { get; set; }
        public string HobbyName { get; set; }

        public HobbiesDto() { }

        public HobbiesDto(int id, string name)
        {
            HobbyId = id;
            HobbyName = name;
        }
    }
}

this is my hobbiestemplate.razor page

<div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
    <div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
        <span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>

        <div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
            <span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
            <span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
        </div>

        <div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        </div>

    </div>

    <div class="main-container k-pb-8 k-d-flex k-flex-col">
        <div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
            <span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
            <h4 class="k-h4 k-opacity-20 k-font-bold">Hobbies</h4>
        </div>
        <span class="k-d-inline-block">Favourite sport</span>
        @ChildContent
        <span class="hint k-font-size-sm k-font-italic k-mt-1.5">Add your favourite sport, if it is not in the list.</span>

        <div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="k-skeleton k-opacity-30 k-rounded-md k-h-8"></span>
        </div>

        <div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-14"></span>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    }