From e2834fa528720b895faf269c44f6467e42f6ff99 Mon Sep 17 00:00:00 2001
From: Oleksandr Hyriavets <oleksandr.hyriavets@depositphotos.com>
Date: Sun, 27 Jul 2025 13:37:10 +0200
Subject: [PATCH] fix(form): set the value to empty string in numeric input if
 it is NaN to fix negative numbers input

---
 .../range-editor/range-editor.test.tsx        | 27 +++++++++++++++++++
 src/components/range-editor/range-editor.tsx  |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/components/range-editor/range-editor.test.tsx

diff --git a/src/components/range-editor/range-editor.test.tsx b/src/components/range-editor/range-editor.test.tsx
new file mode 100644
index 000000000..04db32b31
--- /dev/null
+++ b/src/components/range-editor/range-editor.test.tsx
@@ -0,0 +1,27 @@
+import '@testing-library/jest-dom';
+import React from "react"
+import { render, screen } from "../../test-utils"
+import userEvent from '@testing-library/user-event'
+import RangeEditor from "./range-editor"
+import { expect, it, vi } from "vitest"
+
+it('can enter negative value to a numeric input', async () => {
+    const mockOnChangeFn = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+        <RangeEditor
+            value={0}
+            onChange={mockOnChangeFn}
+        />
+    )
+
+    const numberInput = screen.getByRole('spinbutton')
+    expect(numberInput).toBeInTheDocument()
+
+    await user.clear(numberInput)
+    await user.type(numberInput, '-5')
+    await user.tab()
+
+    expect(mockOnChangeFn).toHaveBeenCalledWith(-5)
+})
diff --git a/src/components/range-editor/range-editor.tsx b/src/components/range-editor/range-editor.tsx
index 68065cded..9d87da4b1 100644
--- a/src/components/range-editor/range-editor.tsx
+++ b/src/components/range-editor/range-editor.tsx
@@ -43,7 +43,7 @@ const RangeEditor: FunctionComponent<RangeProps & Omit<InputHTMLAttributes<HTMLI
                 <input
                     type="number"
                     className={cx('form-control', { 'ms-1': showRange })}
-                    value={currentValue}
+                    value={Number.isNaN(currentValue) ? '' : currentValue}
                     step={valueStep}
                     onChange={(e) => setCurrentValue(e.target.valueAsNumber)}
                     onBlur={() => onChange(currentValue)}