After setting up a Bootstrap modal, I encountered an issue where the modal wouldn't close upon clicking submit. The problem seems to be arising from having an edit form outside of the modal.
<EditForm Model="newCategoryType" OnValidSubmit="HandleCreate">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="modal fade bd-example-modal-lg" id="AddCategoryType" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add category Type</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="CategoryTypeName">Category Type Name:</label>
<InputText id="CategoryTypeName" class="form-control" @bind-Value="newCategoryType.CategoryTypeName" />
</div>
<div class="form-group">
<label for="CategoryTypeName">Category Type Description:</label>
<InputText id="CategoryTypeDescription" class="form-control" @bind-Value="newCategoryType.CategoryTypeDescription" />
</div>
<div class="form-group">
<label for="CategoryType">Category Type Details:</label>
<InputText id="CategoryTypeDetails" class="form-control" @bind-Value="newCategoryType.CategoryTypeDetails" />
</div>
<div class="form-group">
<label for="IsActive">IsActive:</label>
<InputCheckbox id="IsActive" class="form-control" @bind-Value="newCategoryType.IsActive" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="submit" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</EditForm>
My main concern is getting the modal to close upon clicking submit. Currently, it closes when I click the close button, but not when I submit the form. This issue is causing the backdrop to remain gray and unresponsive. It's worth noting that this setup follows the Blazor format and utilizes a Bootstrap modal design.