From c9caaa2cec26b4e9a029a9ce45b76dad1ad123b5 Mon Sep 17 00:00:00 2001
From: Davey Shafik <davey@php.net>
Date: Thu, 14 Nov 2024 19:12:13 -0800
Subject: [PATCH] feat: Add support for inputTabIndex prop

---
 app/page.tsx                      | 19 +++++++++++++++++++
 src/components/Datepicker.tsx     |  3 +++
 src/components/Input.tsx          | 12 ++++++++++++
 src/contexts/DatepickerContext.ts |  2 ++
 src/types/index.ts                |  1 +
 5 files changed, 37 insertions(+)

diff --git a/app/page.tsx b/app/page.tsx
index cdcaef8..4b776b4 100644
--- a/app/page.tsx
+++ b/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">
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index d494a22..ddef861 100644
--- a/src/components/Datepicker.tsx
+++ b/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,
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index f95e5e8..97c45ed 100644
--- a/src/components/Input.tsx
+++ b/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
diff --git a/src/contexts/DatepickerContext.ts b/src/contexts/DatepickerContext.ts
index 6d5eec6..75467d5 100644
--- a/src/contexts/DatepickerContext.ts
+++ b/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,
diff --git a/src/types/index.ts b/src/types/index.ts
index cac5be8..ca1069e 100644
--- a/src/types/index.ts
+++ b/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;