Modal: Unable to reset a Modal

[joehudd]

Discussed in https://github.com/vikramlearning/blazorbootstrap/discussions/377

^{Originally posted by joehudd September 22, 2023} I have a Blazor server-side app (.net core 7) using Blazor.Bootstrap 1.10.2.

I am opening my modal with a component as such...

var parameters = new Dictionary<string, object>(); parameters.Add("record", record); parameters.Add("onCloseCallback", EventCallback.Factory.Create<MouseEventArgs>(this, CloseModalAsync)); await modal.ShowAsync<EditRecord>(title: title, parameters: parameters);

I have a button in the component for the modal to close the modal. That button refers to the parent page's CloseModalAsync() that reads...

public async Task CloseModalAsync() { await modal.HideAsync(); }

My issue is the modal is only hidden with the component still in there. This interferes with entity tracking. Furthermore, the modal will not re-initialize if I am opening the modal with the same component. Meaning it stay in the state it was closed.

When I click the X button in the modal header to close the modal the component is removed and the modal will initialize every time I open/show it.

Currently, my workaround to make my button behave like the X button is blow.

public async Task CloseModalAsync() { await modal.ShowAsync(); await modal.HideAsync(); }

By removing the component from the ShowAsync it clears the component from the existing modal freeing up the entity and allowing the modal to behave similar to the X button being clicked. It is just not as clean.

So what I am missing....How can I get my close button to behave the same way as the X button?

[riddlemd]

I'm having a very similar issue to this...

I use a modal to add a user to a list, I use the same modal to edit users in the list. If I call HideAsync() from a callback (my SaveCallback) it saves the user just fine, but it hides the modal client side only and when the modal is opened again (via any call using same modal type) it just shows the modal still containing previous users data (not talking to the server to pickup the new user, not running the OnInitialized or OnInitializedAsync methods server side) -- here's the kicker if I do click save it will save the old users data OVER the user it's supposed to be editing...

Clicking the close button (which from looking at source is just calling HideAsync()...) it behaves like it should and actually reinitialize the component next time the modal is shown.

@joehudd's work around does appear to be a decent work around, but crazy this is still an issue.

[powertec-dan]

I'm having a similar (but slightly different) issue.

In my case, the second invocation of the Modal brings up an empty window with the header and the close X displayed. The content is not shown. I know the inner component is being constructed from debug tracing. It's just not visible.

I've tried the workaround from above, and that works fine except when the user clicks outside the modal and it closes. Then the next invocation shows the empty modal again.

This kind of forces me to use the "UseStaticBackground" property when I would rather not.

Any help appreciated.

EDIT: I should add, that I'm in WebAssembly on net10.0