Initial Load does not show options

[Thomas Crosman]

I am using the SfMultiSelect, and have used the OnFilter Event to run my query to my API for proper pagination.

The first time the SfMultiSelect loads, when I click on it once I get no options and must either click a second time or begin typing.

After the initial load (even if navigating away), this buggy behavior goes away.

Is there a property I need to enable (perhaps something regarding pre-render) to prevent this from happening?  Note if I pass data to the SfMultiSelect this does not happen, only upon using the OnFilter event to make custom api calls.

The Data is there, it's just not showing.

[Sureshkumar P]

We have validated your requirement; we suggest you render the component by loading the data into the data source property to resolve the initial data loading issue on your application. Also, when loading the data using the filtering event handler method will load the data after filtering the data.

Find the code example here:

<SfMultiSelect @ref="mulObj" Placeholder="SelectValue" Enabled="true" AllowFiltering="true" DataSource="Games" TItem="GameFields" TValue="string[]" @bind-Value="@ValueMultiSelect1" ShowDropDownIcon=true >

    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>

    <MultiSelectEvents TItem="GameFields" TValue="string[]" Filtering="@onFiltering"></MultiSelectEvents>

</SfMultiSelect>

 

@code {

 

    SfMultiSelect<string[], GameFields> mulObj { get; set; }

    public string[] ValueMultiSelect { get; set; }

    public string[] ValueMultiSelect1 { get; set; }

 

    private async Task onFiltering(FilteringEventArgs args)

    {

        args.PreventDefaultAction = true;

        var query = new Query().Where(new WhereFilter() { Field = "Text", Operator = "contains", value = args.Text, IgnoreCase = true });

 

        query = !string.IsNullOrEmpty(args.Text) ? query : new Query();

 

        await mulObj.FilterAsync(this.Games, query);

    }

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"}

    };

}

[Thomas Crosman]

Unfortunately, this is exactly what I'm doing.

[Sureshkumar P]

Based on our previous update, we cannot replicate the reported issue on our end. We have added the tested sample in the attachment.

If still, you have faced the same issue, then please replicate the reported issue in our attached sample and revert us with a detailed issue replication procedure. These details will help us to provide an exact solution as earlier as possible.

Attachment: DDL_f95a0629.zip