Fix #3349 by adding script function that attaches datalist to the con…

…mponent

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

@@ -1 +1,10 @@
-
+
+<datalist id="colors">
+    <option value="red" />
+    <option value="green" />
+    <option value="blue" />
+    <option value="yellow" />
+</datalist>
+<FluentSearch DataList="colors" />
+
+

src/Core/Components/Search/FluentSearch.razor.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components.Extensions;
@@ -93,6 +97,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 await Module.InvokeVoidAsync("setControlAttribute", Id, "autocomplete", AutoComplete);
             }
         }
+
+        if (DataList != null && !string.IsNullOrEmpty(Id))
+        {
+            Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+            await Module.InvokeVoidAsync("setDataList", Id, DataList);
+        }
     }
 
     protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage)

src/Core/Components/Search/FluentSearch.razor.js

@@ -13,3 +13,15 @@ export function setControlAttribute(id, attrName, value) {
         fieldElement?.setAttribute(attrName, 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);
+}