Autocomplete - Value selection not registering

[Michal]

So I have a standard AutoComplete object on blazor server app, however I noticed that most of the time it does not register a value being selected. It opens up, shows the list of available items but upon selecting an item with a mouse nothing happens. Suggestions disappear but no value is present as the selected one (sometimes it works as intended but mostly it doesn't). What's interesting is that it always works correctly if I select something with a keyboard but not with the mouse.




            <Syncfusion.Blazor.DropDowns.SfAutoComplete ID="1" DataSource="advertisers" Value="selectedClient" TItem="Models.MongoModels.MongoClientModel" TValue="Models.MongoModels.MongoClientModel" Placeholder="Select client..." FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Never" ValueChanged="(Models.MongoModels.MongoClientModel a) => { selectedClient = a; }">
                <Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings Value="name" />
            </Syncfusion.Blazor.DropDowns.SfAutoComplete>
                
            

I tried using @bind-Value but the effect is the same. I also tried swapping autocomplete for a dropdownlist with search bar but it behaves exactly the same. Models.MongoModels.MongoClientModel class is barely 10-15 strings. Is it possible that the object Models.MongoModels.MongoClientModel is simply too big?

[Mohanraj Mathaiyan]

Hi Michal,

We are Currently validating your requirement, we will update the possible details within two business days(04/08/2022).

Regards,

Mohanraj M

[Deepak Ramakrishnan]

Hi Michal,

We suspect that the native ValueChanged event used in the component might be the issue causing factor . If you needs to detect the value change, we suggest you to use ValueChange  event as like below mentioned code . When using @bind-value property , the bounded value properly set to the component in our end . Also we have shared working sample for your reference . Kindly revert us with modified sample if we missed anything which causes the issue .

@using Syncfusion.Blazor.DropDowns

 

Selected Item : @SelectedItem

 

        <SfAutoComplete TValue="string" TItem="GameFields" @bind-Value="SelectedItem" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Never" Placeholder="e.g. Basketball" DataSource="@Games">

            <DropDownListEvents TValue="string" TItem="GameFields" ValueChange="ChangeHandler"> </DropDownListEvents>

            <AutoCompleteFieldSettings Value="Text"/>

        </SfAutoComplete>

 

@code{

    public string SelectedItem { get; set; } = "American Football";

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    public 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"}

    };

    public void ChangeHandler(ChangeEventArgs<string,GameFields> args)

    {

        //This method get triggered when the value of the component get changed.

        var selectedValue = args.Value;

    }

}

Sample link : https://www.syncfusion.com/downloads/support/forum/176572/ze/DDLServer_c5db5182

Query :
I tried using @bind-Value but the effect is the same. I also tried swapping autocomplete for a dropdownlist with search bar but it behaves exactly the same. Models.MongoModels.MongoClientModel class is barely 10-15 strings. Is it possible that the object Models.MongoModels.MongoClientModel is simply too big?

As per the above term , We can assign large data to the AutoComplete component as datasource . But to avoid performance related issues while using numerous data , You can use Virtualization feature i.e. data get loaded on demand from the user.

Virtual Scrolling demo : https://blazor.syncfusion.com/demos/autocomplete/virtualization?theme=fluent

Thanks,

Deepak R.

[Michal]

Hey

Thanks for your reply. Unfortunately switching to ValueChange event didn't help either. I think the issue here is that I have two of those lists using the same source. Also the component contains a Monaco instance which is pretty heavy.

[Sureshkumar P]

Hi Michal,

When using the component TValue property as Class, we ran into the same problem (object type). We update you in two business days (August 17th, 2022).

Regards,

Sureshkumar P

[Sureshkumar P]

Hi Michal,

When we validate the reported issue, you have set the ID attribute value starting with the number. We suggest you use letters instead of numbers when putting the ID attribute value starting character to resolve your faced issue.

To know more about the ID attribute values. Please refer to the below stack overflow documentation: https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html

please find the sample in the attachment:

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

Attachment: DDLServer_27b25feb.zip

[Michal]

OMG you are so totally right! That was the problem, issue is no longer present in my component. Thank you! You're awesome.

[Sureshkumar P]

Michal,

Thanks for your update.

Regards,

Sureshkumar P