fix(number-field, slider): floating point roundoff precision bug

packages/number-field/src/NumberField.ts

@@ -495,7 +495,14 @@ export class NumberField extends TextfieldBase {
         // Step shouldn't validate when 0...
         if (this.step) {
             const min = typeof this.min !== 'undefined' ? this.min : 0;
-            const moduloStep = (value - min) % this.step;
+            this.digitsAfterDecimal =
+                this.step != Math.floor(this.step)
+                    ? this.step.toString().split('.')[1].length
+                    : 0;
+            const moduloStep = parseFloat(
+                this.numberFormatter.format((value - min) % this.step)
+            );
+
             const fallsOnStep = moduloStep === 0;
             if (!fallsOnStep) {
                 const overUnder = Math.round(moduloStep / this.step);
@@ -510,6 +517,7 @@ export class NumberField extends TextfieldBase {
                     value -= this.step;
                 }
             }
+            value = parseFloat(this.numberFormatter.format(value));
         }
         value *= signMultiplier;
         return value;
@@ -526,7 +534,11 @@ export class NumberField extends TextfieldBase {
     }
 
     protected get numberFormatter(): NumberFormatter {
-        if (!this._numberFormatter || !this._numberFormatterFocused) {
+        if (
+            !this._numberFormatter ||
+            !this._numberFormatterFocused ||
+            this._lastDigitsAfterDecimal !== this.digitsAfterDecimal
+        ) {
             const {
                 style,
                 unit,
@@ -539,12 +551,26 @@ export class NumberField extends TextfieldBase {
             }
             this._numberFormatterFocused = new NumberFormatter(
                 this.languageResolver.language,
-                formatOptionsNoUnit
+                this.step
+                    ? {
+                          ...formatOptionsNoUnit,
+                          maximumFractionDigits: this.digitsAfterDecimal,
+                      }
+                    : {
+                          ...formatOptionsNoUnit,
+                      }
             );
             try {
                 this._numberFormatter = new NumberFormatter(
                     this.languageResolver.language,
-                    this.formatOptions
+                    this.step
+                        ? {
+                              ...this.formatOptions,
+                              maximumFractionDigits: this.digitsAfterDecimal,
+                          }
+                        : {
+                              ...this.formatOptions,
+                          }
                 );
                 this._forcedUnit = '';
                 this._numberFormatter.format(1);
@@ -554,6 +580,7 @@ export class NumberField extends TextfieldBase {
                 }
                 this._numberFormatter = this._numberFormatterFocused;
             }
+            this._lastDigitsAfterDecimal = this.digitsAfterDecimal;
         }
         return this.focused
             ? this._numberFormatterFocused
@@ -562,6 +589,8 @@ export class NumberField extends TextfieldBase {
 
     private _numberFormatter?: NumberFormatter;
     private _numberFormatterFocused?: NumberFormatter;
+    private _lastDigitsAfterDecimal: number = 0;
+    private digitsAfterDecimal: number = 0;
 
     protected get numberParser(): NumberParser {
         if (!this._numberParser || !this._numberParserFocused) {

packages/number-field/test/inputs.test.ts

@@ -314,6 +314,27 @@ describe('NumberField - inputs', () => {
             expect(el.value).to.equal(255);
         });
     });
+    describe('with floating point numbers', () => {
+        it('do not crash the Number Field', async () => {
+            const el = await getElFrom(minMax(minMax.args));
+            el.setAttribute('min', '0.1');
+            el.setAttribute('step', '0.01');
+            el.setAttribute('value', '0.5');
+            await elementUpdated(el);
+
+            el.focus();
+            await sendKeys({
+                type: '6',
+            });
+            await elementUpdated(el);
+            expect(el.formattedValue).to.equal('0.56');
+            await sendKeys({
+                press: 'Enter',
+            });
+            await elementUpdated(el);
+            expect(el.value).to.equal(0.56);
+        });
+    });
     describe('locale specific', () => {
         it('can determine the group symbol', async () => {
             const [languageContext] = createLanguageContext('es-ES');

packages/slider/stories/slider.stories.ts

@@ -450,6 +450,32 @@ editableWithDefaultValue.swc_vrt = {
     skip: true,
 };
 
+export const editableWithFractionValue = (
+    args: StoryArgs = {}
+): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                max="255"
+                min="0.1"
+                value="0.5"
+                step="0.01"
+                default-value="18"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                ...=${spreadProps(args)}
+            >
+                Angle
+            </sp-slider>
+        </div>
+    `;
+};
+
+editableWithFractionValue.swc_vrt = {
+    skip: true,
+};
+
 export const editableDisabled = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">