I'm using the Profile Menu in a Blazor 8 project from the most excellent FluentUI library, and I've added a custom template to the footer element as I want to add an Icon to that section of the dialog. My render fragment is as follows...
<FooterTemplate><FluentStack VerticalAlignment="@VerticalAlignment.Center"><FluentSpacer /><FluentAnchor part="footer-link" Appearance="@Appearance.Hypertext" Href="#" OnClick="@ShowProfile"><FluentStack VerticalAlignment="@VerticalAlignment.Center"> Settings<FluentIcon Value="@(new Icons.Regular.Size20.Settings())" /> </FluentStack></FluentAnchor></FluentStack></FooterTemplate>This looks fine on screen...
The problem however comes when I click on the settings hyperlink - this calls my code-behind which navigates to another page, but the dialog is still displayed on screen.
I've a feeling this will have something to do with event bubbling as I can see that the profile menu component has an outer div element that handles the on click event @onclick="@(e => PopoverVisible = !PopoverVisible)", and my guess is that in some way my addition of the OnClick handler on the FluentAnchor element has stopped that event from also bubbling up to the outer div, so that could explain why the dialog isn't closing.
I have tried all of these to no avail...
- Setting the Href of the FluentAnchor element to the page I want to navigate to and removing the OnClick call.
- Hooking the OnClick event on the FluentAnchor.
- Hooking the OnFooterLinkClick event on the FluentProfileMenu.
All of these cause the navigation to happen (which I want!) but also they leave the dialog open too, which I want to close.
Anyone got any ideas as to how I could get around this issue? It seems fairly trivial I know, but just one of those things I'd like to iron out. Thanks in advance for any suggestions you may have!.
[UPDATE]
I've found a way to do this - but can't say I'm overly impressed with it.
I've added a reference to the fluent profile menu...
<FluentProfileMenu @ref="_fluentProfileMenu"And in my code I've defined this property...
private FluentProfileMenu? _fluentProfileMenu;And then in my OnClick handler, I close the popup dialog before doing the navigation...
public void ManageAccount(){ var propertyInfo = _fluentProfileMenu? .GetType() .GetProperty("Open", BindingFlags.Instance | BindingFlags.Public); propertyInfo?.SetValue(_fluentProfileMenu, false); NavigationManager.NavigateTo("/Account/Manage");}Note - this is just setting a public property Open to false, however if I try to do this in code I get a BL005 nag, and in my project I have warnings as errors, so just doing _fluentProfileMenu.Open = false won't compile.
That has the desired effect that the menu is closed - but seems like a bit of a faff to me!