[Lists] Pass Name parameter

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

@@ -1,3 +1,2 @@
 @page "/issue-tester"
 
-<FluentUI.Demo.Shared.Pages.DataGrid.Examples.DataGridTypical />

src/Core/Components/List/FluentCombobox.razor

@@ -22,6 +22,7 @@
                      required="@Required"
                      @onchange="@ChangeHandlerAsync"
                      autofocus="@Autofocus"
+                     name="@Name"
                      @attributes="AdditionalAttributes">
         @_renderOptions
     </fluent-combobox>

src/Core/Components/List/FluentListbox.razor

@@ -18,6 +18,7 @@
                         size="@Size"
                         multiple="@Multiple"
                         required="@Required"
+                        name="@Name"
                         selectedOptions="@(SelectedOptions != null && SelectedOptions.Any() ? string.Join(',', SelectedOptions.Select(i => GetOptionValue(i))) : null)"
                         @onchange="@ChangeHandlerAsync"
                         @onkeydown="@OnKeydownHandlerAsync"

src/Core/Components/List/FluentSelect.razor

@@ -15,6 +15,7 @@
                    appearance="@Appearance.ToAttributeValue()"
                    current-value="@Value"
                    required="@Required"
+                   name="@Name"
                    @onchange="@ChangeHandlerAsync"
                    @onkeydown="@OnKeydownHandlerAsync"
                    @attributes="AdditionalAttributes">

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Name.verified.razor.html

@@ -0,0 +1,9 @@
+
+<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" name="xxx" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
+    <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5" blazor:onfocus="6" tabindex="0" role="button">
+      <title>Search</title>
+      <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
+    </svg>
+  </fluent-text-field>
+</div>

tests/Core/List/FluentAutocompleteTests.razor

@@ -18,10 +18,10 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.Items, Customers.Get());
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.Items, Customers.Get());
+    });
 
         // Assert
         cut.Verify();
@@ -32,11 +32,11 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.Items, Customers.Get());
-    parameters.Add(p => p.Width, string.Empty);
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.Items, Customers.Get());
+        parameters.Add(p => p.Width, string.Empty);
+    });
 
         // Assert
         Assert.Contains("width: 250px", cut.Markup);
@@ -48,10 +48,10 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.Items, Customers.Get());
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.Items, Customers.Get());
+    });
 
         // Act
         cut.Find("fluent-text-field").Click();
@@ -78,11 +78,11 @@
 
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.Items, Customers.Get());
-    parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.Items, Customers.Get());
+        parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
+    });
 
         // Act
         var input = cut.Find("fluent-text-field");
@@ -106,7 +106,7 @@
                     SelectValueOnTab="true"
                     @bind-SelectedOptions="@SelectedItems"
                     OnOptionsSearch="@OnSearchAsync" />
-    );
+        );
 
         // Act: click to open -> Tab to select
         var input = cut.Find("fluent-text-field");
@@ -124,13 +124,13 @@
     {
         // Arrange & Act
         var ex = Assert.Throws<InvalidOperationException>(() =>
-        {
-    var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
+    {
+        var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
     {
         parameters.Add(p => p.Id, "myComponent");
         parameters.Add(p => p.Multiple, false);
     });
-        });
+    });
 
         // Assert
         Assert.Equal("For FluentAutocomplete, this property must be True. Set the MaximumSelectedOptions property to 1 to select just one item.", ex.InnerException?.Message);
@@ -141,30 +141,30 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.OptionValue, context => context.Id.ToString());
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.OptionValue, context => context.Id.ToString());
 
-    // Add a HeaderContent template
-    parameters.Add(p => p.HeaderContent, context =>
+        // Add a HeaderContent template
+        parameters.Add(p => p.HeaderContent, context =>
     {
         return $"<header>Please, select an item</header>";
     });
 
-    // Add an Item template
-    parameters.Add(p => p.OptionTemplate, context =>
+        // Add an Item template
+        parameters.Add(p => p.OptionTemplate, context =>
     {
         return $"<div>{context?.Id} {context?.Name}</div>";
     });
 
-    // Add a FooterContent template
-    parameters.Add(p => p.FooterContent, context =>
+        // Add a FooterContent template
+        parameters.Add(p => p.FooterContent, context =>
     {
         return $"<footer>{context.Count()} items found</footer>";
     });
 
-    parameters.Add(p => p.Items, Customers.Get());
-        });
+        parameters.Add(p => p.Items, Customers.Get());
+    });
 
         // Act
         cut.Find("fluent-text-field").Click();
@@ -178,13 +178,13 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.OptionValue, context => context.Id.ToString());
-    parameters.Add(p => p.OptionText, context => context.Name);
-    parameters.Add(p => p.Items, Customers.Get());
-    parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.OptionValue, context => context.Id.ToString());
+        parameters.Add(p => p.OptionText, context => context.Name);
+        parameters.Add(p => p.Items, Customers.Get());
+        parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
+    });
 
         // Act
         cut.Find("fluent-text-field").Click();
@@ -198,19 +198,19 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.OptionValue, context => context.Id.ToString());
-    parameters.Add(p => p.OptionText, context => context.Name);
-    parameters.Add(p => p.Items, Customers.Get());
-    parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.OptionValue, context => context.Id.ToString());
+        parameters.Add(p => p.OptionText, context => context.Name);
+        parameters.Add(p => p.Items, Customers.Get());
+        parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
 
-    // Add an Item template
-    parameters.Add(p => p.OptionTemplate, context =>
+        // Add an Item template
+        parameters.Add(p => p.OptionTemplate, context =>
     {
         return $"<div>{context?.Id} {context?.Name}</div>";
     });
-        });
+    });
 
         // Act
         cut.Find("fluent-text-field").Click();
@@ -224,13 +224,13 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.OptionValue, context => context.Id.ToString());
-    parameters.Add(p => p.OptionText, context => context.Name);
-    parameters.Add(p => p.Items, Customers.Get());
-    parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.OptionValue, context => context.Id.ToString());
+        parameters.Add(p => p.OptionText, context => context.Name);
+        parameters.Add(p => p.Items, Customers.Get());
+        parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
+    });
 
         // Act (click on the Dismiss button)
         // The first SelectedOption is removed
@@ -245,10 +245,10 @@
     {
         // Arrange & Act
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.ValueText, "Preselected value");
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.ValueText, "Preselected value");
+    });
 
         // Assert
         var textField = cut.Find("fluent-text-field");
@@ -271,10 +271,10 @@
         // Arrange
         var valueText = "Preselected value";
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Bind(p => p.ValueText, valueText, x => valueText = x);
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Bind(p => p.ValueText, valueText, x => valueText = x);
+    });
 
         valueText.Should().NotBeNullOrEmpty();
 
@@ -292,10 +292,10 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.ValueText, "Some text here");
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.ValueText, "Some text here");
+    });
 
         // Act
         cut.Find("svg").Click(); // Clear button
@@ -310,11 +310,11 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.ValueText, "Some text here");
-    parameters.Add(p => p.ShowOverlayOnEmptyResults, false);
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.ValueText, "Some text here");
+        parameters.Add(p => p.ShowOverlayOnEmptyResults, false);
+    });
 
         // Act
         cut.Find("svg").Click(); // Clear button
@@ -329,10 +329,10 @@
     {
         // Arrange && Act
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.Autofocus, true);
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.Autofocus, true);
+    });
 
         // Assert
         cut.Verify();
@@ -343,11 +343,11 @@
     {
         // Arrange
         var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
-        {
-    parameters.Add(p => p.Id, "myComponent");
-    parameters.Add(p => p.MaxAutoHeight, "200px");
-    parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
-        });
+    {
+        parameters.Add(p => p.Id, "myComponent");
+        parameters.Add(p => p.MaxAutoHeight, "200px");
+        parameters.Add(p => p.SelectedOptions, Customers.Get().Take(2));
+    });
 
         // Act
         cut.Find("fluent-text-field").Click();
@@ -370,7 +370,7 @@
                     SelectValueOnTab="true"
                     @bind-SelectedOptions="@SelectedItems"
                     OnOptionsSearch="@OnSearchAsync" />
-    );
+        );
 
         // Act: click to open -> KeyDow + Enter to select
         var input = cut.Find("fluent-text-field");
@@ -412,6 +412,21 @@
         Assert.Equal(2, SelectedItems.First().Id);
     }
 
+    [Fact]
+    public void FluentAutocomplete_Name()
+    {
+        // Arrange
+        var cut = RenderComponent<FluentAutocomplete<Customer>>(parameters =>
+        {
+            parameters.Add(p => p.Id, "myComponent");
+            parameters.Add(p => p.Name, "myName");
+            parameters.Add(p => p.Items, Customers.Get());
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
     // Send a key code
     private async Task PressKeyAsync(IRenderedComponent<FluentAutocomplete<Customer>> cut, KeyCode key, bool popoverOpened = false)
     {

tests/Core/List/FluentComboboxTests.FluentCombobox_NameAttribute.verified.html

@@ -0,0 +1,3 @@
+
+<style>#myComponent::part(listbox) {  z-index: 9995 }</style>
+<fluent-combobox id="xxx" position="below" blazor:onchange="1" autofocus="" name="xxx" blazor:elementreference="xxx"></fluent-combobox>

tests/Core/List/FluentComboboxTests.cs

@@ -34,5 +34,20 @@ public void FluentCombobox_AutofocusAttribute()
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentCombobox_NameAttribute()
+    {
+        // Arrange && Act
+        var cut = TestContext.RenderComponent<FluentCombobox<Customer>>(parameters =>
+        {
+            parameters.Add(p => p.Id, "myComponent");
+            parameters.Add(p => p.Name, "myComponentName");
+            parameters.Add(p => p.Autofocus, true);
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
     private record Customer(int Id, string Name);
 }