chanan / BlazorStrap

Bootstrap 4 Components for Blazor Framework
https://blazorstrap.io
The Unlicense
910 stars 156 forks source link

Issue: Modals Called From Nested Components don't Switch Properly #565

Closed jwyza-pi closed 1 year ago

jwyza-pi commented 1 year ago

I have a scenario were I have a modal that I open via dropdown. Within this modal is a component with the ability to open another modal. When Clicking the button on the modal inside of the other modal, it doesn't switch, it just closes the original modal. I think this is because the original modal is the "anchor" of the child modal and when it switches to the child it removes the original from the DOM?

If that's the case, is there a way to have it just hide the original modal without destroying it? If that's not the case, then I'm not sure what's happening. 🤔

This is slightly stripped down to remove some of the actual functionality, but the general premise remains.

Main Component:

@* other content  *@
<BSDropdown>
      <Toggler><BSToggle IsButton="true" Color="BSColor.Secondary" >Actions</BSToggle></Toggler>
      <Content>
          <BSDropdownItem OnClick="_modalMove.ShowAsync">Do Action</BSDropdownItem>
      </Content>
  </BSDropdown>
@* other content  *@
    <BSModal DataId="modalMove" @ref="_modalMove" Size="Size.Large" IsStaticBackdrop="true">
        <Content>
            <MoveComponent />
        </Content>
    </BSModal>
@code {
    BSModal _modalMove = null!;
}

MoveComponent:

@* other content  *@
<SearchWidgetComponent />
@* other content  *@

SearchWidgetComponent:

<BSModal DataId="modalSearch" @ref="_modal" Size="Size.ExtraLarge">
    <Content>
        <SearchComponent OnCancel="_modal.HideAsync"></SearchComponent>
    </Content>
</BSModal>

<BSLabel>@SearchReturnType</BSLabel>
<BSInputGroup>
    <BSInput InputType="InputType.Text" @bind-Value="SelectedThing" />
    @* As soon as this button is clicked, the original modal closes and this modal never opens *@
    <BSButton Color="BSColor.Primary" Target="modalSearch"><i class="bi bi-search"></i></BSButton>
</BSInputGroup>

@code {
    BSModal _modal = null!;
}

image

When the button is pressed, you can see it briefly start to show the fade out/ fade in of the 2nd much larger modal, but then both are gone:

image

jwyza-pi commented 1 year ago

Turns out yes, it's that the previous modal goes out of scope and seems to break when another modal is loaded. Worked around it, so can close this.