From 0e71f37d0760c928f6ceeee32e28658db770793a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Mon, 1 Sep 2025 14:32:54 +0800 Subject: [PATCH 1/7] fix: improve inc/dec controls logic --- src/InputNumber.tsx | 8 ++++++-- src/StepHandler.tsx | 6 ------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 5ef0697a..803064db 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -21,6 +21,7 @@ import type { HolderRef } from '@rc-component/input/lib/BaseInput'; import { BaseInputProps } from '@rc-component/input/lib/interface'; import { InputFocusOptions, triggerFocus } from '@rc-component/input/lib/utils/commonUtils'; import useFrame from './hooks/useFrame'; +import useMobile from '@rc-component/util/lib/hooks/useMobile'; export type { ValueType }; @@ -133,7 +134,7 @@ const InternalInputNumber = React.forwardRef( downHandler, keyboard, changeOnWheel = false, - controls = true, + controls, stringMode, @@ -176,6 +177,9 @@ const InternalInputNumber = React.forwardRef( } } + const isMobile = useMobile(); + const mergedControls = controls ?? !isMobile; + // ====================== Parser & Formatter ====================== /** * `precision` is used for formatter & onChange. @@ -607,7 +611,7 @@ const InternalInputNumber = React.forwardRef( onCompositionEnd={onCompositionEnd} onBeforeInput={onBeforeInput} > - {controls && ( + {mergedControls && ( Date: Mon, 1 Sep 2025 14:38:14 +0800 Subject: [PATCH 2/7] chore: add unit test --- tests/mobile.test.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/tests/mobile.test.tsx b/tests/mobile.test.tsx index 5e4c4c59..c253d701 100644 --- a/tests/mobile.test.tsx +++ b/tests/mobile.test.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; -import { render } from './util/wrapper'; -import InputNumber from '../src'; import { renderToString } from 'react-dom/server'; +import InputNumber from '../src'; +import { render } from './util/wrapper'; jest.mock('@rc-component/util/lib/isMobile', () => () => true); @@ -10,12 +9,17 @@ jest.mock('@rc-component/util/lib/isMobile', () => () => true); describe('InputNumber.Mobile', () => { it('not show steps when mobile', () => { - const {container} = render(); + const { container } = render(); expect(container.querySelector('.rc-input-number-handler-wrap')).toBeFalsy(); }); it('should render in server side', () => { const serverHTML = renderToString(); expect(serverHTML).toContain('rc-input-number-handler-wrap'); - }) + }); + + it('can show steps when set controls to true', () => { + const { container } = render(); + expect(container.querySelector('.rc-input-number-handler-wrap')).toBeTruthy(); + }); }); From 23a042ee616ba920cd87599c42a035e6c5757825 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Mon, 1 Sep 2025 14:44:05 +0800 Subject: [PATCH 3/7] chore: add comment --- src/InputNumber.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 803064db..55406c92 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -177,6 +177,8 @@ const InternalInputNumber = React.forwardRef( } } + // Mobile user experience is not ideal, so we choose to hide the step controls by default on mobile. + // However, developers can still display them by setting `controls=true`. const isMobile = useMobile(); const mergedControls = controls ?? !isMobile; From 2e4e31566e1c2a93df76f87f48b14a473e36ca7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Mon, 1 Sep 2025 18:47:35 +0800 Subject: [PATCH 4/7] Revert "chore: add unit test" This reverts commit 67167e5841907890ef49d16fbfcebac199673c99. --- tests/mobile.test.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/tests/mobile.test.tsx b/tests/mobile.test.tsx index c253d701..5e4c4c59 100644 --- a/tests/mobile.test.tsx +++ b/tests/mobile.test.tsx @@ -1,6 +1,7 @@ -import { renderToString } from 'react-dom/server'; -import InputNumber from '../src'; +import * as React from 'react'; import { render } from './util/wrapper'; +import InputNumber from '../src'; +import { renderToString } from 'react-dom/server'; jest.mock('@rc-component/util/lib/isMobile', () => () => true); @@ -9,17 +10,12 @@ jest.mock('@rc-component/util/lib/isMobile', () => () => true); describe('InputNumber.Mobile', () => { it('not show steps when mobile', () => { - const { container } = render(); + const {container} = render(); expect(container.querySelector('.rc-input-number-handler-wrap')).toBeFalsy(); }); it('should render in server side', () => { const serverHTML = renderToString(); expect(serverHTML).toContain('rc-input-number-handler-wrap'); - }); - - it('can show steps when set controls to true', () => { - const { container } = render(); - expect(container.querySelector('.rc-input-number-handler-wrap')).toBeTruthy(); - }); + }) }); From 21242cd43b8959a207355200d96bea0940319383 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Mon, 1 Sep 2025 18:49:03 +0800 Subject: [PATCH 5/7] Revert "chore: add comment" This reverts commit 23a042ee616ba920cd87599c42a035e6c5757825. --- src/InputNumber.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 55406c92..803064db 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -177,8 +177,6 @@ const InternalInputNumber = React.forwardRef( } } - // Mobile user experience is not ideal, so we choose to hide the step controls by default on mobile. - // However, developers can still display them by setting `controls=true`. const isMobile = useMobile(); const mergedControls = controls ?? !isMobile; From 8e63005434dcc1f329f87638eb82e316d5dc52a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Mon, 1 Sep 2025 18:49:38 +0800 Subject: [PATCH 6/7] Revert file --- src/InputNumber.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 803064db..5ef0697a 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -21,7 +21,6 @@ import type { HolderRef } from '@rc-component/input/lib/BaseInput'; import { BaseInputProps } from '@rc-component/input/lib/interface'; import { InputFocusOptions, triggerFocus } from '@rc-component/input/lib/utils/commonUtils'; import useFrame from './hooks/useFrame'; -import useMobile from '@rc-component/util/lib/hooks/useMobile'; export type { ValueType }; @@ -134,7 +133,7 @@ const InternalInputNumber = React.forwardRef( downHandler, keyboard, changeOnWheel = false, - controls, + controls = true, stringMode, @@ -177,9 +176,6 @@ const InternalInputNumber = React.forwardRef( } } - const isMobile = useMobile(); - const mergedControls = controls ?? !isMobile; - // ====================== Parser & Formatter ====================== /** * `precision` is used for formatter & onChange. @@ -611,7 +607,7 @@ const InternalInputNumber = React.forwardRef( onCompositionEnd={onCompositionEnd} onBeforeInput={onBeforeInput} > - {mergedControls && ( + {controls && ( Date: Mon, 1 Sep 2025 18:50:47 +0800 Subject: [PATCH 7/7] chore: remove tests/mobile.test.tsx --- tests/mobile.test.tsx | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 tests/mobile.test.tsx diff --git a/tests/mobile.test.tsx b/tests/mobile.test.tsx deleted file mode 100644 index 5e4c4c59..00000000 --- a/tests/mobile.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import { render } from './util/wrapper'; -import InputNumber from '../src'; -import { renderToString } from 'react-dom/server'; - -jest.mock('@rc-component/util/lib/isMobile', () => () => true); - -// Mobile touch experience is not user-friendly which not apply in antd. -// Let's hide operator instead. - -describe('InputNumber.Mobile', () => { - it('not show steps when mobile', () => { - const {container} = render(); - expect(container.querySelector('.rc-input-number-handler-wrap')).toBeFalsy(); - }); - - it('should render in server side', () => { - const serverHTML = renderToString(); - expect(serverHTML).toContain('rc-input-number-handler-wrap'); - }) -});