fix: add tabIndex support (#64)

Co-authored-by: peng.yang <[email protected]>

Author: forl

examples/basic.tsx

@@ -33,7 +33,7 @@ export default () => {
     <div>
       <h1>Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}</h1>
 
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
           <Picker<Moment> {...sharedProps} locale={zhCN} />
@@ -121,6 +121,10 @@ export default () => {
           <h3>Year</h3>
           <Picker<Moment> {...sharedProps} locale={zhCN} picker="year" />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>Keyboard navigation (Tab key) disabled</h3>
+          <Picker<Moment> {...sharedProps} locale={enUS} tabIndex={-1} />
+        </div>
       </div>
     </div>
   );

src/Picker.tsx

@@ -45,6 +45,7 @@ export interface PickerSharedProps<DateType> extends React.AriaAttributes {
   allowClear?: boolean;
   autoFocus?: boolean;
   disabled?: boolean;
+  tabIndex?: number;
   open?: boolean;
   defaultOpen?: boolean;
   /** Make input readOnly to avoid popup keyboard in mobile */
@@ -129,6 +130,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   const {
     prefixCls = 'rc-picker',
     id,
+    tabIndex,
     style,
     className,
     dropdownClassName,
@@ -466,6 +468,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
           <div className={`${prefixCls}-input`} ref={inputDivRef}>
             <input
               id={id}
+              tabIndex={tabIndex}
               disabled={disabled}
               readOnly={inputReadOnly || !typing}
               value={text}