chore: fix float issue

due to rounding we may have unexpected values

follow-up of podman-desktop/podman-desktop#8662

Signed-off-by: Florent Benoit <[email protected]>

packages/renderer/src/lib/ui/NumberInput.spec.ts

@@ -253,3 +253,41 @@ test('Expect decrement works with custom step', async () => {
 
   expect(input).toHaveValue('4.2');
 });
+
+test('Expect multiple increment with floating values', async () => {
+  renderInput('test', 0, false, 0, 10, 'number', 0.15);
+
+  const input = screen.getByRole('textbox');
+  expect(input).toBeInTheDocument();
+  expect(input).toHaveValue('0');
+
+  const increment = screen.getByLabelText('increment');
+  expect(increment).toBeInTheDocument();
+
+  // click 3 times on increment
+  await userEvent.click(increment);
+  await userEvent.click(increment);
+  await userEvent.click(increment);
+
+  // the value should be 0.45
+  expect(input).toHaveValue('0.45');
+});
+
+test('Expect multiple decrement with floating values', async () => {
+  renderInput('test', 1, false, 0, 10, 'number', 0.15);
+
+  const input = screen.getByRole('textbox');
+  expect(input).toBeInTheDocument();
+  expect(input).toHaveValue('1');
+
+  const decrement = screen.getByLabelText('decrement');
+  expect(decrement).toBeInTheDocument();
+
+  // click 3 times on decrement
+  await userEvent.click(decrement);
+  await userEvent.click(decrement);
+  await userEvent.click(decrement);
+
+  // the value should be 0.55
+  expect(input).toHaveValue('0.55');
+});

packages/renderer/src/lib/ui/NumberInput.svelte

@@ -62,13 +62,13 @@ function onKeyPress(event: any) {
 function onDecrement(e: MouseEvent) {
   const dec = step ? step : 1;
   e.preventDefault();
-  value = Number(value) - dec;
+  value = (100 * Number(value) - 100 * dec) / 100;
 }
 
 function onIncrement(e: MouseEvent) {
   const inc = step ? step : 1;
   e.preventDefault();
-  value = Number(value) + inc;
+  value = (100 * Number(value) + 100 * inc) / 100;
 }
 </script>