fix: FluentProfileMenu child content not displaying when clicked

[martingagne]

🐛 Bug Report

The FluentProfileMenu component in the Fluent UI Blazor library is not displaying the child content when clicked.

💻 Repro or Code Sample

The code can be found in the following GitHub repository: https://github.com/martingagne/fluentblazor-profilemenu

🤔 Expected Behavior

When the FluentProfileMenu is clicked, the child content, which includes the user's name and email, should be displayed.

😯 Current Behavior

The FluentProfileMenu is visible in the UI, but when clicked, the child content does not show.

🌍 Your Environment

OS & Device: Windows 11 on PC
Browser: Firefox, Edge
.NET and Fluent UI Blazor library Version: .NET 8 and Fluent UI Blazor 4.6.1

[vnbaaij]

I don't have time to look at this now.

In the mean time you can compare with the code in de demo site (which is working) which is here in the repo in the examples folder.

[martingagne]

Thank you, Vincent (@vnbaaij)! I'm quite new to Blazor and even newer to Fluent UI. I've dedicated a couple hours to this issue and I'm still not making progress. I've double-checked the Fluent UI setup, so maybe it's something else I’m not seeing. I'll take a little break and revisit it with fresh eyes -- perhaps I'll spot something I missed. There’s no rush on this. Whenever you're able to take a look and share any advice, I would greatly appreciate it. Enjoy your weekend!

[vnbaaij]

Found it. You created the site with all the default settings. So with .NET 8 you then get SSR as the standard render mode.... For the ProfileMenu to work, you need interactivity.
(on purpose not spelling out what you need to do to fix it so you can keep learning stuff 😉. Enjoy your weekend too!)

[gryzorr]

"On purpose not spelling out what you need to do to fix it so you can keep learning stuff"
I'm a beginer in Balzor and Fluent UI so sorry for my questions.
I spent some hours to understand that and It seams that Fluent UI controls can only work in full serverside or clientside rendering mode. Isn't it?
I have also generated app using Your Template but with per Page/Component rendering mode and indeed when FluentProfileMenu is placed in Layout it doesn't work (on Page it works). Unfortunately, it is not enough to add @renderingmode to component itself (beginner's solution).
I have switched to full serverside rendering and now it works but I have strange behavior.
Each time I'm opening menu, page's content is resizing because scrollbars are showing for a moment.
On attached video it blinks only once but it's not true. It blinks every time.
https://github.com/microsoft/fluentui-blazor/assets/77838774/0f8ac5a7-c2d8-4bf8-9efe-4ad7d3eb80e2
By the way. Your Example page is great but too hard to understand at the moment :-).
I will try to use some techniques that You use there in my project.

[vnbaaij]

I spent some hours to understand that and It seams that Fluent UI controls can only work in full serverside or clientside rendering mode. Isn't it?
Most of them render fine in SSR mode but need indeed interactivity to be fully functional. Take for example the DataGrid in our templates on the Weather page. It displays the weather data fine, but you can't sort by clicking on the headers as that code cannot be run without interactivity.