My experience using Microsoft.FluentUI

[MarvinKlein1508]

Hey everyone,

As suggested by @vnbaaij, I'm creating this discussion to share my thoughts on some bottlenecks of this library. You might read many negative points in this thread, but I can assure you that I enjoy using this library a lot. The areas I discuss are those that, in my opinion, could benefit significantly from certain improvements.

I have not used all of the components extensively, but I believe I have a good understanding of the ones I use. I also try to provide comparison code from my earlier implementations, which mostly rely on pure HTML & Blazor.

FluentSelect

This is the component to display dropdown menus. In basic Blazor, I would implement this like this:

<label>Select Object</label>
<InputSelect @bind-Value="Input.MyEnum">
    <option value="">--Select</option> <-- This is for null -->
    @foreach(var item in Items)
    {
        <option value="@item.Id">@item.Name</item>
    }
</InputSelect>

Or what I do most of the time is selecting an enum like this:

<label>Select Object</label>
<InputSelect @bind-Value="Input.MyEnum">
    @foreach(var item in Enum.GetValues<MyEnum>())
    {
        <option value="@item">@item</item>
    }
</InputSelect>

Using the FluentUI equivalent is much harder compared to vanilla because I can only bind strings or objects to it. Let's translate my examples over to FluentUI.

<FluentSelect TOption="MyItem" Label="Select object" Width="100%;">
    <FluentOption Value="null" Selected="@(Input.Id is null)" OnSelect="(val) => Input.Id = null">--- Select ---</FluentOption>
    @foreach (var item in Items)
    {
        <FluentOption TOption="MyItem" Value="@item.Id.ToString()" Selected="@(Input.Id == item.Id)" OnSelect="(val) => Input.Id = item.Id">@item.Name</FluentOption>
    }
</FluentSelect>

This would be the example for the enum:

 <FluentSelect TOption="Versendungsart" Label="Select object" Width="100%;">
     <FluentOption Value="null" Selected="@(Input.MyEnum is null)" OnSelect="(val) => Input.MyEnum = null">--- Select ---</FluentOption>
     @foreach (var item in Enum.GetValues<MyEnum>())
     {
         <FluentOption TOption="MyEnum" Value="@item.ToString()" Selected="@(Input.MyEnum == item)" OnSelect="(val) => Input.MyEnum = item">@item</FluentOption>
     }
 </FluentSelect>

The biggest pain here is the requirement of either binding to a string or an object. Most of the time, I just want to bind to some ints or enums. This component would benefit a lot if it allowed for generic binding like InputSelect.

FluentAutoComplete

I'm using this component to allow the user to search within a large number of objects. It's a good component but has some downsides. Implementing just one item is kind of difficult.

Take this implementation, for example. This is used to search for one cost center within the database. The selected ID will then be assigned to my object.

<FluentAutocomplete TOption="CostCenter"
                    AutoComplete="off"
                    Id="invest-cost-center"
                    Label="Cost center"
                    Class="w-100"
                    Placeholder="Number or name"
                    OnOptionsSearch="@OnSearchCostCenterAsync"
                    MaximumSelectedOptions="1"
                    OptionText="@(item => $"{item.Number} - {item.Name}" )"
                    @bind-SelectedOptions="CostCenterAutocomplete"
                    @bind-SelectedOptions:after="OnCostCenterChanged" />

@code {
    private IEnumerable<CostCenter> CostCenterAutocomplete { get; set; } = [];
    private CostCenter? _costCenter;

    private async Task OnSearchCostCenterAsync(OptionsSearchEventArgs<CostCenter> e)
    {
        var filter = new CostCenterFilter
        {
            SearchPhrase = e.Text
        };

        var results = await costCenterService.GetAsync(filter);
        e.Items = allCountries.AsEnumerable();
    }
    
    private void OnCostCenterChanged()
    {
        if (Input is null)
        {
            return;
        }

        _costCenter = CostCenterAutocomplete.FirstOrDefault();
        if (_costCenter is null)
        {
            Input.CostCenterId = null;
        }
        else
        {
            Input.CostCenterId = _costCenter.CostCenterId;
        }
    }
}

Sadly, there is no vanilla option to do search with vanilla Blazor components (as far as I know). What I've done here is used an InputSelect instead and displayed all items within it, fetching the item from memory in the ValueChanged event.

Also, I cannot bind to List as the component explicitly wants an IEnumerable. Because of this, I often end up doing boilerplate code to cast the instances around.

Dialogs

I must admit that I have not used this component as much. But whenever I need it, the amount of work required to achieve what I want is enormous.

In my opinion, the biggest weakness of this component is that it does not support parameters at all. Let's consider a very simple example. Let's say I have an object called User. This object consists of two properties, Name and Email. Now, I want to display this information in a dialog and want only certain users to be able to modify the Email. This is not possible right now. The only three ways I've found to achieve this are:

1. Create another property ShowEmail in the object (which I don't want to do since the object should always represent just the properties from my database row)
2. Create custom DialogParameters which need to be cast in the component itself to the corresponding type (just no)
3. Create a custom modal

I went with option 3, but this loses all the advantages of the DialogService because I need to create a new Modal for everything I want to display:

<FluentDialog Class="@Class" @ref="_dialog" @bind-Hidden="@Hidden" aria-label="Simple dialog" Modal="true" TrapFocus="true" PreventScroll="true" @ondialogdismiss="OnDismiss">
    <FluentDialogHeader ShowDismiss="ShowDismiss" Visible="ShowHeader">
        <FluentStack VerticalAlignment="VerticalAlignment.Center">
            <FluentIcon Value="@Icon" />
            <FluentLabel Typo="Typography.PaneHeader">
                @Title
            </FluentLabel>
        </FluentStack>
    </FluentDialogHeader>

    <FluentDialogBody Style="overflow-y: auto;">
        @if (!Hidden)
        {
            @ChildContent
        }
    </FluentDialogBody>

    <FluentDialogFooter Visible="ShowFooter" Class="justify-content-end">

        <FluentButton Appearance="Appearance.Accent" Autofocus="true" @onclick="Hide">Close</FluentButton>

    </FluentDialogFooter>

</FluentDialog>


@code {
    private FluentDialog _dialog = default!;

    private bool Hidden { get; set; } = true;

    [Parameter]
    public bool ShowFooter { get; set; } = true;
    [Parameter]
    public bool ShowHeader { get; set; } = true;
    [Parameter]
    public bool ShowDismiss { get; set; } = true;


    [Parameter]
    public string Class { get; set; } = "modal-xl";

    [Parameter]
    public string Title { get; set; } = string.Empty;
    [Parameter]
    public Icon Icon { get; set; } = new Icons.Regular.Size24.WindowApps();
    [Parameter]
    public RenderFragment ChildContent { get; set; } = default!;

    public void Show()
    {
        _dialog.Show();
    }

    public void Hide()
    {
        _dialog.Hide();
    }

    private void OnDismiss(DialogEventArgs args)
    {
        if (args is not null && args.Reason is not null && args.Reason == "dismiss")
        {
            _dialog.Hide();
        }
    }
}

Then I can open it like this:

<Modal @ref="_supplierModal" Title="Search supplier" Class="modal-fullscreen">
    <SupplierSearch OnItemSelected="SupplierSelected" />
</Modal>

It would be really cool if I could pass parameters to the modal like this:
https://demos.blazorbootstrap.com/modals#dynamic-component-as-modal

Another big weakness is that they are not scaling with the content. Sure, I can assign a width in percentages, but this will be used on all devices then. I want the modal to be larger on larger displays. In Bootstrap, this works automatically. An addition of a fullscreen modal would be nice as well. Right now, I create fullscreen modals with a custom CSS class that gets applied to my component.

I often run into some pixel issues with dialogs where I get additional vertical or horizontal scrollbars within and outside the dialog for some reason. That's why I don't use the Grid or StackPanel in it at all. Instead, I'm using default Bootstrap row and col classes, which do the trick for me.

All of this also applies to the confirm dialog. Here, I just don't understand why I cannot toggle the background shadow for them.

FluentGrid & FluentStack

As I've mentioned before, I often get some scrollbars in my container for some reason. That's why I don't use these two components at all.

The only thing I wish for here would be if I could somehow revert the order of items on smaller screen sizes.

Icons

Adding icons to any component is always a headache for me because I just cannot remember the syntax for it.

IconStart="@(new Icons.Regular.Size20.Add().WithColor("#fff"))"

It also doesn't help that the documentation allows copying it to the clipboard like this:

<FluentIcon Value="@(new Icons.Regular.Size20.Add())" />

FluentNavMenu

I really like this component. It's easy to use and looks pretty good. The only thing I need here is that it should remember the state of expanded objects because many of my users are bookmarking the pages and they don't know where they are if the menu does not open expanded objects by default.

FluentButton & FluentAnchor

FluentButtons support custom colors, but FluentAnchor does not. In my opinion, a FluentAnchor is just a link with the appearance of a button, so it should also support custom colors. Also, why can't I use the warning, danger, info, etc., colors that are available in MessageBar?

I just don't understand why there is an OnClick EventHandler and @OnClick.

Besides this, these are pretty good and easy-to-use components.

FluentDataGrid

I just wish there would be a default component to achieve table-like behavior. Besides this, I'm enjoying this component a lot.

Cards

I don't use them at all. They are way too complicated in my opinion. I tried them, but I always have issues with either height, width, or some magic scrollbars.

Toasts

They should support an effect that shows how long a toast will last until it fades away. Also, error/success/warning toasts don't stand out as much. Both I and my users often overlook them.

Panels

I like it.

FluentDatePicker

This component should support all other DateTime, DateOnly etc. formats out of the box.

FluentNumberField

This component needs an entire overhaul. It doesn't support different CultureInfo for decimals. Nullables and overflow in min and max values are bugged.

[vnbaaij]

Thanks for the extensive write up. As you already said in the issue that led to this discussion, we can't fix all of this in the current version. But good to have this as a checklist for the next iteration.

ps you forgot to mention the DatePicker/Type value issue here 😉

[MarvinKlein1508]

Yes. It is mostly stuff I came across during my development time with this library. I have really high hopes for V3 once you can start working on it. I wouldn't hesitate to contribute myself as well.

I've added the FluentDatePicker and FluentNumberField.

[franklupo]

FluentSelect I have the same problem. Missing TValue and TOption example Devexpress https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2

[MarvinKlein1508]

I've created issue #2471 and #2470 to address IMO the two most important points from my experience

[gotmoo]

Doesn't the recently added Placeholder option for FluentSelect solve the "null" value? +1 though for being able to use Enums in a model without needing confusing hacks...

[qhuy729]

I also encountered a similar issue with the @OnClick of FluentAnchor when I used it to create a horizontal menu bar for the header.
When clicking on the menu to open a submenu, the Href should be disabled, but currently, it's impossible to use @OnClick:preventDefault="true" in FluentAnchor

[vnbaaij]

PreventDefault only works on native HTML elements. Not on custom Blazor components

[coderdnewbie]

I am hitting issues with validation and FluentDatePicker being DateOnly? (nullable DateOnly) I also vote for this is work out of the box.

An example of a recommended alternative to FluentNumberField that I can use for decimal values, in an EditForm, would be useful. I have seen the many issues about this as well.

Have you had any requests to make the FluentUI equivalents of the EF Core CRUD scaffolding? Is this even possible?