Filtering Event issue in SFAutoComplete within EditForm

4 Replies
2 Participants
Marked answer

Created by
CA Carl

Platform
Blazor

Platform
Blazor

Control
AutoComplete

Created On
May 14, 2021 01:03 PM UTC

Last Activity On
May 20, 2021 02:13 PM UTC

Want to subscribe?
SIGN IN

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;

<div>

<h3>

Player One

</h3>

</div>

var url = $"{BaseUri}/odata/players";

}

@* <SfButton @onclick="@(e => AddPlayerDialog(e,1))">Add Player</SfButton>

*@ </NoRecordsTemplate>

</AutoCompleteTemplates>

</SfAutoComplete>

</div>

<button class="btn btn-primary" type="submit">Start Match</button>

</div>

</EditForm>

@code {

private SfAutoComplete<string, Player> Player1Obj;

public MatchViewModel matchViewModel = new();

public Query RemoteDataQuery = new Query().Select(new List<string> { "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<WhereFilter>();

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<string> { "Name" }).Take(6).Where(pre);

// query = new Query().Where(pre);

}

else

{

RemoteDataQuery = new Query().Select(new List<string> { "Name" }).Take(6);

// query = new Query().Where("Text", "contains", args.Text,true,true);

}

4 Replies 1 reply marked as answer

BC Berly Christopher Syncfusion Team May 17, 2021 12:59 PM UTC

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

CA Carl May 18, 2021 10:34 PM UTC

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.

BC Berly Christopher Syncfusion Team May 19, 2021 03:23 PM UTC

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 (21^st May 2021). We appreciate your patience until then.

Regards,

Berly B.C

BC Berly Christopher Syncfusion Team May 20, 2021 02:13 PM UTC

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

<EditForm EditContext="@mvmEditContext" OnSubmit="@StartMatch">

<DataAnnotationsValidator />

<ValidationSummary />

<div>

<h3>

Player One

</h3>

</div>

<SfAutoComplete TValue="string" TItem="OrderDetails" Placeholder="Select a Player" Query="@RemoteDataQuery" @bind-Value="@matchViewModel.Player1Name" FloatLabelType="FloatLabelType.Auto" AllowCustom="true">

<SfDataManager Url=https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>

<AutoCompleteFieldSettings Text="CustomerID" Value="CustomerID"></AutoCompleteFieldSettings>

<AutoCompleteEvents Filtering="Filtering" TItem="OrderDetails" TValue="string"></AutoCompleteEvents>

<AutoCompleteTemplates TItem="OrderDetails">

<NoRecordsTemplate>

@* <SfButton @onclick="@(e => AddPlayerDialog(e,1))">Add Player</SfButton>

</NoRecordsTemplate>

</AutoCompleteTemplates>

</SfAutoComplete>

</div>

<button class="btn btn-primary" type="submit">Start Match</button>

</div>

</EditForm>

@code {

private SfAutoComplete<string, OrderDetails> Player1Obj;

public MatchViewModel matchViewModel = new MatchViewModel();

public Query RemoteDataQuery = new Query().Select(new List<string> { "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:

<EditForm Model="@matchViewModel" OnValidSubmit="@StartMatch">

<DataAnnotationsValidator />

<ValidationSummary />

<div>

<h3>

Player One

</h3>

</div>

<SfAutoComplete ID="player1" MinLength="2" @ref="Player1Obj" TValue="string" TItem="OrderDetails" Placeholder="Select a Player" Query="@RemoteDataQuery" @bind-Value="@matchViewModel.Player1Name" FloatLabelType="FloatLabelType.Auto" AllowCustom="false">

<SfDataManager Url=https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>

<AutoCompleteFieldSettings Text="CustomerID" Value="CustomerID"></AutoCompleteFieldSettings>

<AutoCompleteEvents Filtering="Filtering" TItem="OrderDetails" TValue="string"></AutoCompleteEvents>

<AutoCompleteTemplates TItem="OrderDetails">

<NoRecordsTemplate>

@* <SfButton @onclick="@(e => AddPlayerDialog(e,1))">Add Player</SfButton>

</NoRecordsTemplate>

</AutoCompleteTemplates>

</SfAutoComplete>

</div>

<button class="btn btn-primary" type="submit">Start Match</button>

</div>

</EditForm>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Editform_165472_RC5-716074111

Regards,

Berly B.C

Marked as answer

Need More Help?

Get personalized assistance from our support team.

Contact Support

4 Replies
2 Participants
Marked answer
Want to subscribe?
SIGN IN
Created by
CA Carl
Platform
Blazor
Control
AutoComplete
Created On
May 14, 2021 01:03 PM UTC
Last Activity On
May 20, 2021 02:13 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support