Merge pull request #3055 from ingef/feature/datepicker-autofocus-fix

fixed datepicker autofocus issue
ingef · May 8, 2023 · db30fa4 · db30fa4
2 parents de6c37e + 8d25f73
commit db30fa4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/frontend/src/js/ui-components/BaseInput.tsx b/frontend/src/js/ui-components/BaseInput.tsx
@@ -88,6 +88,7 @@ export interface Props {
   currencyConfig?: CurrencyConfigT;
   onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
   onChange: (val: string | number | null) => void;
 }
 
@@ -123,6 +124,7 @@ const BaseInput = forwardRef<HTMLInputElement, Props>(
       onChange,
       onFocus,
       onBlur,
+      onClick,
       placeholder,
       large,
       inputType,
@@ -179,6 +181,7 @@ const BaseInput = forwardRef<HTMLInputElement, Props>(
             large={large}
             onFocus={onFocus}
             onBlur={onBlur}
+            onClick={onClick}
             onWheel={
               (e) =>
                 (e.target as any).blur() /* to disable scrolling for number */

diff --git a/frontend/src/js/ui-components/InputDate.tsx b/frontend/src/js/ui-components/InputDate.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { createElement, createRef, forwardRef, useState } from "react";
+import { createElement, forwardRef, useRef, useState } from "react";
 import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
@@ -53,11 +53,14 @@ const InputDate = forwardRef<HTMLInputElement, Props>(
       onChange,
       onCalendarSelect,
       onFocus,
+      onBlur,
+      onClick,
       ...props
     },
     ref,
   ) => {
-    const datePickerRef = createRef<ReactDatePicker>();
+    const datePickerRef = useRef<ReactDatePicker>(null);
+    const [hasFocus, setHasFocus] = useState(false);
     const [focusBlocked, setFocusBlocked] = useState(false);
 
     return (
@@ -81,6 +84,17 @@ const InputDate = forwardRef<HTMLInputElement, Props>(
               setFocusBlocked(false);
             } else {
               onFocus?.(e);
+              setHasFocus(true);
+              datePickerRef.current?.setOpen(true);
+            }
+          }}
+          onBlur={(e) => {
+            onBlur?.(e);
+            setHasFocus(false);
+          }}
+          onClick={(e) => {
+            onClick?.(e);
+            if (hasFocus) {
               datePickerRef.current?.setOpen(true);
             }
           }}