search

Blazored / Modal

A powerful and customizable modal implementation for Blazor applications.
https://blazored.github.io/Modal/
MIT License
764 stars 184 forks source link

[Bug] .NET8.0 WASM upgraded from .NET7.0 - Weird Modal behavior #578

Open nmdschultz opened 1 month ago

nmdschultz commented 1 month ago

Describe the bug We recently upgraded our .NET7.0 WASM to .NET8.0 following the steps here: Update a Blazor WebAssembly App. We did not continue the upgrade to a Blazor Web App, so we just did these steps: Update the .NET SDK version in global.json Update the target framework Update package references

Now, our modals are no longer functioning as expected. I have an example in a pastebin below.

See example here: https://pastebin.com/74kzx5Wp

Previously, pressing the "Next"-button would update the modal causing it to instead show Form2. Using debugging I can see that we enter HandleValidModel1SubmitAsync() and that the boolean is updated and StateHasChanged() is called. However, the Modal is never updated. Pressing the button does not actually update the component and change the form shown..

To Reproduce Steps to reproduce the behavior:

  1. Upgrade existing .NET 7.0 WASM Blazor app to .NET 8.0
  2. Enter modal
  3. See that the modal no longer works as expected

Expected behavior I expected the Modals to work as they did previously

Hosting Model (is this issue happening with a certain hosting model?):

nicolaidanekov commented 1 month ago

I managed to fix it. I had to change all our modals, but I made it work.

We always used UseCustomLayout=true. In our custom layouts we then wrapped our content in your FocusTrap.

After the upgrade, this caused a ton of issues. We still needed the FocusTrap abilities, so I disabled UseCustomLayout. I then globally used these settings: <CascadingBlazoredModal AnimationType="@ModalAnimationType.None" ActivateFocusTrap="true" Class="bm-modal" HideHeader="true">

This allowed me to reuse most of our Modal styling - only discarding the outer divs - while retaining the FocusTrap functionality. Overwriting the class allowed us to discard the default modal styling and hiding the header allowed us to keep using our custom headers - which is now just placed within "bm-content".

TLDR; Something has changed in the latest versions - using FocusTrap directly within our CustomLayouts caused the issues.

nicolaidanekov commented 1 month ago

And seems I managed to use two different github accounts. :P