feat: prevent input of non-numeric values ​​in numer input (#21562)

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

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

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