Merge pull request #5448 from qburst/issue-5366/fix/refocus-issue-on-controlled-state-management

Fix #5366: 🐛 Fix the re-focus issue of the DatePicker element when the open state is controlled manually

Author: martijnrusschen

src/index.tsx

@@ -452,27 +452,22 @@ export default class DatePicker extends Component<
     }
   };
 
-  safeFocus = () => {
-    setTimeout(() => {
-      this.input?.focus?.({ preventScroll: true });
-    }, 0);
-  };
-
-  safeBlur = () => {
-    setTimeout(() => {
-      this.input?.blur?.();
-    }, 0);
-  };
-
   setFocus = () => {
-    this.safeFocus();
+    this.input?.focus?.({ preventScroll: true });
   };
 
   setBlur = () => {
-    this.safeBlur();
+    this.input?.blur?.();
     this.cancelFocusInput();
   };
 
+  deferBlur = () => {
+    requestAnimationFrame(() => {
+      console.log("reached");
+      this.setBlur();
+    });
+  };
+
   setOpen = (open: boolean, skipSetBlur: boolean = false): void => {
     this.setState(
       {
@@ -490,7 +485,7 @@ export default class DatePicker extends Component<
               focused: skipSetBlur ? prev.focused : false,
             }),
             () => {
-              !skipSetBlur && this.setBlur();
+              !skipSetBlur && this.deferBlur();
 
               this.setState({ inputValue: null });
             },