fix: Double click needed for expanding/collapsing child elements in FluentNavGroup when prerendering is turned off

[emetrix]

🐛 Bug Report

In a Blazor SSR project with PreRendering turned off when I first click on a FluentNavGroup Expand Icon the subitems are expanded or collapsed as they should. But when I then click on the FluentNavGroup Title Text a short flickering occurs and the subitems are not expanded nor collapsed. The displaying or hiding of the subitems occurs correctly when I click on the Title a second time.

💻 Repro or Code Sample

Turn off prerendering for HeadOutlet and Routes:

@rendermode="new InteractiveServerRenderMode(prerender: false)

1) Click the expand icon

2) Child items are expanded

3) Click the Title Text

4) A flickering occurs but child item are NOT being collapsed

5) Click the Title Text a second time

6) Now the child items are collapsed

This also happens vice versa: When I collapse sub items by the expand icon two clicks on the title text are neccessary to expand the sub items again...

When Blazor Server pre-rendering is turned on it works as expected. But due to different circumstances I can't/don't want to use pre-rendering in my project.

🤔 Expected Behavior

Expanding / Collapsing child items should be done with one click.

😯 Current Behavior

see bug description

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: Windows 11 on PC
• Browser Microsoft Edge
• .NET 8.0.4 and Fluent UI Blazor library Version 4.7.2

[vnbaaij]

I can't reproduce it. Please supply a ready-to-run repo sample or more refined steps on how to reproduce.

For reproducing, I created a new project based on our template with interactivity render mode=server and interactivity location set to global. I added the rendermode change you supplied and added a group with items to the nav menu.

[emetrix]

Thank you Vincent, please see the sample "https://github.com/emetrix/Samples.BlazorFluentUI-FluentNavGroup". As far as I remember I only modified the files App.razor (for rendermode) and NavMenu.razor (for adding FluentNavGroup with subitems).

I hope that makes it possible to reproduce the issue. Otherwise please let me know...

[vnbaaij]

We are reverting this fix for the next release (4.9.0) as there are too many unwanted side effects.

As explained in the PR mentioned above, this issue can still easily be resolved by setting the Data parameter of the FluentNavMenu component to a non-null value:

 Data="@("no-pagescript")

[emetrix]

Hi Vincent, do you think a fix will be possible in one of the next releases or is the mentioned workaround a permanent one ?

[vnbaaij]

I'm guessing the workaround will be permanent.

There are not that many cases where prerendering is being used while the effort we need to take to solve this in a good and solid way is pretty high.