fix: use step increment precision when precisionProp is not specified

.changeset/clever-tips-hope.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/number-input": patch
+"@chakra-ui/counter": patch
+---
+
+Fixed increment/decrement of 0.1 \* step when precision is not specified.

packages/components/counter/src/use-counter.ts

@@ -94,14 +94,14 @@ export function useCounter(props: UseCounterProps = {}) {
 
   // Function to clamp the value and round it to the precision
   const clamp = useCallback(
-    (value: number) => {
+    (value: number, precisionToClamp = precision) => {
       let nextValue = value
 
       if (keepWithinRange) {
         nextValue = clampValue(nextValue, min, max)
       }
 
-      return toPrecision(nextValue, precision)
+      return toPrecision(nextValue, precisionToClamp)
     },
     [precision, keepWithinRange, max, min],
   )
@@ -124,10 +124,14 @@ export function useCounter(props: UseCounterProps = {}) {
         next = parse(value) + step
       }
 
-      next = clamp(next as number)
+      /**
+       * Get the precision using step value passed to increment function
+       */
+      const precision = precisionProp ?? getDecimalPlaces(parse(value), step)
+      next = clamp(next as number, precision)
       update(next)
     },
-    [clamp, stepProp, update, value],
+    [clamp, stepProp, update, value, precisionProp],
   )
 
   const decrement = useCallback(
@@ -141,10 +145,11 @@ export function useCounter(props: UseCounterProps = {}) {
         next = parse(value) - step
       }
 
-      next = clamp(next as number)
+      const precision = precisionProp ?? getDecimalPlaces(parse(value), step)
+      next = clamp(next as number, precision)
       update(next)
     },
-    [clamp, stepProp, update, value],
+    [clamp, stepProp, update, value, precisionProp],
   )
 
   const reset = useCallback(() => {

packages/components/number-input/tests/number-input.test.tsx

@@ -126,6 +126,25 @@ test("should increase/decrease by 0.1*step on ctrl+Arrow", async () => {
   expect(input).toHaveValue("0.00")
 })
 
+test("should increment/decrement properly without precision value", async () => {
+  const { getByTestId, user } = renderComponent({
+    defaultValue: 0,
+    step: 1,
+  })
+
+  const input = getByTestId("input")
+
+  await user.type(input, "[ArrowUp]")
+  expect(input).toHaveValue("1")
+  await user.keyboard("[ControlLeft>][ArrowUp][/ControlLeft]")
+  expect(input).toHaveValue("1.1")
+
+  await user.keyboard("[ControlLeft>][ArrowDown][/ControlLeft]")
+  expect(input).toHaveValue("1.0")
+  await user.keyboard("[ArrowDown]")
+  expect(input).toHaveValue("0")
+})
+
 test("should behave properly with precision value", async () => {
   const { getByTestId, user } = renderComponent({
     defaultValue: 0,