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.78k stars 363 forks source link

fix: Wrong position of thumb in FluentSlider after attempt to move thumb #1011

Closed vadzimshch closed 10 months ago

vadzimshch commented 11 months ago

🐛 Bug Report

I tried to use EditForm with several FluentSliders inside dialog.

💻 Repro or Code Sample

ThumbBugTestProject.zip

  1. Click button "Open dialog" on Home page
  2. Try to move thumb of any slider inside dialog

🤔 Expected Behavior

Thumb must stay on the same horizontal line

😯 Current Behavior

Thumbs jumps to new position outside his slider

vnbaaij commented 11 months ago

The sliders underlying web component adds a value for the orientation (horizontal/vertical to the class attribute. The functionality that adds the valid/invalid/modified (through the EditContext) value to the class attribute does not know the orientation is in there as well (it is added with the web componets javascript) so it gets removed when the EditForm`EditContext` do their work.

The fix is to add a Class="horizontal" parameter to the sliders and then it all works with the EditForm as it should. We will look at providing a fix out-of-the box for a next release.

Thanks for providing the sample code. Made finding this a lot easier.