feat: improve focus behavior

docs/api.md

@@ -186,3 +186,25 @@ nav:
         </tr>
     </tbody>
 </table>
+
+## inputRef
+
+```tsx | pure
+import InputNumber, { InputNumberRef } from 'rc-input-number';
+
+const inputRef = useRef<InputNumberRef>(null);
+
+useEffect(() => {
+  inputRef.current.focus(); // the input will get focus
+  inputRef.current.blur(); // the input will lose focus
+  console.log(inputRef.current.input); // The origin input element
+}, []);
+// ....
+<InputNumber ref={inputRef} />;
+```
+
+| Property | Type                                    | Description                       |
+| -------- | --------------------------------------- | --------------------------------- |
+| focus    | `(options?: InputFocusOptions) => void` | The input get focus when called   |
+| blur     | `() => void`                            | The input loses focus when called |
+| input    | `HTMLInputElement \| null`              | The origin input element          |

docs/demo/focus.tsx

@@ -0,0 +1,28 @@
+/* eslint no-console:0 */
+import InputNumber, { InputNumberRef } from 'rc-input-number';
+import React from 'react';
+import '../../assets/index.less';
+
+export default () => {
+  const inputRef = React.useRef<InputNumberRef>(null);
+
+  return (
+    <div style={{ margin: 10 }}>
+      <InputNumber aria-label="focus example" value={10} style={{ width: 100 }} ref={inputRef} />
+      <div style={{ marginTop: 10 }}>
+        <button type="button" onClick={() => inputRef.current?.focus({ cursor: 'start' })}>
+          focus at start
+        </button>
+        <button type="button" onClick={() => inputRef.current?.focus({ cursor: 'end' })}>
+          focus at end
+        </button>
+        <button type="button" onClick={() => inputRef.current?.focus({ cursor: 'all' })}>
+          focus to select all
+        </button>
+        <button type="button" onClick={() => inputRef.current?.focus({ preventScroll: true })}>
+          focus prevent scroll
+        </button>
+      </div>
+    </div>
+  );
+};

docs/example.md

@@ -45,4 +45,6 @@ nav:
 
 <code src="./demo/wheel.tsx"></code>
 
+## focus
 
+<code src="./demo/focus.tsx"></code>

src/InputNumber.tsx

@@ -24,6 +24,15 @@ import useFrame from './hooks/useFrame';
 export type { ValueType };
 
 export interface InputNumberRef extends HTMLInputElement {
+  focus: (options?: InputFocusOptions) => void;
+  blur: () => void;
+  setSelectionRange: (
+    start: number,
+    end: number,
+    direction?: 'forward' | 'backward' | 'none',
+  ) => void;
+  select: () => void;
+  input: HTMLInputElement | null;
   nativeElement: HTMLElement;
 }
 
@@ -660,6 +669,21 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
 
   React.useImperativeHandle(ref, () =>
     proxyObject(inputFocusRef.current, {
+      focus,
+      blur: () => {
+        inputFocusRef.current?.blur();
+      },
+      setSelectionRange: (
+        start: number,
+        end: number,
+        direction?: 'forward' | 'backward' | 'none',
+      ) => {
+        inputFocusRef.current?.setSelectionRange(start, end, direction);
+      },
+      select: () => {
+        inputFocusRef.current?.select();
+      },
+      input: inputFocusRef.current,
       nativeElement: holderRef.current.nativeElement || inputNumberDomRef.current,
     }),
   );

tests/focus.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render } from '@testing-library/react';
+import InputNumber, { InputNumberRef } from 'rc-input-number';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
+
+const getInputRef = () => {
+  const ref = React.createRef<InputNumberRef>();
+  render(<InputNumber ref={ref} defaultValue={12345} />);
+  return ref;
+};
+
+describe('InputNumber.Focus', () => {
+  let inputSpy: ReturnType<typeof spyElementPrototypes>;
+  let focus: ReturnType<typeof jest.fn>;
+  let setSelectionRange: ReturnType<typeof jest.fn>;
+
+  beforeEach(() => {
+    focus = jest.fn();
+    setSelectionRange = jest.fn();
+    inputSpy = spyElementPrototypes(HTMLInputElement, {
+      focus,
+      setSelectionRange,
+    });
+  });
+
+  afterEach(() => {
+    inputSpy.mockRestore();
+  });
+
+  it('start', () => {
+    const input = getInputRef();
+    input.current?.focus({ cursor: 'start' });
+
+    expect(focus).toHaveBeenCalled();
+    expect(setSelectionRange).toHaveBeenCalledWith(expect.anything(), 0, 0);
+  });
+
+  it('end', () => {
+    const input = getInputRef();
+    input.current?.focus({ cursor: 'end' });
+
+    expect(focus).toHaveBeenCalled();
+    expect(setSelectionRange).toHaveBeenCalledWith(expect.anything(), 5, 5);
+  });
+
+  it('all', () => {
+    const input = getInputRef();
+    input.current?.focus({ cursor: 'all' });
+
+    expect(focus).toHaveBeenCalled();
+    expect(setSelectionRange).toHaveBeenCalledWith(expect.anything(), 0, 5);
+  });
+
+  it('disabled should reset focus', () => {
+    const { container, rerender } = render(<InputNumber prefixCls="rc-input-number" />);
+    const input = container.querySelector('input')!;
+
+    fireEvent.focus(input);
+    expect(container.querySelector('.rc-input-number-focused')).toBeTruthy();
+
+    rerender(<InputNumber prefixCls="rc-input-number" disabled />);
+    fireEvent.blur(input);
+
+    expect(container.querySelector('.rc-input-number-focused')).toBeFalsy();
+  });
+});

tests/input.test.tsx

@@ -224,6 +224,16 @@ describe('InputNumber.Input', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
+  it('input should work', () => {
+    const ref = React.createRef<InputNumberRef>();
+    const { container } = render(<InputNumber ref={ref} />);
+    const inputEl = container.querySelector('input')!;
+    const rootEl = container.querySelector('.rc-input-number')!;
+
+    expect(ref.current?.input).toBe(inputEl);
+    expect(ref.current?.nativeElement).toBe(rootEl);
+  });
+
   describe('nativeElement', () => {
     it('basic', () => {
       const ref = React.createRef<InputNumberRef>();