problem opening the modal the 2nd time

[franciscojml]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

The values ​​entered for some fields in the Advanced Search form are being erased when the modal is opened for the second time.

After running several tests to determine the cause, I discovered the following behavior:

Test 1: UNCOMMENTED -> await loadReportAttachments();
In the OnInitializedAsync() method on line 104 -> "await loadReportAttachments();" of the Demo.razor class
When I run the solution, I open the Advanced Search modal for the first time, select the values ​​for all the form fields, then press the "Search" button and reopen Advanced Search.
The selected values ​​for the "Cascader root," "Multiselect," and "SubType Person" fields are erased.
Test 2: COMMENTED -> await loadReportAttachments();
In the OnInitializedAsync() method on line 104 -> "await cargaAnexosRelatorios();" of the Demo.razor class, I leave this line commented out.

When I run the solution, I open the Advanced Search modal for the first time, select the values ​​for all the form fields, then press the "Search" button and open Advanced Search again.

The selected values ​​for the "Cascader root," "Multiselect," and "SubType Person" fields remain, thus demonstrating the correct behavior.

I emphasize that the "await cargaAnexosRelatorios();" method makes calls to external APIs.

Error.mp4

Expected Behavior

I fill in the advanced search fields and click search, I open the advanced search screen again and the fields that had been selected remain with the selected values.

Interactive render mode

Interactive Server (Interactive server-side rendering (interactive SSR) using Blazor Server)

Steps To Reproduce

https://github.com/franciscojml/ArgoZhang_BootstrapBlazorApp

1. Click the Advanced Search button
2. Select values ​​for the form fields
3. Click the Search button
4. Click the Advanced Search button
5. Verify that the previously entered values ​​are selected

Exceptions (if any)

No response

.NET Version

NET9.0

Anything else?

No response

[bb-auto]

@franciscojml Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[ArgoZhang]

@franciscojml Hi. thank you for contact us. could you give this project a star?

Solution 1

Demo.razor

protected override async Task OnInitializedAsync()
{
    Items = Foo.GenerateFoo(Localizer);

    Items1 = GenerateItems();
    await carregarItensCascade();        
    
    await carregarTipoPessoa();
    
    await carregarAnexosRelatorios();
}

move await carregarAnexosRelatorios(); to the end block.

Solution 2

refactor MultiSelect Cascader support null Items in first render. (will next release)

Solution 3

add condition

Demo.razor

<div class="col-12 col-sm-4">
    @if (Items1 != null)
    {
        <MultiSelect Items="@Items1" @bind-Value="@Context.ValueMultiselect" IsPopover="true" ShowSearch="true" ShowToolbar="true" ShowLabel="true" DisplayText="Multiselect"></MultiSelect>
    }
</div>

[franciscojml]

Thank you for your feedback and help.

Applying Solution 1, the problem is indeed resolved because there is only one method for calling external APIs. The problem continues to occur if I add more methods with multiple external API calls.

The behavior I describe (loss of search field values ​​when the modal is opened a second time) suggests a component lifecycle or data initialization issue, especially since the error occurs when the loadAnexosRelatorios() method is executed.

Based on the Demo.razor code, the most likely cause for the loss of Cascader root, Multiselect, and SubType Person field values ​​when the modal is opened a second time is the resetting of the data or items that feed these components after the first search.

The fact that OnInitializedAsync() is executed every time the advanced search modal is opened means that the Demo.razor component (which contains the form) is being discarded and recreated each time it is opened.

If the Demo.razor component is recreated every time the modal is opened, executing OnInitializedAsync will reset the data.

The original issue with Cascader and Multiselect (when loadAnexosRelatorios() was first) was likely a side effect of an asynchronous race condition in a component that was being recreated.

How can we resolve this issue?

[ArgoZhang]

@franciscojml thank you for the feedback.

MultiSelect

had fixed by #6924. please try v9.11.3-beta02.

Cascader

WIP

[ArgoZhang]

@franciscojml hi, sorry for the delay reply. please try 9.11.3-beta05 or merge the PR your shared repo.

could you give this project a star?