HTTP Request sent when AutoComplete Field in DataGrid Edit Dialog selected using keyboard input (v. 18.2.46)

[Zhi Yuan]

Hello,

I've encountered the problem as per stated in the title. The problem can be replicated by merging two existing sample code and adding some additional code:

1. Create a DataGrid populated by remote data using sample code from https://blazor.syncfusion.com/documentation/datagrid/data-binding/#binding-with-odata-v4-services. 

2. Copy the following sample code from https://blazor.syncfusion.com/documentation/datagrid/editing/#dialog to allow Dialog Adding:

a. `Toolbar="@(new List<string>() { "Add" })"`

b. `<GridEditSettings AllowAdding="true" Mode="EditMode.Dialog"></GridEditSettings>`

3. Modify the default Dialog. For simplicity, I've only added the AutoComplete Field:

<Template>

    @{

        var order = (context as Order);

    }

    <div>

        <div class="form-row">

            <div class="form-group col-md-6">

                <SfAutoComplete

                    ID="@nameof(Order.CustomerID)"

                    @bind-Value="@(order.CustomerID)"

                    DataSource="@CustomerIDs">

                </SfAutoComplete>

            </div

        </div>

    </div>

</Template>

...

@code{

    ...

    public string[] CustomerIDs = new string[] {"Foo"};

}

4. Perform the following steps:

a. Open DevTools and record Network

b. Click on the DataGrid's "Add" button

c. Type "F" in the AutoComplete Field

d. Press the down button on the keyboard to select "Foo" and press Enter to confirm selection

e. Observe in Network that a HTTP POST request has been sent. This is the same request that would be sent when the "Save" button is clicked.

Expected behavior: HTTP request should not be sent when using keyboard to confirm AutoComplete option.

I've attached an image of the error in the Network tab and the .razor file created from following the above steps. 

Seeking your assistance for this issue, thank you!

Attachment: Foo_7f2b142a.zip

[Rahul Narayanasamy]

Hi Zhi, 

Greetings from Syncfusion. 

      

We have checked the reported problem and we are able to reproduce the reported at our end too. We have confirmed it is a bug and logged the defect report “EndEdit method called while choosing dropdown/autocomplete values using Enter key”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming  bi-weekly release which is expected to be rolled out on or before mid of September, 2020.     

    

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    

    

https://www.syncfusion.com/feedback/16980/endedit-method-called-while-choosing-dropdown-autocomplete-values-using-enter-key 

    

Until then we appreciate your patience.     

  

Regards,  

Rahul 

[Zhi Yuan]

Hello,

I re-ran the code using Syncfusion 18.3.35 and I noticed that this problem has been resolved. Thanks!

However, there's another issue which is related to this problem. I've modified the .razor file that I attached in the post above:

1. Add a new Field to the Dialog

2. Add the `[Required]` Data Annotation to the Property of that new Field added in step 1

Upon repeating the steps that I posted above:

b. Click on the DataGrid's "Add" button

c. Type "F" in the AutoComplete Field

d. Press the down button on the keyboard to select "Foo" and press Enter to confirm selection

An error message appears indicating that the new field is empty and requires user input. This should not be the case as the new Field comes after the AutoComplete Field; it doesn't make sense to prompt the user that he has missed out inputting the data for the Required Field when he has yet to advance to that Field.

I have attached the .razor file created from the above steps and the image showing the error.

Thanks!

Attachment: error_e84b3ddb.zip

[Rahul Narayanasamy]

Hi Zhi,  

Sorry for the inconvenience caused.  

Due to some unforeseen circumstances, we could not include the fix for this issue “EndEdit method called while choosing dropdown/autocomplete values using Enter key” in our latest release Volume 3, 2020 release(18.3.0.35). But we will fix this issue and this will be included in our upcoming bi-weekly release which is expected to be rolled out by the end of October, 2020.  

The reported problem(last reported – validation problem) was occurred due to the same issue reported previously. Once the  above is included, it will be working fine. 

We will update you once the release is rolled out. Until then we appreciate your patience.  

Regards,  

Rahul 

[Vignesh Natarajan]

Hi Zhi, 

 

In Blazor DataGrid component, we used Blazor edit from to render edit form and perform editing operation. We have ensured the similar behavior with autocomplete HTML component inside the Blazor editform (not inside the Grid), when input element focused and on pressing the enter key it automatically trigger submit method of editform. In our Grid source, in submit method of Blazor editform,  we have called endEdit() method. so that when we select the values using enter key it called endEdit method and close the dialog.  

 

This is the default behaviour of EditForm so we cannot able to prevent this. Refer the below code example with default HTML elements and Blazor editform for your reference 

 

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div @onkeydown:stopPropagation="true">
<label>Customer ID</label>
<input @bind="@(exampleModel.Name)" />
</div>
<button type="submit">Submit</button>
</EditForm> 

@code {
private ExampleModel exampleModel = new ExampleModel(); 

private void HandleValidSubmit()
{ 

} 

public class ExampleModel
{
public string Name { get;set; }
}
} 

 

Please get back to us if you have further queries.  

       

Regards, 

Vignesh Natarajan