fix: FluentSlider's two-way data binding on Value Property does not update appropriately

[arazni]

🐛 Bug Report

In my web app, I have a component that requires a slider reaches its max value, enabling a selection field, and then after a selection is made, a button triggers a command and this command also resets the value of the slider to 0.

In Fluent UI, the slider's value stays at the maximum value both as a property and visually, even though the bound data model has reset to 0.

I've prepared a demo of the problematic behaviors here: https://github.com/arazni/blazor-fluent-ui-slider-bug/tree/main

💻 Repro or Code Sample

Download and run the code here in dotnet 8: https://github.com/arazni/blazor-fluent-ui-slider-bug/tree/main

🤔 Expected Behavior

When I click a button that resets the two-way bound value of the Slider to 0, the Slider's Value property should change to 0 and the slider should visibly appear to reset to 0.

Click Reset.

😯 Current Behavior

When I click a button that resets the two-way bound value of the Slider to 0, the Slider's Value property stays at its current value and the slider's visually apparent value stays at its current value.

Click Reset.

Button becomes disabled (data bound is 0, but slider is still maxed).

💁 Possible Solution

Fix the value-binding to respect situations where the data model's property changes, and ensure that the slider visually changes as well.

🔦 Context

In my web app, I have a component that requires a slider reaches its max value, which enables a selection field. Once the selection field is set, a button enables that triggers a command and this command also resets the value of the slider to 0.

In the context of the web app, which is a character sheet for Blades in the Dark, when the character reaches maximum stress (the slider), they become traumatized. They select a trauma, press a button to add it, and their stress resets to 0.

🌍 Your Environment

• OS & Device: Windows 11 PC
• Browser at least: Microsoft Edge and Mozilla FireFox]
• .NET 8.0.1 and FluentUI Version 4.4.0

[vnbaaij]

First, thanks for writing such a comprehensive issue report!

I got it fixed for the next release (4.4.1, later today). Turns out we were missing a current-value in the web component call.

What this dd not immediately fix was the updating of the @ref value, but by making the FluentReset method async with a tiny delay, that works then as well.

 private async Task FluentReset()
 {
     FluentModel.Reset();
     await Task.Delay(1);
     Console.WriteLine("Slider Value: " + FluentSlider!.Value);
 }