feat: Add support for inputTabIndex prop

Author: dshafik

app/page.tsx

@@ -45,6 +45,7 @@ export default function Playground() {
     const [startWeekOn, setStartWeekOn] = useState<WeekStringType>("mon");
     const [required, setRequired] = useState(false);
     const [popoverDirection, setPopoverDirection] = useState<PopoverDirectionType>("down");
+    const [tabIndex, setTabIndex] = useState<number | undefined>(undefined);
 
     return (
         <div className="px-4 py-8">
@@ -114,6 +115,7 @@ export default function Playground() {
                     i18n={i18n}
                     disabled={disabled}
                     inputClassName={inputClassName}
+                    inputTabIndex={tabIndex}
                     containerClassName={containerClassName}
                     toggleClassName={toggleClassName}
                     displayFormat={displayFormat}
@@ -244,6 +246,23 @@ export default function Playground() {
                             </label>
                         </div>
                     </div>
+                    <div className="mb-2 w-1/2 sm:w-full">
+                        <div className="inline-flex items-center">
+                            <input
+                                type="number"
+                                className="mr-2 w-24 rounded"
+                                id="tabIndex"
+                                value={tabIndex}
+                                onChange={function (e) {
+                                    console.log(e.target.value, parseInt(e.target.value));
+                                    return setTabIndex(parseInt(e.target.value));
+                                }}
+                            />
+                            <label className="block" htmlFor="required">
+                                Tab Index
+                            </label>
+                        </div>
+                    </div>
                 </div>
 
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">

src/components/Datepicker.tsx

@@ -50,6 +50,7 @@ const Datepicker = (props: DatepickerType) => {
         inputClassName = null,
         inputId,
         inputName,
+        inputTabIndex,
 
         minDate = undefined,
         maxDate = undefined,
@@ -318,6 +319,7 @@ const Datepicker = (props: DatepickerType) => {
             inputId,
             inputName,
             inputText,
+            inputTabIndex,
             maxDate,
             minDate,
             onChange,
@@ -351,6 +353,7 @@ const Datepicker = (props: DatepickerType) => {
         value,
         disabled,
         inputClassName,
+        inputTabIndex,
         containerClassName,
         toggleClassName,
         toggleIcon,

src/components/Input.tsx

@@ -37,6 +37,7 @@ const Input = (e: Props) => {
         separator,
         disabled,
         inputClassName,
+        inputTabIndex,
         toggleClassName,
         toggleIcon,
         readOnly,
@@ -173,6 +174,15 @@ const Input = (e: Props) => {
               : defaultToggleClassName;
     }, [toggleClassName, buttonRef, classNames]);
 
+    const handleOnBlur = useCallback(() => {
+        const input = inputRef.current;
+        if (input) {
+            if (input.tabIndex !== undefined) {
+                hideDatepicker();
+            }
+        }
+    }, [inputTabIndex]);
+
     // UseEffects && UseLayoutEffect
     useEffect(() => {
         if (inputRef && e.setContextRef && typeof e.setContextRef === "function") {
@@ -282,6 +292,7 @@ const Input = (e: Props) => {
                 ref={inputRef}
                 type="text"
                 className={getClassName()}
+                tabIndex={inputTabIndex}
                 disabled={disabled}
                 readOnly={readOnly}
                 required={required}
@@ -297,6 +308,7 @@ const Input = (e: Props) => {
                 role="presentation"
                 onChange={handleInputChange}
                 onKeyDown={handleInputKeyDown}
+                onBlur={handleOnBlur}
             />
 
             <button

src/contexts/DatepickerContext.ts

@@ -48,6 +48,7 @@ interface DatepickerStore {
     inputId?: string;
     inputName?: string;
     inputText: string;
+    inputTabIndex?: number;
 
     maxDate?: DateType | null;
     minDate?: DateType | null;
@@ -97,6 +98,7 @@ const DatepickerContext = createContext<DatepickerStore>({
 
     input: undefined,
     inputClassName: "",
+    inputTabIndex: undefined,
 
     inputId: undefined,
     inputName: undefined,

src/types/index.ts

@@ -83,6 +83,7 @@ export interface DatepickerType {
     toggleIcon?: (open: boolean) => ReactNode;
     inputId?: string;
     inputName?: string;
+    inputTabIndex?: number;
     displayFormat?: string;
     readOnly?: boolean;
     minDate?: DateType;