FluentSelect: Fix ValueChanged fired twice

examples/Demo/Shared/Pages/Lab/IssueTester.razor

@@ -1 +1,29 @@
-@page "/IssueTester"
+@page "/IssueTester"
+
+
+@inject DataSource Data
+<label for="people-listbox">Select a person</label>
+<FluentSelect TOption="Person"
+              Items="@Data.People.WithVeryLongName()"
+              Id="people-listbox"
+              Width="200px"
+              Height="250px"
+              OptionValue="@(p => p.PersonId.ToString())"
+              OptionText="@(p => p.LastName + ", " + p.FirstName)"
+              Value="@SelectedValue"
+              ValueChanged="@ValueChangedHandler" />
+
+<p>
+    Selected value: @SelectedValue <br />
+</p>
+
+
+@code {
+    string? SelectedValue = "4";
+
+    async Task ValueChangedHandler(string? value)
+    {
+        Console.WriteLine($"Value: {value}");
+        SelectedValue = value;
+    }
+}

examples/Demo/Shared/Pages/Select/Examples/SelectMultipleWithFunctions.razor

@@ -1,5 +1,4 @@
 @inject DataSource Data
-
 <h6>!!Experimental!!</h6>
 <p>All people whose first name starts with a "J" are initialy selected through the <code>OptionSelected</code> (Func delegate) parameter.</p>
 <p>All people with a birth year greater than 1990 are disabled through the <code>OptionDisabled</code> (Func delegate) parameter.</p>
@@ -21,6 +20,11 @@
 <p>
     Selected value: @SelectedValue <br />
     <em>Reflects the value of the first selected option</em><br />
+    <em><b>
+        This value is not always accurate as a user can potentially deselect all enabled options. A browser will not return the value
+        of a disabled item so the last selected non-disabled value will be returned even if it is not selected anymore!
+        </b>
+    </em>
 </p>
 <p>
     Selected options: @(SelectedOptions != null ? String.Join(", ", SelectedOptions.Select(i => i.FirstName)) : "")<br />

examples/Demo/Shared/Pages/Select/SelectPage.razor

@@ -11,9 +11,6 @@
     Fluent UI design system.
 </p>
 
-
-<ApiDocumentation Component="typeof(FluentSelect<>)" GenericLabel="TOption" />
-
 <h2>Examples</h2>
 
 <DemoSection Title="Default" Component="@typeof(SelectDefault)"></DemoSection>
@@ -32,4 +29,7 @@
 
 <DemoSection Title="Multiple items" Component="@typeof(SelectMultiple)"></DemoSection>
 
-<DemoSection Title="Multiple items with selected and disabled options" Component="@typeof(SelectMultipleWithFunctions)"></DemoSection>
+<DemoSection Title="Multiple items with selected and disabled options" Component="@typeof(SelectMultipleWithFunctions)"></DemoSection>
+
+<h2>API Documentation</h2>
+<ApiDocumentation Component="typeof(FluentSelect<>)" GenericLabel="TOption" />

examples/Demo/Shared/SampleData/DataSource.cs

@@ -71,15 +71,15 @@ public Task<Country[]> GetCountriesAsync()
 
     private readonly static Person[] _people = new[]
     {
-        new Person ( PersonId: 1, FirstName : "Jean", LastName : "Martin", CountryCode : "fr", BirthDate : new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ),
-        new Person ( PersonId : 2, FirstName : "António", LastName : "Langa", CountryCode : "mz", BirthDate : new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ),
-        new Person ( PersonId : 3, FirstName : "Julie", LastName : "Smith", CountryCode : "au", BirthDate : new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ),
-        new Person ( PersonId : 4, FirstName : "Nur", LastName : "Sari", CountryCode : "id", BirthDate : new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ),
-        new Person ( PersonId : 5, FirstName : "Jose", LastName : "Hernandez", CountryCode : "mx", BirthDate : new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ),
-        new Person ( PersonId : 6, FirstName : "Bert", LastName : "de Vries", CountryCode : "nl", BirthDate : new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ),
-        new Person ( PersonId : 7, FirstName : "Jaques", LastName : "Martin", CountryCode : "fr", BirthDate : new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ),
-        new Person ( PersonId : 8, FirstName : "Elizabeth", LastName : "Johnson", CountryCode : "gb", BirthDate : new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ),
-        new Person ( PersonId : 9, FirstName : "Jakob", LastName : "Berger", CountryCode : "de", BirthDate : new DateOnly(1971, 4, 21), Picture: string.Empty )
+        new Person ( PersonId: 1, FirstName : "Jean", LastName : "Martin", CountryCode : "FR", BirthDate : new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ),
+        new Person ( PersonId : 2, FirstName : "António", LastName : "Langa", CountryCode : "MZ", BirthDate : new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ),
+        new Person ( PersonId : 3, FirstName : "Julie", LastName : "Smith", CountryCode : "AU", BirthDate : new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ),
+        new Person ( PersonId : 4, FirstName : "Nur", LastName : "Sari", CountryCode : "ID", BirthDate : new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ),
+        new Person ( PersonId : 5, FirstName : "Jose", LastName : "Hernandez", CountryCode : "MX", BirthDate : new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ),
+        new Person ( PersonId : 6, FirstName : "Bert", LastName : "de Vries", CountryCode : "NL", BirthDate : new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ),
+        new Person ( PersonId : 7, FirstName : "Jaques", LastName : "Martin", CountryCode : "BE", BirthDate : new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ),
+        new Person ( PersonId : 8, FirstName : "Elizabeth", LastName : "Johnson", CountryCode : "GB", BirthDate : new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ),
+        new Person ( PersonId : 9, FirstName : "Jakob", LastName : "Berger", CountryCode : "D", BirthDate : new DateOnly(1971, 4, 21), Picture: string.Empty )
     };
 
     public class MonthItem

examples/Demo/Shared/SampleData/Person.cs

@@ -1,6 +1,9 @@
 namespace FluentUI.Demo.Shared.SampleData;
 
-public record Person(int PersonId, string CountryCode, string FirstName, string LastName, DateOnly BirthDate, string Picture);
+public record Person(int PersonId, string CountryCode, string FirstName, string LastName, DateOnly BirthDate, string Picture)
+{
+    public override string ToString() => $"{FirstName} {LastName} ({BirthDate}, {CountryCode})";
+}
 
 public class SimplePerson
 {

src/Core/Components/List/FluentOption.razor.cs

@@ -55,7 +55,10 @@ protected override Task OnInitializedAsync()
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender && Selected && InternalListContext != null && InternalListContext.ValueChanged.HasDelegate)
+        if (firstRender && Selected && 
+            InternalListContext != null && 
+            InternalListContext.ValueChanged.HasDelegate &&
+            InternalListContext.ListComponent.Multiple)
         {
             await InternalListContext.ValueChanged.InvokeAsync(Value);
         }
@@ -82,7 +85,8 @@ protected async Task OnSelectHandler()
         else
         {
             if (InternalListContext != null &&
-                InternalListContext.ValueChanged.HasDelegate)
+                InternalListContext.ValueChanged.HasDelegate && 
+                InternalListContext.ListComponent.Items is null)
             {
                 await InternalListContext.ValueChanged.InvokeAsync(Value);
             }

src/Core/Components/List/ListComponentBase.cs

@@ -43,7 +43,7 @@ protected string? InternalValue
 
                     Value = value;
                     // Raise Changed events in another thread
-                    Task.Run(() => RaiseChangedEventsAsync());
+                    RaiseChangedEventsAsync().ConfigureAwait(false);
                 }
             }
         }
@@ -252,7 +252,7 @@ protected virtual bool GetOptionSelected(TOption item)
             {
                 return false;
             }
-            else if (OptionSelected != null)
+            else if (OptionSelected != null && _selectedOptions.Contains(item))
             {
                 return OptionSelected.Invoke(item);
             }
@@ -343,7 +343,10 @@ protected virtual async Task OnSelectedItemChangedHandlerAsync(TOption? item)
                 AddSelectedItem(item);
                 await RaiseChangedEventsAsync();
             }
-
+            if (!Equals(item, SelectedOption))
+            {
+                SelectedOption = item;
+            }
         }
         else
         {
@@ -371,14 +374,12 @@ protected virtual async Task RaiseChangedEventsAsync()
             {
                 await SelectedOptionChanged.InvokeAsync(SelectedOption);
             }
-
-            if (ValueChanged.HasDelegate)
-            {
-                await ValueChanged.InvokeAsync(InternalValue);
-            }
         }
-
-        StateHasChanged();
+        if (ValueChanged.HasDelegate)
+        {
+            await ValueChanged.InvokeAsync(InternalValue);
+            StateHasChanged();  
+        }
     }
 
     /// <summary />
@@ -421,7 +422,7 @@ protected virtual async Task RaiseChangedEventsAsync()
                     }));
 
                     // Needed in fluent-listbox and fluent-select with mutliple select enabled
-                    if (this is FluentListbox<TOption> || 
+                    if (this is FluentListbox<TOption> ||
                        (this is FluentSelect<TOption> && Multiple) ||
                        (this is FluentAutocomplete<TOption> && Multiple))
                     {