fix: add tabIndex support (react-component#779)

Co-authored-by: Yikai <[email protected]>

Author: wang-yikai

src/PickerInput/Selector/RangeSelector.tsx

@@ -111,6 +111,7 @@ function RangeSelector<DateType extends object = any>(
     required,
     'aria-required': ariaRequired,
     autoFocus,
+    tabIndex,
 
     ...restProps
   } = props;
@@ -241,10 +242,17 @@ function RangeSelector<DateType extends object = any>(
           ref={inputStartRef}
           {...getInputProps(0)}
           autoFocus={startAutoFocus}
+          tabIndex={tabIndex}
           date-range="start"
         />
         <div className={`${prefixCls}-range-separator`}>{separator}</div>
-        <Input ref={inputEndRef} {...getInputProps(1)} autoFocus={endAutoFocus} date-range="end" />
+        <Input
+          ref={inputEndRef}
+          {...getInputProps(1)}
+          autoFocus={endAutoFocus}
+          tabIndex={tabIndex}
+          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

@@ -2,12 +2,12 @@ import classNames from 'classnames';
 import * as React from 'react';
 import type { InternalMode, PickerRef, SelectorProps } from '../../../interface';
 import { isSame } from '../../../utils/dateUtil';
-import PickerContext from '../../context';
 import type { PickerProps } from '../../SinglePicker';
-import useInputProps from '../hooks/useInputProps';
-import useRootProps from '../hooks/useRootProps';
+import PickerContext from '../../context';
 import Icon, { ClearIcon } from '../Icon';
 import Input, { type InputRef } from '../Input';
+import useInputProps from '../hooks/useInputProps';
+import useRootProps from '../hooks/useRootProps';
 import MultipleDates from './MultipleDates';
 
 export interface SingleSelectorProps<DateType extends object = any>
@@ -99,6 +99,7 @@ function SingleSelector<DateType extends object = any>(
     required,
     'aria-required': ariaRequired,
     autoFocus,
+    tabIndex,
 
     removeIcon,
 
@@ -178,6 +179,7 @@ function SingleSelector<DateType extends object = any>(
         ref={inputRef as any}
         readOnly
         autoFocus={autoFocus}
+        tabIndex={tabIndex}
       />
       <Icon type="suffix" icon={suffixIcon} />
       {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
@@ -187,6 +189,7 @@ function SingleSelector<DateType extends object = any>(
       ref={inputRef}
       {...getInputProps()}
       autoFocus={autoFocus}
+      tabIndex={tabIndex}
       suffixIcon={suffixIcon}
       clearIcon={showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
       showActiveCls={false}

tests/new-range.spec.tsx

@@ -1095,6 +1095,16 @@ describe('NewPicker.Range', () => {
     );
   });
 
+  it('pass tabIndex', () => {
+    const { container } = render(
+      <div>
+        <DayRangePicker tabIndex={-1}/>
+      </div>,
+    );
+
+    expect(container.querySelector('input').getAttribute('tabIndex')).toBe('-1');
+  });
+
   describe('7 days', () => {
     const SevenRangePicker = (props: Partial<RangePickerProps<Dayjs>>) => (
       <DayRangePicker

tests/picker.spec.tsx

@@ -13,12 +13,12 @@ import type { PanelMode, PickerMode } from '../src/interface';
 import enUS from '../src/locale/en_US';
 import zhCN from '../src/locale/zh_CN';
 import {
-  clearValue,
-  closePicker,
-  confirmOK,
   // MomentPicker,
   DayPicker,
   DayRangePicker,
+  clearValue,
+  closePicker,
+  confirmOK,
   findCell,
   getDay,
   isOpen,
@@ -365,6 +365,16 @@ describe('Picker.Basic', () => {
       expect(onBlur).toHaveBeenCalled();
       expect(document.querySelector('.rc-picker-focused')).toBeFalsy();
     });
+
+    it('pass tabIndex', () => {
+      const { container } = render(
+        <div>
+          <DayPicker tabIndex={-1}/>
+        </div>,
+      );
+
+      expect(container.querySelector('input').getAttribute('tabIndex')).toBe('-1');
+    });
   });
 
   // No need in latest version

tests/range.spec.tsx

@@ -11,10 +11,10 @@ import React from 'react';
 import type { PickerRef, RangePickerProps } from '../src';
 import type { PickerMode } from '../src/interface';
 import {
+  DayRangePicker,
   clearValue,
   clickButton,
   closePicker,
-  DayRangePicker,
   findCell,
   getDay,
   inputValue,
@@ -537,6 +537,16 @@ describe('Picker.Range', () => {
 
       matchValues(container, '1990-09-13 01:02:03', '1990-09-23 05:06:07');
     });
+
+    it('pass tabIndex', () => {
+      const { container } = render(
+        <div>
+          <DayRangePicker tabIndex={-1}/>
+        </div>,
+      );
+
+      expect(container.querySelector('input').getAttribute('tabIndex')).toBe('-1');
+    });
   });
 
   it('mode is array', () => {