Clear validations when using modal

[jacoch]

Hi @stsrki

I'm using a modal to edit or add new items to a list. Before opening the modal, I either create a new item or set the item to be edited. And I of course clear the validations.

private async Task OpenNewModal()
{
    EditingItem = new();
    await EditValidations.ClearAll();
    await EditModal.Show();
}

private async Task OpenEditModal(SampleModel item)
{
    EditingItem = item;
    await EditValidations.ClearAll();
    await EditModal.Show();
}

Unfortunately, it seems to not work as expected, especially if I clear the validations before showing the modal. If I do it after opening the modal, it's a bit better. But I still can sometime make it fails. And I can see for a short moment the previous validation before being cleared. Is there a way to properly clear the validation before showing the modal?

In my test, it fails all the time if I edit an item, save it, then try to add a new one. The mandatory fields are always showing the required field error although the validation has been cleared. In other cases, it works fine. For example, if I create a new item, try to save to validate or just cancel the modal, then create a new item again. In that case, no validation error appears.

Thanks in adavance for the help.

I've attached a simple test solution.

ModalValidation.zip

[stsrki]

It usually happens because there is a race condition in Blazor between showing the modal and clearing the messages. Remember that the modal is always present in the DOM.

My advice is to clear messages when the modal is closing, not during the show.

eg.

private async Task CloseEditModal()
{
    await EditModal.Hide();
    await EditValidations.ClearAll();
}

[jacoch]

Hi. Thanks for the quick reply. I already tried that, clearing immediately before or after closing the modal. But it doesn't fix the problem. I also tried a lot of other things, even setting an empty model after closing the dialog. But that solution causes other troubles. That's why I tried to ask here. I've not found a clean way of doing it. The best I can do is to clear before showing and again after showing the modal. But in some cases, we can see the validation being cleared when the modal appears.

[jacoch]

I'm currently working on another page and noticed another strange thing, that could cause the trouble with the modal too. I have three fields on that page. No modal, just a simple page. ValidateOnLoad is false. A button let me clear the form. It just does:

EditItem = new();
await EditValidations.ClearAll;

When I click the clear button, all the fields are emptied, but the ones that contained text before being cleared will be displayed with a required error (if they are required of course). It behaves as if the ClearAll function does nothing because a validation is waiting to be displayed.

If I insert a delay between both functions, it works as expected. So my function is now:

EditItem = new();
await Task.Delay(10);
await EditValidations.ClearAll;

Hope it helps.