Allow user to enter negative values in numeric input

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)
+})

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)}