SfButton triggers twice on Enter in EditForm

[Hendrik Thormann]

Hi, i show an EditForm in a SfDialog. The Submit Button (SfButton) sits in the footer of the dialog. If i hit Enter key in any InputText component the ValidSubmitHandler calls an EventCallback and closes the dialog. But the EventCallback is called twice. Are there errors from my side or is it a "hidden feature" (bug?)

Code (head) for EditForm is:

<EditForm id="editOrderDialogId" Model="_orderForUpdateDto" OnValidSubmit="ValidSubmitHandler">

Code (SfButton) is:

<SfButton class="me-1" IsPrimary="true" type="submit" form="editOrderDialogId">Speichern</SfButton> 

EventCallback is:

[Parameter, EditorRequired] public EventCallback<OrderForUpdateDto> DialogResultHandler { get; set; }

and

private async Task ValidSubmitHandler()
{
    await DialogResultHandler.InvokeAsync(_orderForUpdateDto);
    await HideAsync();
}

Thanks in advance

[YuvanShankar Arunagiri]

Hi Hendrik,

We are validating your query and will update you the details on or before 5th October 2022.

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Hendrik,

We have checked your reported query and prepared the sample based on your requirement. Your reported issue can be resolved by setting button type to the SfButton instead of Submit type. please check the code below,

Code snippet:

<SfButton @onclick="@OnClicked">Open Modal Dialog</SfButton>

<SfDialog @bind-Visible="@IsVisible" Width="300px" ShowCloseIcon="true" IsModal="true" Header="Dialog Form validation">      

    <ChildContent>

        <EditForm Model="@exampleModel" OnValidSubmit="HandleValidSubmit">

            <div style="padding: 10px">

                <h5>Name: </h5>

                <InputText id="name" @bind-Value="exampleModel.Name" />

                <DataAnnotationsValidator />

                <ValidationSummary Model="exampleModel.Name" />

                <br />

            </div>

            <div class="e-footer-content">              

                <SfButton class="e-btn e-primary e-flat" @onclick="@OnClick" type="button">Submit</SfButton>

            </div>

        </EditForm>

    </ChildContent>

</SfDialog>

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A