Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nmdschultz opened this issue May 14, 2024 · 2 comments
Open

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

nmdschultz opened this issue May 14, 2024 · 2 comments
Labels
Bug Something isn't working Triage Issue needs to be triaged

Comments

@nmdschultz
Copy link

nmdschultz commented May 14, 2024

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?):

  • Blazor WebAssembly
@nmdschultz nmdschultz added Bug Something isn't working Triage Issue needs to be triaged labels May 14, 2024
@nicolaidanekov
Copy link

nicolaidanekov commented May 29, 2024

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Triage Issue needs to be triaged
Projects
None yet
Development

No branches or pull requests

2 participants