I want to create a dialog that contains a form that gets updated with success message or errors after submit, but it should not automatically get closed nor should the page reload.
The issue is that enhanced loading does not play nicely with dialogs and forms. I thought that Blazor would just update the form DOM and not touch the dialog outside the form, but after submit the dialog gets closed and the page becomes unresponsive (as if the modal was still open but invisible).
As far as I understand, dialogs should not get automatically closed if the method is NOT dialog on the form, so I'm guessing the issue here is the enhanced loading...
<dialog id="emailModal" class="modal modal-bottom sm:modal-middle"><div class="modal-box"><button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" type="button" onclick="emailModal.close()">✕</button><EditForm id="email-form" Model="Model" FormName="EmailForm" Enhance OnValidSubmit="HandleValidEmailSubmit" OnInvalidSubmit="HandleInvalidEmailSubmit"><div><label for="emailField" class="label">Email</label><InputText @bind-Value="Model!.Email" @attributes="EmailFieldAttributes" type="email" id="emailField" autocomplete="email" title="Please enter a valid email (e.g. name@example.com)." placeholder="Email" required maxlength="@Constants.EmailMaxLength" class="input validator w-full"/><div class="mt-1 min-h-5"><ValidationMessage For="@(() => Model!.Email)" class="text-error text-sm mt-1"/></div></div><div class="modal-action"><button type="submit" id="submit-email-btn" class="btn btn-primary"> Send!</button></div></EditForm></div></dialog>I was able to stop the dialog from closing by moving the form outside of the dialog, then wrapping the dialog with <div data-permanent> but obviously then the contents become static...
It does work if I post the form and update the DOM by hand in JavaScript, but I'd rather not write my own enhanced loading logic...