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

FluentSelect's SelectedOptionChanged triggered twice with different values #1965

Closed lasbrojen closed 2 weeks ago

lasbrojen commented 2 weeks ago

🐛 Bug Report

I have based this on an example from your website to demonstrate what I believe might be a bug. If the list used in "Items" contains an option that is set to "Selected" as true, FluentSelect’s SelectedOptionChanged event is triggered twice. The first time it is called with the selected value, and subsequently with the initial value.

In my case, the value "_myValue" remains "Eight" since my list includes an option explicitly set to "Selected."

image

The component functions correctly when initialized with all options set to "Selected" as false.

image

💻 Repro or Code Sample

<FluentSelect
    TOption="Option<string>"
    SelectedOptionChanged="MyMethod" 
    Items=@stringOptions1
    OptionText="@(i => i.Text)"
    OptionValue="@(i => i.Value)"
    OptionSelected="@(i => i.Selected)"
/>

<p style="margin-top:30px">
    Selected Value: <span style="color:red;font-size:17px; font-weight: bold">@_myValue</span>
</p>

@code{
    private string _myValue = string.Empty;

    public void MyMethod(Option<string> obj)
    {
        _myValue = obj?.Text;
    }

    static List<Option<string>> stringOptions1 = new()
    {
        { new Option<string> { Value = "9", Text = "Nine" } },
        { new Option<string> { Value = "8", Text = "Eight", Selected = true }},
        { new Option<string> { Value = "7", Text = "Seven" } },
        { new Option<string> { Value = "6", Text = "Six" } },
        { new Option<string> { Value = "5", Text = "Five" } },
        { new Option<string> { Value = "4", Text = "Four" } },
        { new Option<string> { Value = "3", Text = "Three" } },
        { new Option<string> { Value = "2", Text = "Two" } },
        { new Option<string> { Value = "1", Text = "One" } }
    };
}

🤔 Expected Behavior

Should it not just be called once?

😯 Current Behavior

The first time it is called with the selected value, and subsequently with the initial value.

🔦 Context

In my system, I am loading data that requires user editing. I need to preset the value that the user had selected during their last session. When the user selectes an option I need to trigger other actions in the systems and therefore I use SelectedOptionChanged

🌍 Your Environment

To be sure I created a brand new project from the "Fluent Blazor Web App" template. I am testing in Microsoft Edge on a Windows 11

vnbaaij commented 2 weeks ago

Hi,

Yes, this is indeed a bug. The good news is I found a fix for it so that will be in the next release. I'm creating a PR for it which will be linked below.

Thanks for reporting and providing a ready to use reproduction!

lasbrojen commented 2 weeks ago

Thank you 🙂