fix(number-input): Fix e character logic. (#6678)

.changeset/dirty-dolphins-marry.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/number-input": patch
+---
+
+Fix number input e character

packages/components/number-input/src/use-number-input.ts

@@ -380,24 +380,22 @@ export function useNumberInput(props: UseNumberInputProps = {}) {
    */
   const validateAndClamp = useCallback(() => {
     let next = counter.value as string | number
+    if (counter.value === "") return
 
-    if (next === "") return
+    const valueStartsWithE = /^[eE]/.test(counter.value.toString())
 
-    if (counter.valueAsNumber < min) {
-      next = min
-    }
+    if (valueStartsWithE) {
+      counter.setValue("")
+    } else {
+      if (counter.valueAsNumber < min) {
+        next = min
+      }
+      if (counter.valueAsNumber > max) {
+        next = max
+      }
 
-    if (counter.valueAsNumber > max) {
-      next = max
+      counter.cast(next)
     }
-
-    /**
-     * `counter.cast` does 2 things:
-     *
-     * - sanitize the value by using parseFloat and some Regex
-     * - used to round value to computed precision or decimal points
-     */
-    counter.cast(next)
   }, [counter, max, min])
 
   const onInputBlur = useCallback(() => {

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

@@ -233,11 +233,11 @@ test("should derive values from surrounding FormControl", () => {
   expect(onBlur).toHaveBeenCalled()
 })
 
-test("should fallback to min if `e` is typed", async () => {
+test("should reset value if `e` is typed", async () => {
   const { getByTestId, user } = renderComponent({ max: 30, min: 1 })
   const input = getByTestId("input")
   await user.type(input, "e")
   // value is beyond max, so it should reset to `max`
   fireEvent.blur(input)
-  expect(input).toHaveValue("1")
+  expect(input).toHaveValue("")
 })