EditForm - How to disable Enter key from triggering form submission

[TPIvan]

I am using EditForm in Blazor and I have a complex form with multiple input components. I want to prevent the form from being submitted when the user presses the Enter key, as this can cause unwanted or incomplete submissions. This is especially problematic with HxInputTags (#585) or HxAutosuggest (#584), where the user may want to use the Enter key to confirm their input.

I have found this StackOverflow discussion EditForm - How can I prevent submit on pressing enter key addresses this issue, but I am not sure which solution is the best or the most recommended. Some of the possible solutions are:

• Using JavaScript to intercept the keydown event and prevent its default action.
• Using a custom component that inherits from EditForm and overrides the OnSubmit method.
• Using a hidden submit button that is disabled by default.
• Using a custom attribute that prevents the form submission if the Enter key is pressed.

I suppose that this is a common problem and you may have already solved it in some way.
I would appreciate it if you could advise me on which solution is the most suitable, or if there is any other way to achieve this functionality. Thank you for your help.

[hakenr]

Hello, we are using the JavaScript to intercept the keydown event in some scenarios (HxInputTags, HxAutosuggest, HxSearchBox, see our source code).

...this does not seem to relate to our components directly, therefor I'm closing this issue and moving it to discussions. If you feel there is something specific we should do on our side (in addition to those two very specific issues you filled under #584 and #585), feel free to create a ticket.

[TPIvan]

I understand that you intercept the keydown event on some components and don't take into account whether the user presses enter on e.g. a textbox and submits the form by accident.
Is that correct?

[hakenr]

From the components point of view - we don't want to override the specification how the standard forms in browser behave. Enter in input means "submit form" and we do not want to change this within our components unless it collides with some action inside the components itself (e.g. selecting a suggested item).

From the application developer point of view (using our components in our projects) - we usually use the separate HxButton outside the form to execute the action which prevents the form to be accidentally submitted. There is no strict rule for this, it usually comes from the HxOffcanvas setup where the FooterTemplate contains the button and BodyTemplate the form.

[TPIvan]

From you answer I understand that your general practice is something like following code

   <EditForm @ref="form" id="MyID" Model="exampleModel" OnValidSubmit="HandleValidSubmit">

        <HxInputNumber @bind-Value="selectedEmployeeId" Label="Test" />
        <HxInputNumber @bind-Value="selectedEmployeeId" Label="Test2" />

        <p class="mt-3">Selected employee ID: @selectedEmployeeId</p>

    </EditForm>

    <HxButton Text="submit" Color="ThemeColor.Primary" OnClick="SubmitFormExternally" />


    @code {
        EditForm? form;
        EditContext _editContext;
        ExampleModel exampleModel = new();
        int? selectedEmployeeId = 1;

        private void HandleValidSubmit()
        {
            System.Diagnostics.Debugger.Break();
        }


        protected override void OnInitialized()
        {
            _editContext = new EditContext(exampleModel);
        }

        async Task SubmitFormExternally()
        {
            if (_editContext.Validate())
                await form.OnValidSubmit.InvokeAsync();
            else
                await form.OnInvalidSubmit.InvokeAsync();
        }


        private class ExampleModel { }
    }

Am I correct?

[hakenr]

No, see this showcase project:

• https://github.com/mensagymnazium/IntranetGen3/blob/master/Web.Client/Pages/Admin/TeacherEdit.razor
  • See the EditContext + OnValidClick usage on <SaveButton /> (interchangeable with HxButton, just a custom visual)
• https://github.com/mensagymnazium/IntranetGen3/blob/master/Web.Client/Pages/Admin/TeacherEdit.razor.cs
  • code-behind, nothing special, just the editContext has to be created manually

[TPIvan]

Thank you very much for your help. I finally understand it now. It took me a long time to grasp the concept. It might be helpful to mention this issue in the documentation for future reference.