Autocomplete: input getting validated after OnChanged-event fired

[timmo-waller]

Describe the bug In my application I use the BlazorBootstrap Autocomplete component to search for the name of machines. After I select one of the suggestions, I call the "ResetAsync" method on the autocomplete to clear the input. Somehow the class "modified" is added to my autocomplete input field. Since I extend the bootstrap ".is-valid"-class a green checkmark icon is displayed at the end of the input.

Expected behavior I would expect that after selecting a suggestion from the autocomplete component and calling the "ResetAsync"-method, the class "modified" isn't set on the autocomplete so no checkmark icon is displayed.

Screenshots is-valid extension in *.scss-file

UI before suggestion is selected

UI after suggestion is selected

HTML-Source before suggestion is selected

HTML-Source after suggestion is selected

Versions (please complete the following information):

• BlazorBootstrap: 1.10.5
• Blazor WebAssembly / Server: Server
• .NET Version: .NET8

Sample code <AutoComplete @bind-Value="@EnteredText" TItem="ItemWithIdAndNameViewModel" DataProvider="LoadSuggestionsAsync" PropertyName="@nameof(ItemWithIdAndNameViewModel.Name)" Placeholder="@MaschineListComponentRes.SearchMaschine" OnChanged="Add" @ref="@AutoCompleteReference"/>

private async Task Add(ItemWithIdAndNameViewModel? selectedMaschine) { if (selectedMaschine != null) { SelectedMaschinen.Add(selectedMaschine); await AutoCompleteReference.ResetAsync(); } }

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 121.0.6167.185

[gvreddy04]

@timmo-waller Thank you for using BlazorBootstrap. Were you able to replicate the issue here: https://demos.blazorbootstrap.com/autocomplete#validations. Also please share a screen recording for better understanding.

NOTE: Please do not share any sensitive information.

[timmo-waller]

@gvreddy04 Thank you for the quick reply. I was able to replicate similar behavior in the demo. When I select an item from the suggestions, the "modified"-class is set to the autocomplete input. In the demo this makes sense, because the selected value is set directly to the autocomplete input which makes the field in fact modified.

In my case, I add another readonly input to display the selected value from the suggestions and reset the autocomplete input by calling the "ResetAsync"-method. That's why I would expect, that the "modified" class gets removed from the autocomplete input, since it is reset.

I hope this helps. I will submit a screen recording later.