fix: miss auto focus (#715)

Author: zombieJ

docs/examples/debug.tsx

@@ -153,6 +153,7 @@ export default () => {
         // multiple
         format="YYYY-MM-DD"
         showTime
+        // autoFocus
         defaultValue={[
           dayjs(),
           // dayjs('2000-01-01'),
@@ -196,6 +197,7 @@ export default () => {
         }}
         changeOnBlur={false}
         showNow
+        autoFocus
         panelRender={(ori) => <>2333{ori}</>}
         placeholder={['Start', 'End']}
         suffixIcon="🧶"

src/PickerInput/Selector/RangeSelector.tsx

@@ -108,6 +108,7 @@ function RangeSelector<DateType extends object = any>(
     // Input
     required,
     'aria-required': ariaRequired,
+    autoFocus,
 
     ...restProps
   } = props;
@@ -206,6 +207,10 @@ function RangeSelector<DateType extends object = any>(
   // ======================== Clear =========================
   const showClear = clearIcon && ((value[0] && !disabled[0]) || (value[1] && !disabled[1]));
 
+  // ======================= Disabled =======================
+  const startAutoFocus = autoFocus && !disabled[0];
+  const endAutoFocus = autoFocus && !startAutoFocus && !disabled[1];
+
   // ======================== Render ========================
   return (
     <ResizeObserver onResize={syncActiveOffset}>
@@ -237,9 +242,14 @@ function RangeSelector<DateType extends object = any>(
           onMouseDown?.(e);
         }}
       >
-        <Input ref={inputStartRef} {...getInputProps(0)} date-range="start" />
+        <Input
+          ref={inputStartRef}
+          {...getInputProps(0)}
+          autoFocus={startAutoFocus}
+          date-range="start"
+        />
         <div className={`${prefixCls}-range-separator`}>{separator}</div>
-        <Input ref={inputEndRef} {...getInputProps(1)} date-range="end" />
+        <Input ref={inputEndRef} {...getInputProps(1)} autoFocus={endAutoFocus} date-range="end" />
         <div className={`${prefixCls}-active-bar`} style={activeBarStyle} />
         <Icon type="suffix" icon={suffixIcon} />
         {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}

src/PickerInput/Selector/SingleSelector/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { isSame } from '../../../utils/dateUtil';
 import type { InternalMode, SelectorProps, SelectorRef } from '../../../interface';
+import { isSame } from '../../../utils/dateUtil';
 import PickerContext from '../../context';
 import type { PickerProps } from '../../SinglePicker';
 import useInputProps from '../hooks/useInputProps';
@@ -96,6 +96,7 @@ function SingleSelector<DateType extends object = any>(
     // Input
     required,
     'aria-required': ariaRequired,
+    autoFocus,
 
     ...restProps
   } = props;
@@ -170,6 +171,7 @@ function SingleSelector<DateType extends object = any>(
         value={value.map(getText).join(',')}
         ref={inputRef as any}
         readOnly
+        autoFocus={autoFocus}
       />
       <Icon type="suffix" icon={suffixIcon} />
       {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
@@ -178,6 +180,7 @@ function SingleSelector<DateType extends object = any>(
     <Input
       ref={inputRef}
       {...getInputProps()}
+      autoFocus={autoFocus}
       suffixIcon={suffixIcon}
       clearIcon={showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
       showActiveCls={false}

tests/new-range.spec.tsx

@@ -5,8 +5,8 @@ import 'dayjs/locale/ar';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
-import zh_CN from '../src/locale/zh_CN';
 import type { RangePickerProps } from '../src';
+import zh_CN from '../src/locale/zh_CN';
 import {
   closePicker,
   DayRangePicker,
@@ -1196,4 +1196,9 @@ describe('NewPicker.Range', () => {
 
     expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-03', '1990-09-03']);
   });
+
+  it('autoFocus', () => {
+    const { container } = render(<DayRangePicker disabled={[true, false]} autoFocus />);
+    expect(document.activeElement).toBe(container.querySelectorAll('input')[1]);
+  });
 });

tests/picker.spec.tsx

@@ -1328,4 +1328,9 @@ describe('Picker.Basic', () => {
 
     expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(2);
   });
+
+  it('autoFocus', () => {
+    const { container } = render(<DayPicker autoFocus />);
+    expect(document.activeElement).toBe(container.querySelector('input'));
+  });
 });