microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.23k stars 294 forks source link

fix: AppBar shows active menu apps for onClick with `href="@(null)"` #1974

Closed StephenOTT closed 2 weeks ago

StephenOTT commented 2 weeks ago

🐛 Bug Report

Based on the docs for AppBar, it would seem to indicate that using Href="@(null)" will let you use the OnClick function.

But doing this on the main page of a app where there is no path, other than the domain, causes the href=null "apps" to show as active.

image

💻 Repro or Code Sample

Use the demo app bar (https://www.fluentui-blazor.net/AppBar#withonclickevent) on a / page:

such as

@page "/"
@inject IDialogService DialogService

<PageTitle>Home</PageTitle>

<FluentStack Orientation="Orientation.Vertical" Style="height: 330px;">
    <FluentAppBar Style="height: 100%;">
        <FluentAppBarItem Href="/"
                          Match="NavLinkMatch.All"
                          IconRest="HomeIcon()"
                          IconActive="HomeIcon(active: true)"
                          Text="Home"
                          OnClick="HandleOnClick" />
        <FluentAppBarItem Href="/AppBar"
                          IconRest="AppBarIcon()"
                          IconActive="AppBarIcon(active: true)"
                          Text="AppBar"
                          OnClick="HandleOnClick" />
        <FluentAppBarItem Href="@(null)"
                          IconRest="WhatsNewIcon()"
                          IconActive="WhatsNewIcon(active: true)"
                          Text="What's New'"
                          OnClick="ShowSuccessAsync" />
        <FluentAppBarItem Href="@(null)"
                          IconRest="IconsIcon()"
                          IconActive="IconsIcon(active: true)"
                          Text="Icons"
                          OnClick="ShowWarningAsync" />
        <FluentAppBarItem Href="/Dialog"
                          IconRest="DialogIcon()"
                          IconActive="DialogIcon(active: true)"
                          Text="Dialog"
                          OnClick="HandleOnClick" />
    </FluentAppBar>
</FluentStack>

...

🤔 Expected Behavior

using the null for href should not activate the "app".


on a related note, is there a way through runtime code to set the active/inactive status of a app item?

dvoituron commented 2 weeks ago

@vnbaaij The Href property could be "not required" and "nullable". What do you think?

[Parameter]
public required string? Href { get; set; }
vnbaaij commented 2 weeks ago

@vnbaaij The Href property could be "not required" and "nullable". What do you think?

[Parameter]
public required string? Href { get; set; }

Yes, we can do that. It was this way when we adopted from Aspire but think it is better to change it (and it still works if you do specify a null value).

Also have a nice fix for the reported issue. PR incoming...