use javascript MuatationObserver instead

microsoft · Dec 24, 2024 · a07cc31 · a07cc31
1 parent c90f389
commit a07cc31
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 28 deletions.
diff --git a/src/Core/Components/NumberField/FluentNumberField.razor.cs b/src/Core/Components/NumberField/FluentNumberField.razor.cs
@@ -160,42 +160,21 @@ protected override void OnParametersSet()
         base.OnParametersSet();
     }
 
-    /// <summary>
-    /// set to true when value is changed by the fluent-number-field either by input or by the spin buttons.
-    /// </summary>
-    private bool inputChanged = false;
-
-    protected override Task InputHandlerAsync(ChangeEventArgs e)
-    {
-        inputChanged = true;
-        return base.InputHandlerAsync(e);
-    }
-
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
         if (firstRender)
         {
+            Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+            await Module.InvokeVoidAsync("ensureCurrentValueMatch", Element);
+
             if (AutoComplete != null && !string.IsNullOrEmpty(Id))
             {
-                Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
                 await Module.InvokeVoidAsync("setControlAttribute", Id, "autocomplete", AutoComplete);
             }
 
         }
-        else
-        {
-            if (inputChanged)
-            {
-                inputChanged = false;
-            }
-            else
-            {
-                Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
-                await Module.InvokeVoidAsync("setNumberFieldValue", Element, Value!.ToString());
-            }
-        }
     }
 
     public async ValueTask DisposeAsync()

diff --git a/src/Core/Components/TextField/FluentTextField.razor.js b/src/Core/Components/TextField/FluentTextField.razor.js
@@ -18,10 +18,19 @@ export function setDataList(id, datalistid) {
     shadowRoot.appendChild(dataList);
 }
 
-export function setNumberFieldValue(ref, value) {
+export function ensureCurrentValueMatch(ref) {
     if (ref !== undefined && ref != null) {
-        if (ref.value !== value) {
-            ref.value = value;
-        }
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes") {
+                    ref.value = mutation.target.getAttribute("value");
+                }
+            });
+        });
+        observer.observe(ref, {
+            attributes: true,
+            attributeFilter: ["value"],
+        });
     }
 }
+