fix: handle decimal precision correctly in slider and number fields

Author: logaretm

.changeset/busy-symbols-invent.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+fix: handle decimal precision correctly in slider and number fields

packages/core/src/useNumberField/useNumberField.spec.ts

@@ -123,6 +123,52 @@ test('Applies decimal inputmode if the step contains decimals', async () => {
   expect(screen.getByLabelText(label)).toHaveAttribute('inputmode', 'decimal');
 });
 
+test('Increments and decrements correctly with decimal steps', async () => {
+  await render(makeTest({ step: 0.1, value: 0 }));
+
+  // Test increment
+  await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowUp' });
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('0.1');
+  expect(screen.getByTestId('value')).toHaveTextContent('0.1');
+
+  await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowUp' });
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('0.2');
+  expect(screen.getByTestId('value')).toHaveTextContent('0.2');
+
+  // Test decrement
+  await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowDown' });
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('0.1');
+  expect(screen.getByTestId('value')).toHaveTextContent('0.1');
+
+  // Test with increment button
+  await fireEvent.mouseDown(screen.getByLabelText('Increment'));
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('0.2');
+  expect(screen.getByTestId('value')).toHaveTextContent('0.2');
+
+  // Test with decrement button
+  await fireEvent.mouseDown(screen.getByLabelText('Decrement'));
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('0.1');
+  expect(screen.getByTestId('value')).toHaveTextContent('0.1');
+});
+
+test('Increments and decrements correctly with step 1.5', async () => {
+  await render(makeTest({ step: 1.5, value: 0 }));
+
+  // Test increment
+  await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowUp' });
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('1.5');
+  expect(screen.getByTestId('value')).toHaveTextContent('1.5');
+
+  await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowUp' });
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('3');
+  expect(screen.getByTestId('value')).toHaveTextContent('3');
+
+  // Test decrement
+  await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowDown' });
+  expect(screen.getByLabelText(label)).toHaveDisplayValue('1.5');
+  expect(screen.getByTestId('value')).toHaveTextContent('1.5');
+});
+
 describe('validation', () => {
   test('picks up native error messages', async () => {
     await render(makeTest({ required: true }));

packages/core/src/useSlider/useSlider.spec.ts

@@ -557,6 +557,73 @@ describe('track behavior', () => {
   });
 });
 
+describe('decimal steps', () => {
+  const Thumb = createThumbComponent({});
+
+  test('handles decimal step increments correctly', async () => {
+    const DecimalSlider = createSliderComponent({
+      label: 'Slider',
+      min: 0,
+      max: 1,
+      step: 0.1,
+      modelValue: 0,
+    });
+
+    await render({
+      components: { Thumb, DecimalSlider },
+      template: `
+        <DecimalSlider>
+          <Thumb />
+        </DecimalSlider>
+      `,
+    });
+
+    expect(screen.getByTestId('slider-value')).toHaveTextContent('0');
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0');
+
+    await fireEvent.keyDown(screen.getByRole('slider'), { code: 'ArrowUp' });
+    expect(screen.getByTestId('slider-value')).toHaveTextContent('0.1');
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0.1');
+
+    await fireEvent.keyDown(screen.getByRole('slider'), { code: 'ArrowUp' });
+    expect(screen.getByTestId('slider-value')).toHaveTextContent('0.2');
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0.2');
+
+    await fireEvent.keyDown(screen.getByRole('slider'), { code: 'ArrowDown' });
+    expect(screen.getByTestId('slider-value')).toHaveTextContent('0.1');
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0.1');
+  });
+
+  test('handles step 1.5 increments correctly', async () => {
+    const DecimalSlider = createSliderComponent({
+      label: 'Slider',
+      min: 0,
+      max: 10,
+      step: 1.5,
+      modelValue: 0,
+    });
+
+    await render({
+      components: { Thumb, DecimalSlider },
+      template: `
+        <DecimalSlider>
+          <Thumb />
+        </DecimalSlider>
+      `,
+    });
+
+    expect(screen.getByTestId('slider-value')).toHaveTextContent('0');
+
+    await fireEvent.keyDown(screen.getByRole('slider'), { code: 'ArrowUp' });
+    expect(screen.getByTestId('slider-value')).toHaveTextContent('1.5');
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '1.5');
+
+    await fireEvent.keyDown(screen.getByRole('slider'), { code: 'ArrowUp' });
+    expect(screen.getByTestId('slider-value')).toHaveTextContent('3');
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '3');
+  });
+});
+
 describe('discrete steps', () => {
   const Thumb = createThumbComponent({});
 

packages/core/src/utils/math.ts

@@ -3,6 +3,18 @@ export function toNearestMultipleOf(value: number, multiple: number, round?: boo
   const largerMultiple = smallerMultiple + multiple;
 
   const result = value - smallerMultiple >= largerMultiple - value ? largerMultiple : smallerMultiple;
+
   // Return of closest of two
-  return round ? Math.round(result) : Math.trunc(result);
+  if (round) {
+    return Math.round(result);
+  }
+
+  // For decimal steps, we need to round to the same precision as the step
+  // to avoid floating point arithmetic issues
+  const decimalPlaces = (multiple.toString().split('.')[1] || '').length;
+  if (decimalPlaces > 0) {
+    return Number(result.toFixed(decimalPlaces));
+  }
+
+  return Math.trunc(result);
 }