fix: Remove mobile device detection

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,11 @@ 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;
+
     // ====================== Parser & Formatter ======================
     /**
      * `precision` is used for formatter & onChange.
@@ -607,7 +613,7 @@ const InternalInputNumber = React.forwardRef(
         onCompositionEnd={onCompositionEnd}
         onBeforeInput={onBeforeInput}
       >
-        {controls && (
+        {mergedControls && (
           <StepHandler
             prefixCls={prefixCls}
             upNode={upHandler}

src/StepHandler.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import * as React from 'react';
 import cls from 'classnames';
-import useMobile from '@rc-component/util/lib/hooks/useMobile';
 import raf from '@rc-component/util/lib/raf';
 import SemanticContext from './SemanticContext';
 
@@ -71,11 +70,6 @@ export default function StepHandler({
   );
 
   // ======================= Render =======================
-  const isMobile = useMobile();
-  if (isMobile) {
-    return null;
-  }
-
   const handlerClassName = `${prefixCls}-handler`;
 
   const upClassName = cls(handlerClassName, `${handlerClassName}-up`, {

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(<InputNumber />);
+    const { container } = render(<InputNumber />);
     expect(container.querySelector('.rc-input-number-handler-wrap')).toBeFalsy();
   });
 
   it('should render in server side', () => {
     const serverHTML = renderToString(<InputNumber />);
     expect(serverHTML).toContain('rc-input-number-handler-wrap');
-  })
+  });
+
+  it('can show steps when set controls to true', () => {
+    const { container } = render(<InputNumber controls />);
+    expect(container.querySelector('.rc-input-number-handler-wrap')).toBeTruthy();
+  });
 });