From d9997b8e07b214fee8a167e9c3516e6d52f629e8 Mon Sep 17 00:00:00 2001
From: CorrectRoadH <a778917369@gmail.com>
Date: Thu, 26 Jun 2025 14:59:02 +0800
Subject: [PATCH] feat: preven input value in number input

---
 web/app/components/base/input-number/index.tsx |  8 ++++----
 web/app/styles/globals.css                     | 11 +++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 98efc94462..5fd45944db 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 52e36a2767..353cfa2fff 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;
+  }
 }