Empty the AutoComplete control with select text and delete does not fire ValueChange

[Art Vandelay]

If I empty the control by clicking on the X it fires the ValueChange as expected, but if I empty the control by

1. Select the current text in the control
2. Press Delete to clear the content

Then the ValueChange does not trigger and the bound property holds the "old" value.

                    <div class="form-row">
                        <div class="form-group">
                            <SfAutoComplete ID="NutrientsDropDown"
                                            DataSource="@Nutrients"
                            @bind-Value=@(CreateDto.Name)
                                            TItem="NutrientDto"
                                            TValue="string"
                                            Placeholder="Matvare"
                                            Label
                                            FloatLabelType="FloatLabelType.Always">
                                <AutoCompleteFieldSettings Text="Name" Value="Name"></AutoCompleteFieldSettings>
                                <AutoCompleteEvents TItem="NutrientDto" ValueChange="@OnNutrientsDropDownValueChanged" TValue="string"></AutoCompleteEvents>
                            </SfAutoComplete>
                            <ValidationMessage For="@(() => CreateDto.Name )"></ValidationMessage>
                        </div>

        public void OnNutrientsDropDownValueChanged(ChangeEventArgs<string, NutrientDto> args)
        {
            //add handler code
        }

[Kokila Poovendran]

Hi Art Vandelay,

Thank you for reaching out to us with your concern.

After validating your query, we would like to inform you that the behavior you mentioned is as expected for the AutoComplete component. When you select text in the control and then delete it, the ValueChange event will not be triggered until you focus out of the component. This behavior is by design to prevent triggering the event for intermediate changes.

API link:https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange

[Art Vandelay]

Thanks for your prompt response, Kokila. 

That makes sense, as the autocomplete is bound to my model what would be a recommended way to remove a previously bound property when the user select the text and then deletes it,

I would think this is a common situation, so perhaps 

[Kokila Poovendran]

Hi Art Vandelay,

To resolve this issue where the user selects and deletes the text in the autocomplete control, we recommend using the "onkeydown" event. This event will trigger when the "Delete" key is pressed, allowing you to handle the change in values.

Below is the code snippet that demonstrates the suggested approach:

<EditForm Model="@model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">

                <DataAnnotationsValidator />

                <div>

                    <label class="example-label">Select a game</label>

                    <SfAutoComplete TItem="GameFields" TValue="string" Placeholder="e.g. Basketball" @bind-Value="@model.Text" DataSource="@Games" AllowCustom="false" @onkeydown="@onKeyDownHandler">

                        <AutoCompleteFieldSettings Value="Text" />

                        <AutoCompleteEvents TItem="GameFields" TValue="string" ValueChange="ValueChangeHandler"></AutoCompleteEvents>

                    </SfAutoComplete>

                    <ValidationMessage For="()=>model.Text" />

                </div>

                <div class="submit-btn">

                    <SfButton type="submit"IsPrimary="true">Submit</SfButton>

                </div>

            </EditForm>

 

 

@code {

 

private void onKeyDownHandler(KeyboardEventArgs args)

    {

        if(args.Code == "Delete")

        {

            model.Text = " ";

        }

    }

}

In this code, we have added the "onkeydown" event handler, which will be triggered when the "Delete" key is pressed. Inside the handler, we set the "Text" property of the model to remove the previously bound property.

Attachment: BlazorServerProject_94c11243.zip

[Art Vandelay]

Thanks! That'll do it