search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.88k stars 377 forks source link

fix: desync of FluentNumberField and FluentSlider in 4.10.4 #2948

Open arazni opened 4 days ago

arazni commented 4 days ago

🐛 Bug Report

Seeming regressions of #1531 and #1450

There are 2 Problems

FluentNumberField

This test demonstrates that the FluentNumberField's two-way data binding is broken in version 4.10.4. This appears to be a regression.

In my web app, I have a component that takes a numeric input and divies a portion to a wallet and a portion to a stash. After a number is selected, a button triggers a command and this command also resets the value of the numeric field to 0.

Unfortunately, the numeric field does not respect the behavior of being reset to 0 by the button command.

Go ahead and select a number like 2, which will enable the reset button. The expected behavior is for the reset button to set the value back to 0, and for the number input field to reflect that value.

You can see in the console logs that the data model's value is reset to 0, however the number field's value is still non-zero both visibly and under the hood. This implies that it isn't respecting the binding.

FluentSlider

This test demonstrates that the FluentSlider's two-way data binding can desync from its bound value in version 4.10.4. This may be a regression.

While you can see the behavior working for the Reset button, the behavior does not always work for the "Change by 2" button.

Go ahead and set the slider to 3, which will enable the reset button (only enabled at 3). Reset. You see that it works.

Go ahead and set the slider to 1, then keep pressing the "Change by 2" button. In addition to the visual weirdness, by checking the console logs, you will see that it desyncs from the actual value in the data.

When I run it, the console logs always have an accurate data value for the "Change by 2" button's usage. The underlying slider value on blazor side is one step behind. And the visual only updates every 3 clicks of the button.

A second test scenario is: 1. Refresh the page. 2. Set the slider to 1. 3. Click "Change by 2". 4. Click Reset. This will break the visual synchronization with the "Reset" button, which is otherwise usually working correctly.

💻 Repro or Code Sample

https://github.com/arazni/blazor-fluent-ui-slider-bug/tree/main

🤔 Expected Behavior

When changing a 2-way bound value outside of the component, the visual and component's value should stay synchronized.

😯 Current Behavior

There are scenarios where the component does not match the underlying data. See the repro steps on the repo.

💁 Possible Solution

🔦 Context

Same as #1531 and #1450, I have buttons that change values nearby fields and sliders that take those changes. See https://arazni.github.io/blades-in-the-sheets/demo for context. You may need to enable sliders over checkboxes in the accessibility tab. Then go back to the demo page, The fund section with the pencil icon enabled is where some of these issues come up.

🌍 Your Environment

oneolddev commented 2 days ago

@vnbaaij @arazni

I'll take a look at the slider issue reported. I previously corrected another regression with #2665.

vnbaaij commented 2 days ago

Hi @arazni,

There are 2 Problems

Then there are two issues...Please don't mix multiple issues in one the next time.

We'll wait and see what @oneolddev comes up with for the slider. Wrt the NumberField, there is no way I get it to work for both this situation and #2803 at the same time. As I think that last one is more important than being able to manipulate the value from the outside, we won't be able to fix your issue at this time.