FluentUI inputs firing infinite loop

[JordanMarr]

FYI,
I ran into an issue that turned out to be related to the FluentUI inputs yesterday.

I had a form that with a bunch of Fluent UI inputs (numeric and other textboxes). On form load I made a request to load the real values, but when I set the entity with the real values to my model, the page would freeze.
The @change events on my inputs were setting off an infinite loop.

I wonder if FluentUI inputs @change event was not checking to see if new value was different and so was needlessly refiring.

<fluent-tab-panel>
    <fluent-number-field .value={model.ProposedDesignEui.CostMean} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with CostMean = e.target?value } |> dispatch)}>
        Cost Mean
    </fluent-number-field>
    <fluent-number-field .value={model.ProposedDesignEui.EuiMin} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with EuiMin = e.target?value } |> dispatch)}>
        EUI Min
    </fluent-number-field>
    <fluent-number-field .value={model.ProposedDesignEui.EuiMean} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with EuiMean = e.target?value } |> dispatch)}>
        EUI Mean
    </fluent-number-field>
    <fluent-number-field .value={model.ProposedDesignEui.EuiMax} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with EuiMax = e.target?value } |> dispatch)}>
        EUI Max
    </fluent-number-field>
    <fluent-number-field .value={model.ProposedDesignEui.Arch2030} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with Arch2030 = e.target?value } |> dispatch)}>
        Arch 2030
    </fluent-number-field>
    <fluent-number-field .value={model.ProposedDesignEui.Ashrae901} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with Ashrae901 = e.target?value } |> dispatch)}>
        Ashrae 90.1
    </fluent-number-field>
    <fluent-text-area .value={model.ProposedDesignEui.PerformanceFactors} style="width: 220px; height: 100px;"
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with PerformanceFactors = e.target.Value} |> dispatch)}>
        Performance Factors
    </fluent-text-area>
</fluent-tab-panel>

I changed them to regular input and it resolved the issue:

<fluent-tab-panel>
    {label "Cost Mean"}
    <input type="number" value={model.ProposedDesignEui.CostMean} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with CostMean = e.target?value } |> dispatch)} />

    {label "EUI Min"}
    <input type="number" value={model.ProposedDesignEui.EuiMin} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with EuiMin = e.target?value } |> dispatch)} />

    {label "EUI Mean"}
    <input type="number" value={model.ProposedDesignEui.EuiMean} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with EuiMean = e.target?value } |> dispatch)} />

    {label "EUI Max"}
    <input type="number" value={model.ProposedDesignEui.EuiMax} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with EuiMax = e.target?value } |> dispatch)} />

    {label "Arch 2030"}
    <input type="number" value={model.ProposedDesignEui.Arch2030} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with Arch2030 = e.target?value } |> dispatch)} />

    {label "Ashrae 90.1"}
    <input type="number" value={model.ProposedDesignEui.Ashrae901} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with Ashrae901 = e.target?value } |> dispatch)} />

    {label "Performance Factors"}
    <fluent-text-area value={model.ProposedDesignEui.PerformanceFactors} style="width: 220px; height: 100px;"
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with PerformanceFactors = e.target.Value} |> dispatch)}>                                    
    </fluent-text-area>
</fluent-tab-panel>

[AngelMunoz]

I see a slightly difference between inputs and fluent-inputs

<!--          -------v binding to "value" property -->
<fluent-number-field .value={model.ProposedDesignEui.CostMean} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with CostMean = e.target?value } |> dispatch)}>
        Cost Mean
    </fluent-number-field>
<!-- vs -->
<!--          -------v not binding to "value" property -->
 <input type="number" value={model.ProposedDesignEui.CostMean} 
        @change={Ev (fun e -> SetProposedEui { model.ProposedDesignEui with CostMean = e.target?value } |> dispatch)} />

if you add the dot to the native inputs (as in .value) does it cause the infinite loop?
I would try to take out the . from the fluent-number-field's value and see if that fixes it
also looking into the fluent-number-field looks like you might want to use valueAsNumber rather than value directly

[JordanMarr]

Didn't know about valueAsNumber! 😄
Could that be added to Event as a property?

[alfonsogarciacaro]

Yes, this maybe something similar to the difference of controlled/uncontrolled inputs in React. By using value without the dot you set the HTML attribute which is only used at first when the component is mounted but later is ignored (as with defaultValue in React), but setting .value you set property which does trigger the change event causing the infinite loop (unlike React, it seems FluentUI components don't checker whether the value has actually changed before triggering the event).

As @AngelMunoz suggests, I'd try using the value attribute (without the dot) to use the input in an "uncontrolled" fashion.

[JordanMarr]

The .value vs value was one of the things I was experimenting with. Sadly, it fails either way.
So my current takeaway is that this is just an issue with the FluentUI components.

[JordanMarr]

I started to file a bug on the Fluent UI repo but they require a repo that reproduces the problem. Then I noticed that they have almost 700 open issues and decided that it's probably not worth my time to create one with that many open issues. 😬😆