fix focus

ohcnetwork · Sep 8, 2024 · ea7bc7d · ea7bc7d
1 parent 5feaa1b
commit ea7bc7d
Showing 1 changed file with 72 additions and 74 deletions.
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
@@ -68,7 +68,6 @@ const DateInputV2: React.FC<Props> = ({
 
   const hourScrollerRef = useRef<HTMLDivElement>(null);
   const minuteScrollerRef = useRef<HTMLDivElement>(null);
-  const dateInputRef = useRef<HTMLInputElement>(null);
   const decrement = () => {
     switch (type) {
       case "date":
@@ -300,13 +299,7 @@ const DateInputV2: React.FC<Props> = ({
             setPopOverOpen(open);
             return (
               <div>
-                <PopoverButton
-                  disabled={disabled}
-                  className="w-full"
-                  onClick={() =>
-                    setTimeout(() => dateInputRef.current?.focus(), 100)
-                  }
-                >
+                <PopoverButton disabled={disabled} className="w-full">
                   <input type="hidden" name="date" />
                   <input
                     id={id}
@@ -340,73 +333,78 @@ const DateInputV2: React.FC<Props> = ({
                         : "flex-col",
                     )}
                   >
-                    <input
-                      id="date-input"
-                      className="cui-input-base bg-secondary-50"
-                      value={
-                        editingText || (value ? getDisplayValue(value) : "")
-                      }
-                      ref={dateInputRef}
-                      placeholder={dateFormat}
-                      onChange={(e) => {
-                        const nvalue = dayjs(e.target.value, dateFormat, true);
-                        if (isDateWithinLimits(nvalue)) {
-                          onChange(nvalue.toDate());
-                          //close();
-                          setIsOpen?.(false);
-                        }
-                        let value = e.target.value.replace(/[^\d]/g, "");
-
-                        // Apply formatting for DD/MM/YYYY hh:mm a
-                        if (value.length > 2 && value.length <= 4) {
-                          value = value.slice(0, 2) + "/" + value.slice(2);
-                        } else if (value.length > 4 && value.length <= 8) {
-                          value =
-                            value.slice(0, 2) +
-                            "/" +
-                            value.slice(2, 4) +
-                            "/" +
-                            value.slice(4);
-                        } else if (value.length > 8 && value.length <= 10) {
-                          value =
-                            value.slice(0, 2) +
-                            "/" +
-                            value.slice(2, 4) +
-                            "/" +
-                            value.slice(4, 8) +
-                            " " +
-                            value.slice(8);
-                        } else if (value.length > 10 && value.length <= 12) {
-                          value =
-                            value.slice(0, 2) +
-                            "/" +
-                            value.slice(2, 4) +
-                            "/" +
-                            value.slice(4, 8) +
-                            " " +
-                            value.slice(8, 10) +
-                            ":" +
-                            value.slice(10);
-                        } else if (value.length > 12) {
-                          value =
-                            value.slice(0, 2) +
-                            "/" +
-                            value.slice(2, 4) +
-                            "/" +
-                            value.slice(4, 8) +
-                            " " +
-                            value.slice(8, 10) +
-                            ":" +
-                            value.slice(10, 12) +
-                            " " +
-                            value.slice(12);
+                    {open && (
+                      <input
+                        id="date-input"
+                        className="cui-input-base bg-secondary-50"
+                        value={
+                          editingText || (value ? getDisplayValue(value) : "")
                         }
-
-                        setEditingText(value);
-                      }}
-                      onBlur={() => setEditingText(null)}
-                    />
-
+                        autoFocus
+                        placeholder={dateFormat}
+                        onChange={(e) => {
+                          const nvalue = dayjs(
+                            e.target.value,
+                            dateFormat,
+                            true,
+                          );
+                          if (isDateWithinLimits(nvalue)) {
+                            onChange(nvalue.toDate());
+                            //close();
+                            setIsOpen?.(false);
+                          }
+                          let value = e.target.value.replace(/[^\d]/g, "");
+
+                          // Apply formatting for DD/MM/YYYY hh:mm a
+                          if (value.length > 2 && value.length <= 4) {
+                            value = value.slice(0, 2) + "/" + value.slice(2);
+                          } else if (value.length > 4 && value.length <= 8) {
+                            value =
+                              value.slice(0, 2) +
+                              "/" +
+                              value.slice(2, 4) +
+                              "/" +
+                              value.slice(4);
+                          } else if (value.length > 8 && value.length <= 10) {
+                            value =
+                              value.slice(0, 2) +
+                              "/" +
+                              value.slice(2, 4) +
+                              "/" +
+                              value.slice(4, 8) +
+                              " " +
+                              value.slice(8);
+                          } else if (value.length > 10 && value.length <= 12) {
+                            value =
+                              value.slice(0, 2) +
+                              "/" +
+                              value.slice(2, 4) +
+                              "/" +
+                              value.slice(4, 8) +
+                              " " +
+                              value.slice(8, 10) +
+                              ":" +
+                              value.slice(10);
+                          } else if (value.length > 12) {
+                            value =
+                              value.slice(0, 2) +
+                              "/" +
+                              value.slice(2, 4) +
+                              "/" +
+                              value.slice(4, 8) +
+                              " " +
+                              value.slice(8, 10) +
+                              ":" +
+                              value.slice(10, 12) +
+                              " " +
+                              value.slice(12);
+                          }
+
+                          setEditingText(value);
+                        }}
+                        onBlur={() => setEditingText(null)}
+                      />
+                    )}
                     <div className="flex flex-row items-stretch gap-4">
                       <div className="flex w-full flex-col items-center justify-between">
                         <div className="flex">