[Combobox, Select] Fix the Placeholder attribute

examples/Demo/Shared/Pages/List/Combobox/Examples/ComboboxDefault.razor

@@ -1,7 +1,7 @@
 @inject DataSource Data
 
 <h4>Select the best song from the list or type your own</h4>
-<FluentCombobox Label="Best song" Autofocus="true" Items="@Data.Hits" @bind-Value="@hit" Height="200px" />
+<FluentCombobox Placeholder="Make a selection..." Label="Best song" Autofocus="true" Items="@Data.Hits" @bind-Value="@hit" Height="200px" />
 <p>
     Selected hit: @hit
 </p>

examples/Demo/Shared/Pages/List/Select/Examples/SelectDefault.razor

@@ -5,6 +5,7 @@
               Id="people-listbox"
               Width="200px"
               Height="250px"
+              Placeholder="Make a selection..."
               OptionValue="@(p => p.PersonId.ToString())"
               OptionText="@(p => p.LastName + ", " + p.FirstName)"
               @bind-Value="@SelectedValue"
@@ -18,5 +19,5 @@
 @code
 {
     Person? SelectedPerson;
-    string? SelectedValue = "4";
-}
+    string? SelectedValue;
+}

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

@@ -14,6 +14,7 @@ public partial class FluentSelect<TOption> : ListComponentBase<TOption> where TO
         .AddStyle($"#{Id}::part(selected-value)", "white-space", "nowrap")
         .AddStyle($"#{Id}::part(selected-value)", "overflow", "hidden")
         .AddStyle($"#{Id}::part(selected-value)", "text-overflow", "ellipsis")
+        .AddStyle($"#{Id}::part(selected-value)", "color", "var(--neutral-base-color)", when: !string.IsNullOrEmpty(Placeholder) && SelectedOption is null)
         .BuildMarkupString();
 
     protected override string? StyleValue => new StyleBuilder(base.StyleValue)

src/Core/Components/List/ListComponentBase.razor

@@ -11,6 +11,11 @@
     private void RenderOptions(RenderTreeBuilder __builder)
     {
 
+        if (!string.IsNullOrEmpty(Placeholder) && this is FluentSelect<TOption>)
+        {
+            <FluentOption TOption="TOption" Value="" Style="display:none;" aria-hidden="true">@Placeholder</FluentOption>
+        }
+
         if (Items is null)
         {
             @ChildContent

tests/Core/List/FluentSelectTests.FluentSelect_Placeholder.verified.razor.html

@@ -0,0 +1,12 @@
+
+<style>
+#myselect::part(listbox) { z-index: 9995; }
+#myselect::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--neutral-base-color); }
+
+</style>
+<fluent-select id="xxx" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
+  <fluent-option id="xxx" style="display:none;" value="" blazor:onclick="3" aria-hidden="true" blazor:elementreference="xxx">Make a selection...</fluent-option>
+  <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="4" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+  <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="5" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+  <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="6" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+</fluent-select>

tests/Core/List/FluentSelectTests.razor

@@ -170,9 +170,26 @@
                     <FluentIcon Value="@(new SampleIcons.Samples.MyCircle())" Slot="end" />
                     @(context.Name)
                 </OptionTemplate>
-            </FluentSelect>);
+            </FluentSelect>
+    );
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentSelect_Placeholder()
+    {
+        // Arrange
+        var cut = RenderComponent<FluentSelect<Customer>>(parameters =>
+        {
+            parameters.Add(p => p.Id, "myselect");
+            parameters.Add(p => p.Items, Customers.Get());
+            parameters.Add(p => p.Placeholder, "Make a selection...");
+        });
 
         // Assert
+        Assert.Equal("Make a selection...", cut.Find("fluent-option").InnerHtml);
         cut.Verify();
     }
 }