fix: messages not auto cleared after navigation in FluentMessageBarProvider

[markoweb2]

🐛 Bug Report

Even though <FluentMessageBarProvider ClearAfterNavigation="true" /> is set, messages are not cleared on navigation.

💻 Repro or Code Sample

Default Visual Studio Blazor Web App project.

MainLayout.razor

    <main>
        <div class="top-row px-4">

        </div>

        <article class="content px-4">
            <FluentMessageBarProvider ClearAfterNavigation="true" />
            @Body
        </article>
    </main>

On the home page in a button click handler I have:
MessageService.ShowMessageBar("just some info");

Navigating to other pages does not do what ClearAfterNavigation="true" states it should do.

🤔 Expected Behavior

I would expect messages to dissapear after navigating.

😯 Current Behavior

🔦 Context

Just want to show a message on one page, and if the user goes to another page, the message should dissapear.
Documentation is not very clear on this topic.

Looking at the docs, the Section parameter is also confusing. If you only have one FluentMessageBarProvider entity for you entire project, sitting at MainLayout.razor, then what is the purpose of Section filtering out messages?

• Is the idea here, that you bind a parameter to Section and say with a button click, change it's value and now different messages get shown?
• Or is the idea that you place a FluentMessageBarProvider to every page, give each a different section, and when in your background task/service a message needs to be shown, you tag it with a Section value and it automatically bubbles up to the correct page?

I bring this up, because I wonder if ClearAfterNavigation also ties in with having to create FluentMessageBarProvider-s on every page (not one global singleton in MainLayout like the documentation suggests). Then if ClearAfterNavigation="true" is set, you navigate away and come back, then that specific FluentMessageBarProvider instance on that page will have cleared its messages...

🌍 Your Environment

• OS = Windows
• Browser = Google Chrome
• .NET and Fluent UI Blazor library Version = 8.0.10 and 4.10.2
• Visual Studio 2022 (17.11.5)

[vnbaaij]

For a quick code only snswer, I would advise you to take a look at the code for the demo site here in the repo in the examples folder.

[markoweb2]

Digging around through the source code, I finally found, that you have to pass in ClearAfterNavigation as on option to MessageService.ShowMessageBar()

This works, with FluentMessageBarProvider still in MainLayout.razor:
MessageService.ShowMessageBar(options => { options.Title = "just some info"; options.ClearAfterNavigation = true; });

So it's not a bug, just poor documentation.

The ClearAfterNavigation property on FluentMessageBarProvider does nothing in this context. Not really sure what that property is for. Would be nice if the documentation would specify, when to use that property on FluentMessageBarProvider vs passing it an as an option.

Also, on the documentation page, at the bottom where all properties and methods are listed, that property is shown only for FluentMessageBarProvider. Documentation is missing the MessageOptions class altogether.

Because the documentation does not talk about ClearAfterNavigation at all, then unless you spot its usage in one of the examples, in the long lines of code, you are going to miss out on required knowledge about it.

I would also advise to expand the documentation in regards to the Section property. Give more details about the scenario where it's intended use lies. The two bullet points I gave are a good starting point

[dvoituron]

The FluentMessageBarProvider.ClearAfterNavigation should be the default value when using the Service.ShowMessageBar.
So I think we need to update this part of the code to use this property correctly.

And we probably need to add some extra documentation about this feature :-)