Blazor EditForm Submit handler not called when the form is in a bootstrap modal end the submit button is the modal dismissal command

Question

Let's consider the following page in a client side blazor app:

@page "/test"

<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <EditForm Model="@model" OnSubmit="@SubmitHandler">
                    <div class="form-group d-flex justify-content-between">
                        <label class="col-form-label col-3" for="editDT">Time</label>
                        <InputText bind-Value="@model" id="editDT" Class="form-control" />
                    </div>
                    <button type="submit" class="btn btn-primary" @*data-dismiss="modal"*@>Submit</button>
                </EditForm>
            </div>
        </div>
    </div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>

@functions {
    private string model { get; set; } = "Model";
    private void SubmitHandler()
    {
        Console.WriteLine("Submit");
    }
}

When I click the Open button, the modal appears as expected. Then clicking on the Submit button in the modal, "Submit" gets printed in the browser console, again as expected. But I need also to close the modal when I click Submit so I uncomment the data-dismiss attibute. Now, the modal closes as expected, but the Submit handler is not called anymore (browser console remains empty).

1) Is this the expected behaviour?

2) If yes, is there a way to close the modal in the Submit handler without javascript interop?

3) If not, is there another way to both close the modal and have the Submit handler called when clicking on the Submit button, again without js interop?

Answer 1

Your biggest issue is using bootstrap as is. BS uses it’s own JS to manipulate the DOM, this won’t work with Blazor as Blazor needs to control the DOM. Same as Angular, React or Vue. If something else modifies the DOM then odd things can happen, as you’re finding.

I would suggest swapping to one of the Blazor-fied bootstrap libraries such as BlazorStrap. Or if you’re just after a modal I’ve written one called Blazored.Modal