FluentUI inputs firing infinite loop #38
Replies: 4 comments 1 reply
-
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 |
Beta Was this translation helpful? Give feedback.
-
Yes, this maybe something similar to the difference of controlled/uncontrolled inputs in React. By using As @AngelMunoz suggests, I'd try using the |
Beta Was this translation helpful? Give feedback.
-
The |
Beta Was this translation helpful? Give feedback.
-
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. 😬😆 |
Beta Was this translation helpful? Give feedback.
-
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.I changed them to regular
input
and it resolved the issue:Beta Was this translation helpful? Give feedback.
All reactions