Filtering Event issue in SFAutoComplete within EditForm

Question

Using SFAutoComplete with a filtering event within EditForm causes the autocomplete field to be reset on each keystroke. Works properly outside of EditForm. Here's a pared down version of the code:@page "/ACTest"@using ScoreBoard.Data.Models;@using Syncfusion.Blazor.Popups;@using Syncfusion.Blazor.Inputs;@using Syncfusion.Blazor.Data;@using Syncfusion.Blazor.DropDowns;@using Syncfusion.Blazor.Buttons;@inject IHttpClientFactory Http;@using System.Text@using System.Text.Json@using Newtonsoft.Json;@inject IConfiguration config;@using Microsoft.Extensions.Configuration;@using System.Net.Http.Json;@using System.ComponentModel.DataAnnotations;

Player One

@{ var url = $"{BaseUri}/odata/players"; } @* Add Player*@

@code { private SfAutoComplete Player1Obj; public MatchViewModel matchViewModel = new(); public Query RemoteDataQuery = new Query().Select(new List { "Name" }).Take(6); private string BaseUri; private EditContext mvmEditContext; private ValidationMessageStore validationMessageStore; public class MatchViewModel { [Required(AllowEmptyStrings = false)] public string TournamentName { get; set; } [Required(AllowEmptyStrings = false)] public string Draw { get; set; } [Required(AllowEmptyStrings = false)] public string Round { get; set; } [Required(AllowEmptyStrings = false)] public string MatchType { get; set; } [Required(AllowEmptyStrings = false)] public string Player1Name { get; set; } [Required(AllowEmptyStrings = false)] public string Player2Name { get; set; } public int PlayerServingFirst { get; set; } } protected override void OnInitialized() { BaseUri = config["apiUrl"]; } private void StartMatch() { } public void Filtering(FilteringEventArgs args) { @* args.PreventDefaultAction = true; PlayerName = args.Text; string[] subs; var pre = new WhereFilter(); var predicate = new List(); if (args.Text.Contains(" ")) { subs = args.Text.Split(' '); foreach (string value in subs) { predicate.Add(new WhereFilter() { Condition = "and", Field = "Text", value = value, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); } pre = WhereFilter.And(predicate); RemoteDataQuery = new Query().Select(new List { "Name" }).Take(6).Where(pre); // query = new Query().Where(pre); } else { RemoteDataQuery = new Query().Select(new List { "Name" }).Take(6); // query = new Query().Where("Text", "contains", args.Text,true,true); } *@ }}

Berly Christopher · Accepted Answer

Hi Carl, Thanks for the patience. We have validated the issue and you have bound the Model and EditContext property in EditForm component, so the value will be reset to input element. In blazor, assigning to either an EditForm.Model or an EditForm.EditContext can bind a form to data. https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#binding-a-form Please find the modified code snippet. Using EditContext

Player One

@* Add Player *@

@code { private SfAutoComplete Player1Obj; public MatchViewModel matchViewModel = new MatchViewModel(); public Query RemoteDataQuery = new Query().Select(new List { "CustomerID" }).Take(6); private string BaseUri; private EditContext mvmEditContext; private ValidationMessageStore validationMessageStore; public class MatchViewModel { [Required(AllowEmptyStrings = false)] public string TournamentName { get; set; } [Required(AllowEmptyStrings = false)] public string Draw { get; set; } [Required(AllowEmptyStrings = false)] public string Round { get; set; } [Required(AllowEmptyStrings = false)] public string MatchType { get; set; } [Required(AllowEmptyStrings = false)] public string Player1Name { get; set; } [Required(AllowEmptyStrings = false)] public string Player2Name { get; set; } public int PlayerServingFirst { get; set; } } protected override void OnInitialized() { // BaseUri = config["apiUrl"]; mvmEditContext = new(matchViewModel); } } Using EditModel Model:

Player One

@* Add Player *@

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Editform_165472_RC5-716074111 Regards, Berly B.C

Berly Christopher · Answer

Hi Carl, 
  
Greetings from Syncfusion support. 
  
We have checked the reported issue by shared code snippet. Unfortunately, the reported issue is does not occurred at our end. For your convenience, we have prepared the sample and attached it below. 
  
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server_165472-2092328999  
  
Also, please share the below details that will help us to check and proceed further from our end. 
  
1.       Syncfusion product version 
2.       Which keystroke cause the reported issue 
3.       Video demonstration for the reported issue.  
4.       Modify the attached sample with the reported issue. 
5.       Have you affected the bind-value variable in the application? 
  
Regards, 
Berly B.C

Carl · Answer

It looks like this is an issue when targeting netframework5.0.  Changing the target framework to 5.0 in the sample application causes the issue I described to appear in the sample application.

Berly Christopher · Answer

Hi Carl, 
  
Thanks for sharing enough information to us.  
  
We were able to reproduce the reported issue. So, we will validate and update the further details in two business days (21st May 2021). We appreciate your patience until then. 
  
Regards, 
Berly B.C