Fix #1215: make datalist work

Fix #1226: Add Element to AutoComplete TextField
microsoft · Dec 28, 2023 · 4b775a0 · 4b775a0
1 parent 5d585ae
commit 4b775a0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 1 deletion.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2857,6 +2857,9 @@
             <param name="component">The type of the component to show</param>
             <param name="parameters"><see cref="T:Microsoft.FluentUI.AspNetCore.Components.SplashScreenContent"/> that holds the content to display</param>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.#ctor">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.CreateDialogCallback(System.Object,System.Func{Microsoft.FluentUI.AspNetCore.Components.DialogResult,System.Threading.Tasks.Task})">
             <summary>
             Convenience method to create a <see cref="T:Microsoft.AspNetCore.Components.EventCallback"/> for a dialog result.

diff --git a/src/Core/Components/Base/FluentInputBase.cs b/src/Core/Components/Base/FluentInputBase.cs
@@ -321,6 +321,7 @@ public override Task SetParametersAsync(ParameterView parameters)
         return base.SetParametersAsync(ParameterView.Empty);
     }
 
+    // TODO: #vNext: Make it proper async Task
     /// <summary>
     /// Exposes the elements FocusAsync() method.
     /// </summary>
@@ -329,6 +330,7 @@ public async void FocusAsync()
         await Element!.FocusAsync();
     }
 
+    // TODO: #vNext: Make it proper async Task
     /// <summary>
     /// Exposes the elements FocusAsync(bool preventScroll) method.
     /// </summary>

diff --git a/src/Core/Components/List/FluentAutocomplete.razor b/src/Core/Components/List/FluentAutocomplete.razor
@@ -9,6 +9,7 @@
         <FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@GetAriaLabel()" ChildContent="@LabelTemplate" />
 
         <FluentTextField role="combobox"
+                         @ref="@Element"
                          Id="@Id"
                          AutoComplete="@AutoComplete"
                          Appearance="@Appearance"

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -9,8 +9,11 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 [CascadingTypeParameter(nameof(TOption))]
 public partial class FluentAutocomplete<TOption> : ListComponentBase<TOption> where TOption : notnull
 {
-    public const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/List/FluentAutocomplete.razor.js";
     private string _valueText = string.Empty;
+
+    public const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/List/FluentAutocomplete.razor.js";
+
+    public new FluentTextField? Element { get; set; } = default!;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="FluentAutocomplete{TOption}"/> class.

diff --git a/src/Core/Components/TextField/FluentTextField.razor.cs b/src/Core/Components/TextField/FluentTextField.razor.cs
@@ -95,5 +95,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 await Module.InvokeVoidAsync("setAutocomplete", Id, AutoComplete);
             }
         }
+            if (DataList != null && !string.IsNullOrEmpty(Id))
+            {
+                Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
+                await Module.InvokeVoidAsync("setDataList", Id, DataList);
+            }
+
     }
 }
diff --git a/src/Core/Components/TextField/FluentTextField.razor.js b/src/Core/Components/TextField/FluentTextField.razor.js
@@ -4,4 +4,16 @@ export function setAutocomplete(id, value) {
     if (!!fieldElement) {
         fieldElement?.setAttribute("autocomplete", value);
     }
+}
+
+export function setDataList(id, datalistid) {
+    const fieldElement = document.getElementById(id);
+    const dataList = document.getElementById(datalistid)?.cloneNode(true);
+
+    const shadowRoot = fieldElement.shadowRoot;
+    const shadowDataList = shadowRoot.getElementById(datalistid);
+    if (shadowDataList) {
+        shadowRoot.removeChild(shadowDataList);
+    }
+    shadowRoot.appendChild(dataList);
 }