[Lists] Make list components inherit from InputBase

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

@@ -4766,11 +4766,6 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.Module">
             <summary />
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.Placeholder">
-            <summary>
-            Gets or sets the placeholder value of the element, generally used to provide a hint to the user.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.ValueText">
             <summary>
             Gets or sets the text field value.
@@ -4781,11 +4776,6 @@
             Gets or sets the callback that is invoked when the text field value changes.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.Autofocus">
-            <summary>
-            Determines if the element should receive document focus on page load.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.Multiple">
             <summary>
             For <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1"/>, this property must be True.
@@ -4900,11 +4890,6 @@
             Gets or sets the maximum height of the field to adjust its height in relation to selected elements.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.ImmediateDelay">
-            <summary>
-            Gets or sets the delay, in milliseconds, before to raise the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.OnOptionsSearch"/> event.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.SelectValueOnTab">
             <summary>
             Gets or sets whether the currently selected item from the drop-down (if it is open) is selected.
@@ -4975,11 +4960,6 @@
             Gets or sets the open attribute.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.Placeholder">
-            <summary>
-            Gets or sets the placeholder value of the element, generally used to provide a hint to the user.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.Position">
             <summary>
             Gets or sets the placement for the listbox when the combobox is open.
@@ -4991,11 +4971,6 @@
             Gets or sets the visual appearance. See <seealso cref="T:Microsoft.FluentUI.AspNetCore.Components.Appearance"/>
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.Autofocus">
-            <summary>
-            Determines if the element should receive document focus on page load.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentListbox`1.Size">
             <summary>
             Gets or sets the maximum number of options that should be visible in the listbox scroll area.
@@ -5154,9 +5129,6 @@
             </summary>
             <typeparam name="TOption"></typeparam>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.ClassValue">
-            <summary />
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.StyleValue">
             <summary />
         </member>
@@ -5170,36 +5142,11 @@
             Gets or sets the height of the component or of the popup panel.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Label">
-            <summary>
-            Gets or sets the text displayed just above the component.
-            </summary>
-        </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.LabelTemplate">
-            <summary>
-            Gets or sets the content displayed just above the component.
-            </summary>
-        </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.AriaLabel">
-            <summary>
-            Gets or sets the text used on aria-label attribute.
-            </summary>
-        </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Required">
-            <summary>
-            Gets or sets if an indicator is showed that this input is required.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Title">
             <summary>
             Gets or sets the text used on aria-label attribute.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Disabled">
-            <summary>
-            If true, will disable the list of items.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.ChildContent">
             <summary>
             Gets or sets the content to be rendered inside the component.
@@ -5245,18 +5192,6 @@
             ⚠️ Only available when Multiple = false.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Value">
-            <summary>
-            Gets or sets the selected value.
-            When Multiple = true this only reflects the first selected option value.
-            </summary>
-        </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.ValueChanged">
-            <summary>
-            Called whenever the selection changed.
-            ⚠️ 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.
@@ -5283,6 +5218,12 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.#ctor">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.TryParseValueFromString(System.String,System.String@,System.String@)">
+            <inheritdoc />
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.FormatValueAsString(System.String)">
+            <inheritdoc />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.DisabledItem(`0)">
             <summary />
         </member>

examples/Demo/Shared/Pages/BasicFormFluentUIComponents.razor

@@ -26,17 +26,21 @@
         </div>
         <div>
             <FluentAutocomplete TOption="Country"
+                                Name="countries"
                                 AutoComplete="off"
-                                Label="Select a country"
+                                Required
+                                Label="Select countries"
                                 Width="250px"
                                 Placeholder="Select countries"
                                 OnOptionsSearch="@OnSearchAsync"
                                 MaximumSelectedOptions="3"
                                 OptionText="@(item => item.Name)"
-                                @bind-SelectedOptions="@SelectedItems" />
+                                Multiple="true"
+                                @bind-SelectedOptions="@starship.Countries" />
+            <FluentValidationMessage For="@(() => starship.Countries)" />
         </div>
         <div>
-            <FluentSelect name="class" Id="classification" @bind-Value="starship.Classification" TOption="string" Required Label="Primary Classification">
+            <FluentSelect Name="class" Id="classification" @bind-Value="starship.Classification" TOption="string" Required Label="Primary Classification">
                 <FluentOption Value="">Select classification ...</FluentOption>
                 <FluentOption Value="Exploration">Exploration</FluentOption>
                 <FluentOption Value="Diplomacy">Diplomacy</FluentOption>

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

@@ -1,2 +1,53 @@
 @page "/IssueTester"
 
+<FluentCombobox Items="_items"
+                TOption="string"
+                SelectedOptionChanged="x => HandleOriginProductChanged(x)" />
+
+
+
+<EditForm Model="@this">
+    <p>Modified: @(context.IsModified())</p>
+
+    <FluentSelect TOption="MyThing" @bind-SelectedOption="@soSelect"
+                  Items="@AllThings" OptionText="@(x => x.DisplayText)" />
+
+    <FluentListbox TOption="MyThing" @bind-SelectedOption="@soListbox"
+                   Items="@AllThings" OptionText="@(x => x.DisplayText)" />
+
+    <FluentListbox TOption="MyThing" @bind-Value="@vListbox"
+                   Items="@AllThings" OptionText="@(x => x.DisplayText)" />
+
+    <FluentCombobox Items="@AllThings"
+                    TOption="MyThing"
+                    OptionText="@(x => x.DisplayText)"
+                    @bind-SelectedOption="@soCombobox"
+                    @bind-Value="@vCombobox" />
+
+
+    <FluentTextField @bind-Value="@someString" />
+</EditForm>
+<p>
+    Selected (Select): @soSelect <br />
+    Selected (Listbox): @soListbox <br />
+    Value (Listbox): @vListbox <br />
+    Selected (Combobox): @soCombobox <br />
+    Value (Combobox): @vCombobox <br />
+    Text field: @someString
+</p>
+@code {
+    MyThing? soSelect, soListbox, soCombobox;
+    string? vListbox, vCombobox;
+
+    string? someString;
+    MyThing[] AllThings = new[] { new MyThing(1, "One"), new MyThing(2, "Two") };
+
+    record MyThing(int Id, string DisplayText);
+
+    private List<string> _items = ["Item 1", "Item 2", "Item 3"];
+
+    private void HandleOriginProductChanged(string? value)
+    {
+        Console.WriteLine($"Selected product: {value}");
+    }
+}

examples/Demo/Shared/SampleData/Starship.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using System.ComponentModel.DataAnnotations;
 using System.Diagnostics.CodeAnalysis;
 
@@ -13,6 +17,9 @@ public class Starship
 
     public string? Description { get; set; }
 
+    [Required(ErrorMessage = "Countries are required")]
+    public IEnumerable<Country>? Countries { get; set; } = [];
+
     [Required(ErrorMessage = "A classification is required")]
     public string? Classification { get; set; }
 

src/Core/BindAttributes.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Microsoft.AspNetCore.Components;
 
 //  Specifies that types that are ordinarily visible only within the current assembly

src/Core/Components/Base/FluentInputBase.cs

@@ -1,9 +1,13 @@
-using System.Diagnostics.CodeAnalysis;
-using System.Globalization;
-using System.Linq.Expressions;
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.FluentUI.AspNetCore.Components.Utilities;
+using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
+using System.Linq.Expressions;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -139,7 +143,7 @@ public abstract partial class FluentInputBase<TValue> : FluentComponentBase, IDi
     /// </summary>
     protected internal FieldIdentifier FieldIdentifier { get; set; }
 
-    internal bool FieldBound => Field is not null || ValueExpression != null || ValueChanged.HasDelegate;
+    internal bool FieldBound { get; set; }
 
     protected async Task SetCurrentValueAsync(TValue? value)
     {
@@ -303,17 +307,20 @@ public override Task SetParametersAsync(ParameterView parameters)
             // This is the first run
             // Could put this logic in OnInit, but its nice to avoid forcing people who override OnInit to call base.OnInit()
 
-            if(Field is not null)
+            if (Field is not null)
             {
                 FieldIdentifier = (FieldIdentifier)Field;
+                FieldBound = true;
             }
             else if (ValueExpression is not null)
             {
                 FieldIdentifier = FieldIdentifier.Create(ValueExpression);
+                FieldBound = true;
             }
             else if (ValueChanged.HasDelegate)
             {
                 FieldIdentifier = FieldIdentifier.Create(() => Value);
+                FieldBound = true;
             }
 
             if (CascadedEditContext != null)

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

@@ -35,12 +35,6 @@ public FluentAutocomplete()
     /// <summary />
     private IJSObjectReference Module { get; set; } = default!;
 
-    /// <summary>
-    /// Gets or sets the placeholder value of the element, generally used to provide a hint to the user.
-    /// </summary>
-    [Parameter]
-    public string? Placeholder { get; set; }
-
     /// <summary>
     /// Gets or sets the text field value.
     /// </summary>
@@ -53,12 +47,6 @@ public FluentAutocomplete()
     [Parameter]
     public EventCallback<string> ValueTextChanged { get; set; }
 
-    /// <summary>
-    /// Determines if the element should receive document focus on page load.
-    /// </summary>
-    [Parameter]
-    public bool Autofocus { get; set; } = false;
-
     /// <summary>
     /// For <see cref="FluentAutocomplete{TOption}"/>, this property must be True.
     /// Set the <see cref="MaximumSelectedOptions"/> property to 1 to select just one item.
@@ -208,12 +196,6 @@ public override bool Multiple
     [Parameter]
     public string? MaxAutoHeight { get; set; }
 
-    /// <summary>
-    /// Gets or sets the delay, in milliseconds, before to raise the <see cref="OnOptionsSearch"/> event.
-    /// </summary>
-    [Parameter]
-    public int ImmediateDelay { get; set; } = 0;
-
     /// <summary>
     /// Gets or sets whether the currently selected item from the drop-down (if it is open) is selected.
     /// Default is false.
@@ -266,7 +248,7 @@ private string ComponentWidth
     private TOption? SelectableItem { get; set; }
 
     /// <summary />
-    protected async Task InputHandlerAsync(ChangeEventArgs e)
+    protected override async Task InputHandlerAsync(ChangeEventArgs e)
     {
         ValueText = e.Value?.ToString() ?? string.Empty;
         await ValueTextChanged.InvokeAsync(ValueText);

src/Core/Components/List/FluentCombobox.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits ListComponentBase<TOption>
 @typeparam TOption
 
@@ -20,7 +20,7 @@
                      disabled=@Disabled
                      appearance="@Appearance.ToAttributeValue()"
                      required="@Required"
-                     @onchange="@OnChangedHandlerAsync"
+                     @onchange="@ChangeHandlerAsync"
                      autofocus="@Autofocus"
                      @attributes="AdditionalAttributes">
         @_renderOptions

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

@@ -32,12 +32,6 @@ public partial class FluentCombobox<TOption> : ListComponentBase<TOption> where
     [Parameter]
     public bool? Open { get; set; }
 
-    /// <summary>
-    /// Gets or sets the placeholder value of the element, generally used to provide a hint to the user.
-    /// </summary>
-    [Parameter]
-    public string? Placeholder { get; set; }
-
     /// <summary>
     /// Gets or sets the placement for the listbox when the combobox is open.
     /// See <seealso cref="AspNetCore.Components.SelectPosition"/>
@@ -51,12 +45,6 @@ public partial class FluentCombobox<TOption> : ListComponentBase<TOption> where
     [Parameter]
     public Appearance? Appearance { get; set; }
 
-    /// <summary>
-    /// Determines if the element should receive document focus on page load.
-    /// </summary>
-    [Parameter]
-    public bool Autofocus { get; set; } = false;
-
     protected override string? StyleValue => new StyleBuilder(base.StyleValue)
         .AddStyle("min-width", Width, when: !string.IsNullOrEmpty(Width))
         .Build();
@@ -130,8 +118,9 @@ public override async Task SetParametersAsync(ParameterView parameters)
         await base.SetParametersAsync(ParameterView.Empty);
     }
 
-    protected async Task OnChangedHandlerAsync(ChangeEventArgs e)
+    protected override async Task ChangeHandlerAsync(ChangeEventArgs e)
     {
+        await base.ChangeHandlerAsync(e);
         if (e.Value is not null && Items is not null)
         {
             var value = e.Value.ToString();
@@ -158,6 +147,7 @@ protected async Task OnChangedHandlerAsync(ChangeEventArgs e)
             {
                 await OnSelectedItemChangedHandlerAsync(item);
             }
+
         }
     }