[Lists] Trigger field changed when in multiple mode (#3294)

* ListComponentBase : trigger fieldchanged on changes when control is multiple mode

* ListComponentBase : implement missing binding expressions

---------

Co-authored-by: AI\jvermeyl <joris.vermeylen@uzgent.be>
Co-authored-by: Vincent Baaij <vnbaaij@outlook.com>

Author: 3 people

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -6209,6 +6209,12 @@
             ⚠️ Only available when Multiple = false.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.SelectedOptionExpression">
+            <summary>
+            Gets or sets an expression that identifies the bound selected options.
+            ⚠️ Only available when Multiple = false.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Multiple">
             <summary>
             If true, the user can select multiple elements.
@@ -6238,6 +6244,12 @@
             ⚠️ Only available when Multiple = true.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.SelectedOptionsExpression">
+            <summary>
+            Gets or sets an expression that identifies the bound selected options.
+            ⚠️ Only available when Multiple = true.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.#ctor">
             <summary />
         </member>

examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor

@@ -6,12 +6,6 @@
 
 <h1>Autocomplete</h1>
 
-<blockquote>
-    @(new MarkupString(DemoNavProvider.EditFormOffIcon))
-    The <b>FluentAutocomplete</b> component is not yet fully compatible with the <code>EditForm</code> and <code>FluentEditForm</code> elements.
-    Some functionalities, such as error messages, the requirement message or the validation messages are missing.
-</blockquote>
-
 <h2 id="example">Examples</h2>
 
 <DemoSection Title="Default" Component="@typeof(AutocompleteDefault)" />

examples/Demo/Shared/SampleData/Starship.cs

@@ -20,6 +20,7 @@ public class Starship
     public string? Description { get; set; }
 
     [Required(ErrorMessage = "Countries are required")]
+    [MinLength(1, ErrorMessage = "Countries are required")]
     public IEnumerable<Country>? Countries { get; set; }
 
     [Required(ErrorMessage = "A classification is required")]

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

@@ -3,6 +3,7 @@
 // ------------------------------------------------------------------------
 
 using System.Diagnostics.CodeAnalysis;
+using System.Linq.Expressions;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.AspNetCore.Components.Web;
@@ -37,7 +38,7 @@ public abstract partial class ListComponentBase<TOption> : FluentInputBase<strin
 
     // We cascade the _internalListContext to descendants, which in turn call it to add themselves to the options list
     internal InternalListContext<TOption> _internalListContext;
-    internal override bool FieldBound => Field is not null || ValueExpression is not null || ValueChanged.HasDelegate || SelectedOptionChanged.HasDelegate || SelectedOptionsChanged.HasDelegate;
+    internal override bool FieldBound => Field is not null || ValueExpression is not null || ValueChanged.HasDelegate || SelectedOptionChanged.HasDelegate || SelectedOptionExpression is not null || SelectedOptionsChanged.HasDelegate || SelectedOptionsExpression is not null;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -149,6 +150,13 @@ protected string? InternalValue
     [Parameter]
     public virtual EventCallback<TOption?> SelectedOptionChanged { get; set; }
 
+    /// <summary>
+    /// Gets or sets an expression that identifies the bound selected options.
+    /// ⚠️ Only available when Multiple = false.
+    /// </summary>
+    [Parameter]
+    public Expression<Func<TOption>>? SelectedOptionExpression { get; set; }
+
     /// <summary>
     /// If true, the user can select multiple elements.
     /// ⚠️ Only available for the FluentSelect and FluentListbox components.
@@ -183,6 +191,13 @@ protected string? InternalValue
     [Parameter]
     public virtual EventCallback<IEnumerable<TOption>?> SelectedOptionsChanged { get; set; }
 
+    /// <summary>
+    /// Gets or sets an expression that identifies the bound selected options.
+    /// ⚠️ Only available when Multiple = true.
+    /// </summary>
+    [Parameter]
+    public Expression<Func<IEnumerable<TOption>>>? SelectedOptionsExpression { get; set; }
+
     /// <summary />
     public ListComponentBase()
     {
@@ -295,11 +310,20 @@ public override async Task SetParametersAsync(ParameterView parameters)
                 }
             }
 
-            if (SelectedOptionChanged.HasDelegate)
+
+            if (SelectedOptionExpression is not null)
+            {
+                FieldIdentifier = FieldIdentifier.Create(SelectedOptionExpression);
+            }
+            else if (SelectedOptionChanged.HasDelegate)
             {
                 FieldIdentifier = FieldIdentifier.Create(() => SelectedOption);
             }
-            if (SelectedOptionsChanged.HasDelegate)
+            else if (SelectedOptionsExpression is not null)
+            {
+                FieldIdentifier = FieldIdentifier.Create(SelectedOptionsExpression);
+            }
+            else if (SelectedOptionsChanged.HasDelegate)
             {
                 FieldIdentifier = FieldIdentifier.Create(() => SelectedOptions);
             }
@@ -529,19 +553,8 @@ protected virtual async Task OnSelectedItemChangedHandlerAsync(TOption? item)
         {
             if (!Equals(item, SelectedOption))
             {
-                var value = GetOptionValue(item);
-
-                if (this is FluentListbox<TOption> ||
-                    this is FluentCombobox<TOption> ||
-                    (this is FluentSelect<TOption> && Value is null))
-                {
-                    await base.ChangeHandlerAsync(new ChangeEventArgs() { Value = value });
-                }
-
                 SelectedOption = item;
-
-                //InternalValue = Value = value;
-                InternalValue = value;
+                InternalValue = GetOptionValue(item);
                 await RaiseChangedEventsAsync();
             }
         }
@@ -564,6 +577,8 @@ protected virtual async Task RaiseChangedEventsAsync()
                 await SelectedOptionChanged.InvokeAsync(SelectedOption);
             }
         }
+
+        await base.ChangeHandlerAsync(new ChangeEventArgs() { Value = InternalValue });
     }
 
     protected virtual async Task OnKeydownHandlerAsync(KeyboardEventArgs e)