[Autocomplete] Fix ReadOnly and Disable properties (#2291)

microsoft · Jun 29, 2024 · 040ec30 · 040ec30
1 parent 2a9c45a
commit 040ec30
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/src/Core/Components/List/FluentAutocomplete.razor b/src/Core/Components/List/FluentAutocomplete.razor
@@ -6,24 +6,27 @@
     <div class="@ClassValue fluent-autocomplete-multiselect"
          style="@StyleValue"
          auto-height="@(!string.IsNullOrEmpty(MaxAutoHeight))">
-        <FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@GetAriaLabel()" ChildContent="@LabelTemplate" Required="@Required" />
         <FluentKeyCode Anchor="@Id" OnKeyDown="@KeyDownHandlerAsync" Only="@CatchOnly" PreventDefaultOnly="@PreventOnly" />
 
         <FluentTextField role="combobox"
                          @ref="@Element"
                          Id="@Id"
+                         Name="@Name"
+                         Embedded="true"
+                         Required="@Required"
                          AutoComplete="@AutoComplete"
                          Appearance="@Appearance"
                          Disabled="@Disabled"
+                         ReadOnly="@ReadOnly"
+                         Label="@Label"
+                         LabelTemplate="@LabelTemplate"
                          Placeholder="@(SelectedOptions?.Any() is false ? Placeholder : string.Empty)"
                          aria-expanded="@(IsMultiSelectOpened ? "true" : "false")"
                          aria-controls="@(IsMultiSelectOpened ? IdPopup : string.Empty)"
                          aria-label="@GetAutocompleteAriaLabel()"
                          Value="@ValueText"
-                         Required="@Required"
                          @onclick="@OnDropDownExpandedAsync"
                          @oninput="@InputHandlerAsync"
-                         @onfocusout="@(e => { IsReachedMaxItems = false; })"
                          autofocus="@Autofocus"
                          Style="@ComponentWidth">
             @* Selected Items *@
@@ -65,7 +68,7 @@
                 }
 
             }
-            @if (!Disabled)
+            @if (!Disabled && !ReadOnly)
             {
                 if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText))
                 {
@@ -76,6 +79,7 @@
                                     Style="cursor: pointer;"
                                     Slot="end"
                                     Title="Clear"
+                                    @onfocus="@(e => { IsReachedMaxItems = false; IsMultiSelectOpened = false; })"
                                     tabindex="0"
                                     role="button"
                                     OnClick="@OnClearAsync" />
@@ -90,6 +94,7 @@
                                     Style="cursor: pointer;"
                                     Slot="end"
                                     Title="Search"
+                                    @onfocus="@(e => { IsReachedMaxItems = false; IsMultiSelectOpened = false; })"
                                     tabindex="0"
                                     role="button"
                                     OnClick="@OnDropDownExpandedAsync" />
@@ -200,12 +205,22 @@
                 {
                     var text = @GetOptionText(item);
 
-                    <FluentBadge Appearance="@FluentUI.Appearance.Neutral"
-                                 OnDismissClick="@(e => RemoveSelectedItemAsync(item))"
-                                 DismissTitle="@(string.Format(AccessibilityRemoveItem, text))"
-                                 aria-label="@GetOptionText(item)">
-                        @text
-                    </FluentBadge>
+                    if (ReadOnly || Disabled)
+                    {
+                        <FluentBadge Appearance="@AspNetCore.Components.Appearance.Neutral"
+                                     aria-label="@GetOptionText(item)">
+                            @text
+                        </FluentBadge>
+                    }
+                    else
+                    {
+                        <FluentBadge Appearance="@AspNetCore.Components.Appearance.Neutral"
+                                     OnDismissClick="@(e => RemoveSelectedItemAsync(item))"
+                                     DismissTitle="@(string.Format(AccessibilityRemoveItem, text))"
+                                     aria-label="@GetOptionText(item)">
+                            @text
+                        </FluentBadge>
+                    }
                 }
                 else
                 {

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -270,6 +270,11 @@ private string ComponentWidth
     /// <summary />
     protected async Task InputHandlerAsync(ChangeEventArgs e)
     {
+        if (ReadOnly || Disabled)
+        {
+            return;
+        }
+
         ValueText = e.Value?.ToString() ?? string.Empty;
         await ValueTextChanged.InvokeAsync(ValueText);