fix: correct floating precision in snapValueToStep (#6113)

* fix: correct floating precision in snapValueToStep

* add test

---------

Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>

Author: 4 people

packages/@react-spectrum/numberfield/test/NumberField.test.js

@@ -417,6 +417,16 @@ describe('NumberField', function () {
     expect(onChangeSpy).toHaveBeenCalledWith(0);
   });
 
+  it('does not lose precision', async () => {
+    let {textField} = renderNumberField({minValue: 0.1, maxValue: 24, step: 0.1, onChange: onChangeSpy});
+
+    act(() => {textField.focus();});
+    await user.keyboard('24');
+    await user.tab();
+
+    expect(textField).toHaveAttribute('value', '24');
+  });
+
   it.each`
     Name
     ${'NumberField'}

packages/@react-stately/utils/src/number.ts

@@ -18,33 +18,38 @@ export function clamp(value: number, min: number = -Infinity, max: number = Infi
   return newValue;
 }
 
+export function roundToStepPrecision(value: number, step: number) {
+  let roundedValue = value;
+  let stepString = step.toString();
+  let pointIndex = stepString.indexOf('.');
+  let precision = pointIndex >= 0 ? stepString.length - pointIndex : 0;
+  if (precision > 0) {
+    let pow = Math.pow(10, precision);
+    roundedValue = Math.round(roundedValue * pow) / pow;
+  }
+  return roundedValue;
+}
+
 export function snapValueToStep(value: number, min: number | undefined, max: number | undefined, step: number): number {
   min = Number(min);
   max = Number(max);
   let remainder = ((value - (isNaN(min) ? 0 : min)) % step);
-  let snappedValue = Math.abs(remainder) * 2 >= step
+  let snappedValue = roundToStepPrecision(Math.abs(remainder) * 2 >= step
     ? value + Math.sign(remainder) * (step - Math.abs(remainder))
-    : value - remainder;
+    : value - remainder, step);
 
   if (!isNaN(min)) {
     if (snappedValue < min) {
       snappedValue = min;
     } else if (!isNaN(max) && snappedValue > max) {
-      snappedValue = min + Math.floor((max - min) / step) * step;
+      snappedValue = min + Math.floor(roundToStepPrecision((max - min) / step, step)) * step;
     }
   } else if (!isNaN(max) && snappedValue > max) {
-    snappedValue = Math.floor(max / step) * step;
+    snappedValue = Math.floor(roundToStepPrecision(max / step, step)) * step;
   }
 
   // correct floating point behavior by rounding to step precision
-  let string = step.toString();
-  let index = string.indexOf('.');
-  let precision = index >= 0 ? string.length - index : 0;
-
-  if (precision > 0) {
-    let pow = Math.pow(10, precision);
-    snappedValue = Math.round(snappedValue * pow) / pow;
-  }
+  snappedValue = roundToStepPrecision(snappedValue, step);
 
   return snappedValue;
 }