FluentSearch fix #3430

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

@@ -87,22 +87,26 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
+        Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+
         if (firstRender)
         {
-            Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
             await Module.InvokeVoidAsync("addAriaHidden", Id);
 
             if (AutoComplete != null)
             {
                 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);
         }
+
+        Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+        await Module.InvokeVoidAsync("setClearButtonDisabled", Id, Disabled || ReadOnly);
     }
 
     protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage)

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

@@ -6,6 +6,16 @@ export function addAriaHidden(id) {
     }
 }
 
+export function setClearButtonDisabled(id, disabled){
+    const fieldElement = document.querySelector("#" + id)?.shadowRoot?.querySelector(".clear-button");
+
+    if(!!fieldElement && disabled){
+        fieldElement?.setAttribute("disabled", ""); // set disabled attribute
+    }else{
+        fieldElement?.removeAttribute("disabled");
+    }
+}
+
 export function setControlAttribute(id, attrName, value) {
     const fieldElement = document.querySelector("#" + id)?.shadowRoot?.querySelector("#control");
 

tests/Core/Search/FluentSearchTests.FluentSearch_AdditionalAttributes.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" additional-attribute-name="additional-attribute-value" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_AppearanceAttribute-Filled.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" appearance="filled" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_AppearanceAttribute-Outline.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_AutoFocusAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search autofocus="" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_ChildContent.verified.html

@@ -0,0 +1,4 @@
+
+<fluent-search id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx">
+  <div>Child content</div>
+</fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_DataListAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search list="datalist-id" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_Default.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_DisabledAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" disabled="" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_IdAttribute-[empty].verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_IdAttribute-[null].verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_IdAttribute-[space].verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id=" " appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_IdAttribute-id-value.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_MaxLengthAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search maxlength="10" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_MinLengthAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search minlength="5" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_NameAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" name="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_PatternAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search pattern="[A-Za-z]{3}" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_PlaceholderAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search placeholder="Enter text here" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_ReadOnlyAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search readonly="" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_RequiredAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" required="" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_SizeAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search size="10" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_SpellcheckAttribute.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search spellcheck="" id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_ValueAttribute-[empty].verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_ValueAttribute-[null].verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_ValueAttribute-[space].verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" value=" " current-value=" " appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_ValueAttribute-some-value.verified.html

@@ -0,0 +1,2 @@
+
+<fluent-search id="xxx" value="some-value" current-value="some-value" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>

tests/Core/Search/FluentSearchTests.FluentSearch_WithLabel.verified.html

@@ -0,0 +1,4 @@
+
+<label for="xxx" class="fluent-input-label" b-hum22yrq17="">With a label
+</label>
+<fluent-search id="xxx" appearance="outline" blazor:onchange="1" blazor:oninput="2" blazor:elementreference="xxx"></fluent-search>