fix: enhanced SSR update ignored in FluentNumberField

[davhdavh]

🐛 Bug Report

See sample below...

0. click 'Load Existing'
1. If staticform-reset has data-enhance then html will correctly update to <fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="f688f055" value="42" name="Model.Age" appearance="outline">, but the actual input inside will not get updated
2. if no data-enhance, the problem goes away.
3. if using any @rendermode problem goes away. It only happens in SSR.

💻 Repro or Code Sample

@page "/staticform"
<EditForm Model="@Model" OnValidSubmit="@HandleValidSubmit" FormName="staticform">
 <DataAnnotationsValidator />
 <FluentNumberField Name="@FieldName(Model.Age)" @bind-Value="Model.Age" Label="Age"  />
</EditForm>

<form method="post" data-enhance @onsubmit="@Load" @formname="staticform-reset">
 <AntiforgeryToken/>
 <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Stealth">Load Existing</FluentButton>
</form>
@code {
 private static string FieldName(object propertyName, [CallerArgumentExpression(nameof(propertyName))] string? memberName = null) => memberName!;

 [SupplyParameterFromForm] private FormModel? Model { get; set; }

 private bool formSubmitted = false;

 protected override void OnInitialized() => Model ??= new();

 private void HandleValidSubmit()
 {
  formSubmitted = true;
 }

 private void Load()
 {
  Model = new(){Age = 42};
  formSubmitted = false;
 }

 public class FormModel
 {

  [Range(18, 120)] public int Age { get; set; } = 18;

 }
}

[vnbaaij]

The fluent-number-field web component is horribly broken in a lot of ways! (see open and blocked issues)

As you know, the version of the web components script we use in v4 is no longer being maintained so I don't expect any fixes coming for this script nor for our v4 wrapper of this web component in the near future.

[vnbaaij]

We cannot make this work in SSR mode. We need interactivity to execute a script that ensures the current value is kept in sync between DOM and Blazor.

This is being used by FluentTextField as well, so I think you will run into the same SRR issue there.

[davhdavh]

workaround:

function attachfluentnumberfieldObserver() {
 if (!document.body) return;
 // Disconnect existing observers
 if (window.__fluentnumberfieldObserver) {
  window.__fluentnumberfieldObserver.disconnect();
 }

 function reAddCurrentValue(target) {
  target.setAttribute('current-value', target.getAttribute('value'));
 }
 const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
   if (
    mutation.type === 'attributes' &&
    mutation.attributeName === 'current-value' &&
    mutation.target.hasAttribute('value') &&
    !mutation.target.hasAttribute('current-value')
   ) {
    reAddCurrentValue(mutation.target);
   }
  }
 });

 // Observe all fields
 document.querySelectorAll('fluent-number-field').forEach(field => {
  observer.observe(field, {
   attributes: true,
   attributeFilter: ['current-value'],
  });
 });

 window.__fluentnumberfieldObserver = observer;
}

export function afterWebStarted(blazor) {
    blazor.addEventListener('enhancednavigationstart', attachfluentnumberfieldObserver);
}

[vnbaaij]

@davhdavh thanks! I'll look at if/how/when we can get this in.