From d2814650e641e61d26cf8e8c9d0a00d5a5499ac5 Mon Sep 17 00:00:00 2001
From: CorrectRoad <a778917369@gmail.com>
Date: Thu, 26 Jun 2025 16:43:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20prevent=20input=20of=20non-numeric=20va?=
 =?UTF-8?q?lues=20=E2=80=8B=E2=80=8Bin=20numer=20input=20(#21562)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/components/base/input-number/index.spec.tsx | 10 +++++-----
 web/app/components/base/input-number/index.tsx      |  8 ++++----
 web/app/styles/globals.css                          | 11 +++++++++++
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/app/components/base/input-number/index.spec.tsx b/web/app/components/base/input-number/index.spec.tsx
index 8dfd1184b..891cbd21e 100644
--- a/web/app/components/base/input-number/index.spec.tsx
+++ b/web/app/components/base/input-number/index.spec.tsx
@@ -18,7 +18,7 @@ describe('InputNumber Component', () => {
 
   it('renders input with default values', () => {
     render(<InputNumber {...defaultProps} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
     expect(input).toBeInTheDocument()
   })
 
@@ -56,7 +56,7 @@ describe('InputNumber Component', () => {
 
   it('handles direct input changes', () => {
     render(<InputNumber {...defaultProps} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: '42' } })
     expect(defaultProps.onChange).toHaveBeenCalledWith(42)
@@ -64,7 +64,7 @@ describe('InputNumber Component', () => {
 
   it('handles empty input', () => {
     render(<InputNumber {...defaultProps} value={0} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: '' } })
     expect(defaultProps.onChange).toHaveBeenCalledWith(undefined)
@@ -72,7 +72,7 @@ describe('InputNumber Component', () => {
 
   it('handles invalid input', () => {
     render(<InputNumber {...defaultProps} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: 'abc' } })
     expect(defaultProps.onChange).not.toHaveBeenCalled()
@@ -86,7 +86,7 @@ describe('InputNumber Component', () => {
 
   it('disables controls when disabled prop is true', () => {
     render(<InputNumber {...defaultProps} disabled />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
     const incrementBtn = screen.getByRole('button', { name: /increment/i })
     const decrementBtn = screen.getByRole('button', { name: /decrement/i })
 
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 98efc9446..5fd45944d 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -55,8 +55,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
   return <div className={classNames('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
-      type='text'
-      className={classNames('rounded-r-none', className)}
+      type='number'
+      className={classNames('no-spinner rounded-r-none', className)}
       value={value}
       max={max}
       min={min}
@@ -77,8 +77,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       size={size}
     />
     <div className={classNames(
-      'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
-      disabled && 'opacity-50 cursor-not-allowed',
+      'flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
+      disabled && 'cursor-not-allowed opacity-50',
       controlWrapClassName)}
     >
       <button
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index 52e36a276..353cfa2ff 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -697,4 +697,15 @@ button:focus-within {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+
+  /* Hide arrows from number input */
+  .no-spinner::-webkit-outer-spin-button,
+  .no-spinner::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .no-spinner {
+    -moz-appearance: textfield;
+  }
 }