blazorbootstrap icon indicating copy to clipboard operation
blazorbootstrap copied to clipboard

Modal: Unable to reset a Modal

Open joehudd opened this issue 8 months ago • 0 comments

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?

joehudd avatar Oct 06 '23 19:10 joehudd