From 2a349e10be905708719edb8d79f73a84fda76986 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Wed, 31 Jul 2024 19:31:07 +0530
Subject: [PATCH 1/9] fix: fixes DatePicker calendar close issue on clickAway

---
 .../src/components/DatePicker/DatePicker.tsx  | 31 +++++++++++++++++--
 .../DatePicker/plugins/fixEventsPlugin.js     | 16 ++++++++++
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
index a07ffe2d9f0a..40c3cdbd9f96 100644
--- a/packages/react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -444,9 +444,7 @@ const DatePicker = React.forwardRef(function DatePicker(
   const lastStartValue = useRef('');
 
   // fix datepicker deleting the selectedDate when the calendar closes
-  const onCalendarClose = (selectedDates, dateStr) => {
-    endInputField?.current?.focus();
-    calendarRef?.current?.calendarContainer?.classList.remove('open');
+  const onCalendarClose = (selectedDates, dateStr, instance, e) => {
     setTimeout(() => {
       if (
         lastStartValue.current &&
@@ -460,6 +458,13 @@ const DatePicker = React.forwardRef(function DatePicker(
           calendarRef.current.config.dateFormat
         );
       }
+      if (
+        e &&
+        e.type === 'click' &&
+        !instance.config._input.contains(e.target)
+      ) {
+        calendarRef.current.close();
+      }
       if (onClose) {
         onClose(
           calendarRef.current.selectedDates,
@@ -610,6 +615,7 @@ const DatePicker = React.forwardRef(function DatePicker(
     const { current: end } = endInputField;
     const flatpickerconfig: any = {
       inline: inline ?? false,
+      onClose: onCalendarClose,
       disableMobile: true,
       defaultDate: value,
       closeOnSelect: closeOnSelect,
@@ -832,6 +838,25 @@ const DatePicker = React.forwardRef(function DatePicker(
     }
   }, [inline]);
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        calendarRef.current &&
+        !calendarRef.current.calendarContainer.contains(event.target) &&
+        !startInputField.current.contains(event.target) &&
+        (!endInputField.current ||
+          !endInputField.current.contains(event.target))
+      ) {
+        calendarRef.current.close();
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, []);
+
   useEffect(() => {
     if (calendarRef?.current?.set) {
       if (value !== undefined) {
diff --git a/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js b/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
index 8595c9cd6a77..e779049b72a5 100644
--- a/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
+++ b/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
@@ -13,6 +13,20 @@ import { match, keys } from '../../../internal/keyboard';
  */
 export default (config) => (fp) => {
   const { inputFrom, inputTo, lastStartValue } = config;
+  /**
+   * Handles `click` outside to close calendar
+   */
+  const handleClickOutside = (event) => {
+    if (
+      !fp.isOpen ||
+      fp.calendarContainer.contains(event.target) ||
+      event.target === inputFrom ||
+      event.target === inputTo
+    ) {
+      return;
+    }
+    fp.close();
+  };
   /**
    * Handles `keydown` event.
    */
@@ -127,6 +141,7 @@ export default (config) => (fp) => {
       inputTo.removeEventListener('blur', handleBlur, true);
     }
     inputFrom.removeEventListener('keydown', handleKeydown, true);
+    document.removeEventListener('click', handleClickOutside, true);
   };
 
   /**
@@ -140,6 +155,7 @@ export default (config) => (fp) => {
       inputTo.addEventListener('keydown', handleKeydown, true);
       inputTo.addEventListener('blur', handleBlur, true);
     }
+    document.addEventListener('click', handleClickOutside, true);
   };
 
   /**

From 3bb083f9bd5f3d6b459490a07eca88255ad338fc Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Thu, 1 Aug 2024 16:21:33 +0530
Subject: [PATCH 2/9] fix(DatePicker): fixes close calendar issue on click away

---
 .../DatePicker/DatePicker.stories.js          | 92 +++++++++++++++++-
 .../src/components/DatePicker/DatePicker.tsx  | 95 +++++++++++--------
 2 files changed, 148 insertions(+), 39 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 3616c49fbecb..c383261933db 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
+import Button from '../Button';
 
 import DatePicker from './DatePicker';
 import DatePickerSkeleton from './DatePicker.Skeleton';
@@ -55,10 +56,50 @@ export const SingleWithCalendar = () => (
     />
   </DatePicker>
 );
+export const Test2 = () => {
+  const [date, setDate] = useState();
+  return (
+    <>
+      <DatePicker
+        datePickerType="single"
+        value={date}
+        onChange={(value) => {
+          console.log('check onchange bugs', value);
+          setDate(value);
+        }}
+        onClose={(e) => {
+          console.log(' check onclose', e);
+        }}>
+        <DatePickerInput
+          placeholder="mm/dd/yyyy"
+          labelText="Date Picker label"
+          id="date-picker-simple"
+        />
+      </DatePicker>
+      <button
+        type="button"
+        onClick={() => {
+          console.log('date', date);
+          setDate('');
+        }}>
+        clear
+      </button>
 
+      <span> value is {date?.toLocaleString()}</span>
+    </>
+  );
+};
 export const RangeWithCalendar = () => {
   return (
-    <DatePicker datePickerType="range">
+    <DatePicker
+      datePickerType="range"
+      onChange={(e) => {
+        console.log('check onchange bugs', e);
+      }}
+      onClose={(e) => {
+        console.log(' check onclose', e);
+      }}
+      closeOnSelect={false}>
       <DatePickerInput
         id="date-picker-input-id-start"
         placeholder="mm/dd/yyyy"
@@ -74,7 +115,54 @@ export const RangeWithCalendar = () => {
     </DatePicker>
   );
 };
+export const Test = () => {
+  const [date, setDate] = useState(['', '']);
+  useEffect(() => {
+    console.log('selected date:', date);
+  }, [date]);
+
+  const handleChange = (range) => {
+    const [startDate, endDate] = range ?? ['', ''];
+
+    if (!startDate || !endDate) return;
 
+    setDate([startDate, endDate]);
+  };
+
+  return (
+    <>
+      <div className="buttonsGroup">
+        <div className="button">
+          <Button kind="ghost" onClick={() => setDate(['', ''])}>
+            reset
+          </Button>
+        </div>
+      </div>
+      <DatePicker
+        light
+        datePickerType="range"
+        dateFormat="m/d/Y"
+        value={date}
+        //   onChange={(vals) => handleChange(vals)}
+        onClose={(e) => {
+          console.log('check onclose', e);
+        }}>
+        <DatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText="Start date"
+          size="md"
+        />
+        <DatePickerInput
+          id="date-picker-input-id-finish"
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+          size="md"
+        />
+      </DatePicker>
+    </>
+  );
+};
 export const SimpleWithLayer = () => (
   <WithLayer>
     {(layer) => (
diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
index 40c3cdbd9f96..3d5a6c8a7ab8 100644
--- a/packages/react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -444,36 +444,38 @@ const DatePicker = React.forwardRef(function DatePicker(
   const lastStartValue = useRef('');
 
   // fix datepicker deleting the selectedDate when the calendar closes
-  const onCalendarClose = (selectedDates, dateStr, instance, e) => {
-    setTimeout(() => {
-      if (
-        lastStartValue.current &&
-        selectedDates[0] &&
-        !startInputField.current.value
-      ) {
-        startInputField.current.value = lastStartValue.current;
-        calendarRef.current.setDate(
-          [startInputField.current.value, endInputField?.current?.value],
-          true,
-          calendarRef.current.config.dateFormat
-        );
-      }
-      if (
-        e &&
-        e.type === 'click' &&
-        !instance.config._input.contains(e.target)
-      ) {
-        calendarRef.current.close();
-      }
-      if (onClose) {
-        onClose(
-          calendarRef.current.selectedDates,
-          dateStr,
-          calendarRef.current
-        );
+  const onCalendarClose = useCallback(
+    (selectedDates, dateStr, instance, e) => {
+      // Handle the case whewhen it's called from click outside handler
+      if (e && e.type === 'clickOutside') {
+        return;
       }
-    });
-  };
+
+      setTimeout(() => {
+        if (
+          lastStartValue.current &&
+          selectedDates[0] &&
+          !startInputField.current.value
+        ) {
+          startInputField.current.value = lastStartValue.current;
+          calendarRef.current.setDate(
+            [startInputField.current.value, endInputField?.current?.value],
+            true,
+            calendarRef.current.config.dateFormat
+          );
+        }
+        // Call the prop's onClose if it exists
+        if (onClose) {
+          onClose(
+            calendarRef.current.selectedDates,
+            dateStr,
+            calendarRef.current
+          );
+        }
+      });
+    },
+    [onClose]
+  );
 
   const endInputField = useRef<HTMLTextAreaElement>(null);
   const calendarRef: any | undefined = useRef(null);
@@ -659,7 +661,7 @@ const DatePicker = React.forwardRef(function DatePicker(
           savedOnChange(...args);
         }
       },
-      onClose: savedOnClose,
+
       onReady: onHook,
       onMonthChange: onHook,
       onYearChange: onHook,
@@ -839,23 +841,42 @@ const DatePicker = React.forwardRef(function DatePicker(
   }, [inline]);
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
+    let isMouseDown = false;
+
+    const handleMouseDown = (event) => {
       if (
         calendarRef.current &&
+        calendarRef.current.isOpen &&
         !calendarRef.current.calendarContainer.contains(event.target) &&
         !startInputField.current.contains(event.target) &&
-        (!endInputField.current ||
-          !endInputField.current.contains(event.target))
+        !endInputField.current?.contains(event.target)
       ) {
-        calendarRef.current.close();
+        isMouseDown = true;
+        // Close the calendar immediately on mousedown
+        closeCalendar(event);
+      }
+    };
+
+    const closeCalendar = (event) => {
+      console.log('calendarRef', calendarRef);
+      calendarRef.current.close();
+      // Remove focus from endDate calendar input
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
       }
+      onCalendarClose(
+        calendarRef.current.selectedDates,
+        '',
+        calendarRef.current,
+        { type: 'clickOutside' }
+      );
     };
-    document.addEventListener('click', handleClickOutside, true);
+    document.addEventListener('mousedown', handleMouseDown, true);
 
     return () => {
-      document.removeEventListener('click', handleClickOutside, true);
+      document.removeEventListener('mousedown', handleMouseDown, true);
     };
-  }, []);
+  }, [calendarRef, startInputField, endInputField, onCalendarClose]);
 
   useEffect(() => {
     if (calendarRef?.current?.set) {

From fb2ad2cd01297dba0ea30ccb962b3b1e620dca93 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Thu, 1 Aug 2024 18:56:39 +0530
Subject: [PATCH 3/9] fix: covers empty value conditions

---
 .../DatePicker/DatePicker.stories.js          | 69 ++++++++++++++++++-
 .../src/components/DatePicker/DatePicker.tsx  | 14 +++-
 2 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index c383261933db..4757d25981ee 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -36,8 +36,15 @@ export default {
   },
 };
 
-export const Simple = () => (
-  <DatePicker datePickerType="simple">
+export const Simple1 = () => (
+  <DatePicker
+    datePickerType="simple"
+    onChange={(value) => {
+      console.log('check onchange bugs', value);
+    }}
+    onClose={(e) => {
+      console.log(' check onclose', e);
+    }}>
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
@@ -46,8 +53,64 @@ export const Simple = () => (
   </DatePicker>
 );
 
+export const Test33 = () => {
+  const [currentDate, setCurrentDate] = useState(null);
+  const [inputText, setInputText] = useState('');
+  const [currentTypedDate, setCurrentTypedDate] = useState('');
+
+  return (
+    <div>
+      <DatePicker
+        id="testDateField"
+        datePickerType="single"
+        allowInput={true}
+        dateFormat="d/m/Y"
+        locale="en"
+        onChange={(event) => {
+          if (event && Array.isArray(event) && event.length) {
+            setCurrentDate(event[0]);
+          } else {
+            setCurrentDate(null);
+          }
+        }}>
+        <DatePickerInput
+          id="testDateFieldInput"
+          datePickerType="single"
+          placeholder="dd/mm/yyyy"
+          labelText="Date"
+          size="md"
+          onChange={(event) => {
+            setInputText(event?.target?.value);
+          }}
+          onBlur={(event) => {
+            setCurrentTypedDate(inputText);
+          }}
+        />
+      </DatePicker>
+      <br />
+      <p style={{ fontWeight: 600, fontSize: '10pt' }}>Date picker date:</p>
+      <p style={{ fontSize: '11pt' }}>
+        {currentDate && currentDate.toISOString
+          ? currentDate.toDateString()
+          : 'No date'}
+      </p>
+      <br />
+      <p style={{ fontWeight: 600, fontSize: '10pt' }}>Date input date:</p>
+      <p style={{ fontSize: '11pt' }}>
+        {currentTypedDate ? currentTypedDate : 'No date typed'}
+      </p>
+    </div>
+  );
+};
 export const SingleWithCalendar = () => (
-  <DatePicker datePickerType="single">
+  <DatePicker
+    datePickerType="single"
+    onChange={(value) => {
+      console.log('check onchange bugs', value);
+    }}
+    onClose={(e) => {
+      console.log(' check onclose', e);
+    }}>
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
index 3d5a6c8a7ab8..cd4b79bf96fd 100644
--- a/packages/react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -839,6 +839,19 @@ const DatePicker = React.forwardRef(function DatePicker(
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
+  useEffect(() => {
+    //when value prop is set to empty, this clears the faltpicker's calendar instance and text input
+    if (value === '') {
+      calendarRef.current?.clear();
+      if (startInputField.current) {
+        startInputField.current.value = '';
+      }
+
+      if (endInputField.current) {
+        endInputField.current.value = '';
+      }
+    }
+  }, [value]);
 
   useEffect(() => {
     let isMouseDown = false;
@@ -858,7 +871,6 @@ const DatePicker = React.forwardRef(function DatePicker(
     };
 
     const closeCalendar = (event) => {
-      console.log('calendarRef', calendarRef);
       calendarRef.current.close();
       // Remove focus from endDate calendar input
       if (document.activeElement instanceof HTMLElement) {

From 046714ff5d6773c00141603fb7df57735b898200 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Thu, 1 Aug 2024 20:17:30 +0530
Subject: [PATCH 4/9] refactor: updates avt test as per 1.58 version

---
 e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js | 2 +-
 packages/react/src/components/DatePicker/DatePicker.stories.js | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js b/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js
index 386c95ed1ad1..47a1bdc67042 100644
--- a/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js
+++ b/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js
@@ -98,7 +98,7 @@ test.describe('@avt FluidDatePicker', () => {
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
     await expect(
-      page.locator('input#date-picker-input-id-finish')
+      page.locator('input#date-picker-input-id-start')
     ).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 4757d25981ee..51fde8c8f8da 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -161,8 +161,7 @@ export const RangeWithCalendar = () => {
       }}
       onClose={(e) => {
         console.log(' check onclose', e);
-      }}
-      closeOnSelect={false}>
+      }}>
       <DatePickerInput
         id="date-picker-input-id-start"
         placeholder="mm/dd/yyyy"

From be7eac4a925e59530f68d8369e4163023a2676e9 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Thu, 1 Aug 2024 21:10:05 +0530
Subject: [PATCH 5/9] refactor: reverts changes made by renovate on avt test

---
 e2e/components/DatePicker/DatePicker-test.avt.e2e.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
index 94f9afde1c41..9c1e4f2f911b 100644
--- a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
+++ b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
@@ -125,7 +125,7 @@ test.describe('@avt DatePicker', () => {
     await page.keyboard.press('Enter');
     await page.keyboard.press('Enter');
     await expect(
-      page.locator('input#date-picker-input-id-finish')
+      page.locator('input#date-picker-input-id-start')
     ).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/

From f9dd2d01b6e516dc6460770765578df6708e86f5 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Fri, 2 Aug 2024 00:17:09 +0530
Subject: [PATCH 6/9] refactor: removes callback and dependency from useeffect

---
 .../src/components/DatePicker/DatePicker.tsx  | 72 ++++++++-----------
 1 file changed, 30 insertions(+), 42 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
index cd4b79bf96fd..af54a3e53764 100644
--- a/packages/react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -444,45 +444,40 @@ const DatePicker = React.forwardRef(function DatePicker(
   const lastStartValue = useRef('');
 
   // fix datepicker deleting the selectedDate when the calendar closes
-  const onCalendarClose = useCallback(
-    (selectedDates, dateStr, instance, e) => {
-      // Handle the case whewhen it's called from click outside handler
-      if (e && e.type === 'clickOutside') {
-        return;
-      }
+  const onCalendarClose = (selectedDates, dateStr, instance, e) => {
+    // Handle the case whewhen it's called from click outside handler
+    if (e && e.type === 'clickOutside') {
+      return;
+    }
 
-      setTimeout(() => {
-        if (
-          lastStartValue.current &&
-          selectedDates[0] &&
-          !startInputField.current.value
-        ) {
-          startInputField.current.value = lastStartValue.current;
-          calendarRef.current.setDate(
-            [startInputField.current.value, endInputField?.current?.value],
-            true,
-            calendarRef.current.config.dateFormat
-          );
-        }
-        // Call the prop's onClose if it exists
-        if (onClose) {
-          onClose(
-            calendarRef.current.selectedDates,
-            dateStr,
-            calendarRef.current
-          );
-        }
-      });
-    },
-    [onClose]
-  );
+    setTimeout(() => {
+      if (
+        lastStartValue.current &&
+        selectedDates[0] &&
+        !startInputField.current.value
+      ) {
+        startInputField.current.value = lastStartValue.current;
+        calendarRef.current.setDate(
+          [startInputField.current.value, endInputField?.current?.value],
+          true,
+          calendarRef.current.config.dateFormat
+        );
+      }
+      // Call the prop's onClose if it exists
+      if (onClose) {
+        onClose(
+          calendarRef.current.selectedDates,
+          dateStr,
+          calendarRef.current
+        );
+      }
+    });
+  };
 
   const endInputField = useRef<HTMLTextAreaElement>(null);
   const calendarRef: any | undefined = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
-  const savedOnClose = useSavedCallback(
-    datePickerType === 'range' ? onCalendarClose : onClose
-  );
+
   const savedOnOpen = useSavedCallback(onOpen);
 
   const datePickerClasses = cx(`${prefix}--date-picker`, {
@@ -780,14 +775,7 @@ const DatePicker = React.forwardRef(function DatePicker(
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    savedOnChange,
-    savedOnClose,
-    savedOnOpen,
-    readOnly,
-    closeOnSelect,
-    hasInput,
-  ]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()

From 0904a99c8621b38bf411d84e27f0998ed6f0c2f2 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Fri, 2 Aug 2024 01:06:38 +0530
Subject: [PATCH 7/9] refactor: callback is only added to onCalendarClose

---
 .../DatePicker/DatePicker.stories.js          |  1 -
 .../src/components/DatePicker/DatePicker.tsx  | 59 ++++++++++---------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 607442fc647a..67207cbf27ba 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -8,7 +8,6 @@
 import React, { useState, useEffect } from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
-import Button from '../Button';
 
 import DatePicker from './DatePicker';
 import DatePickerSkeleton from './DatePicker.Skeleton';
diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
index af54a3e53764..432ee4790cd7 100644
--- a/packages/react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -444,35 +444,38 @@ const DatePicker = React.forwardRef(function DatePicker(
   const lastStartValue = useRef('');
 
   // fix datepicker deleting the selectedDate when the calendar closes
-  const onCalendarClose = (selectedDates, dateStr, instance, e) => {
-    // Handle the case whewhen it's called from click outside handler
-    if (e && e.type === 'clickOutside') {
-      return;
-    }
-
-    setTimeout(() => {
-      if (
-        lastStartValue.current &&
-        selectedDates[0] &&
-        !startInputField.current.value
-      ) {
-        startInputField.current.value = lastStartValue.current;
-        calendarRef.current.setDate(
-          [startInputField.current.value, endInputField?.current?.value],
-          true,
-          calendarRef.current.config.dateFormat
-        );
-      }
-      // Call the prop's onClose if it exists
-      if (onClose) {
-        onClose(
-          calendarRef.current.selectedDates,
-          dateStr,
-          calendarRef.current
-        );
+  const onCalendarClose = useCallback(
+    (selectedDates, dateStr, instance, e) => {
+      // Handle the case whewhen it's called from click outside handler
+      if (e && e.type === 'clickOutside') {
+        return;
       }
-    });
-  };
+
+      setTimeout(() => {
+        if (
+          lastStartValue.current &&
+          selectedDates[0] &&
+          !startInputField.current.value
+        ) {
+          startInputField.current.value = lastStartValue.current;
+          calendarRef.current.setDate(
+            [startInputField.current.value, endInputField?.current?.value],
+            true,
+            calendarRef.current.config.dateFormat
+          );
+        }
+        // Call the prop's onClose if it exists
+        if (onClose) {
+          onClose(
+            calendarRef.current.selectedDates,
+            dateStr,
+            calendarRef.current
+          );
+        }
+      });
+    },
+    [onClose]
+  );
 
   const endInputField = useRef<HTMLTextAreaElement>(null);
   const calendarRef: any | undefined = useRef(null);

From f25428e5861b88f2847449e8f68c4d283994bd4c Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Fri, 2 Aug 2024 14:22:24 +0530
Subject: [PATCH 8/9] refactor: deprecates the usage is setTimeout to use
 useEffect

---
 .../src/components/DatePicker/DatePicker.tsx  | 65 +++++++++++--------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
index 432ee4790cd7..e228653ac4c7 100644
--- a/packages/react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -443,39 +443,48 @@ const DatePicker = React.forwardRef(function DatePicker(
 
   const lastStartValue = useRef('');
 
+  interface CalendarCloseEvent {
+    selectedDates: Date[];
+    dateStr: string;
+    instance: object; //This is `Intance` of flatpicker
+  }
+  const [calendarCloseEvent, setCalendarCloseEvent] =
+    useState<CalendarCloseEvent | null>(null);
+
   // fix datepicker deleting the selectedDate when the calendar closes
-  const onCalendarClose = useCallback(
-    (selectedDates, dateStr, instance, e) => {
-      // Handle the case whewhen it's called from click outside handler
-      if (e && e.type === 'clickOutside') {
-        return;
+  const handleCalendarClose = useCallback(
+    (selectedDates, dateStr, instance) => {
+      if (
+        lastStartValue.current &&
+        selectedDates[0] &&
+        !startInputField.current.value
+      ) {
+        startInputField.current.value = lastStartValue.current;
+        calendarRef.current.setDate(
+          [startInputField.current.value, endInputField?.current?.value],
+          true,
+          calendarRef.current.config.dateFormat
+        );
+      }
+      if (onClose) {
+        onClose(selectedDates, dateStr, instance);
       }
-
-      setTimeout(() => {
-        if (
-          lastStartValue.current &&
-          selectedDates[0] &&
-          !startInputField.current.value
-        ) {
-          startInputField.current.value = lastStartValue.current;
-          calendarRef.current.setDate(
-            [startInputField.current.value, endInputField?.current?.value],
-            true,
-            calendarRef.current.config.dateFormat
-          );
-        }
-        // Call the prop's onClose if it exists
-        if (onClose) {
-          onClose(
-            calendarRef.current.selectedDates,
-            dateStr,
-            calendarRef.current
-          );
-        }
-      });
     },
     [onClose]
   );
+  const onCalendarClose = (selectedDates, dateStr, instance, e) => {
+    if (e && e.type === 'clickOutside') {
+      return;
+    }
+    setCalendarCloseEvent({ selectedDates, dateStr, instance });
+  };
+  useEffect(() => {
+    if (calendarCloseEvent) {
+      const { selectedDates, dateStr, instance } = calendarCloseEvent;
+      handleCalendarClose(selectedDates, dateStr, instance);
+      setCalendarCloseEvent(null);
+    }
+  }, [calendarCloseEvent, handleCalendarClose]);
 
   const endInputField = useRef<HTMLTextAreaElement>(null);
   const calendarRef: any | undefined = useRef(null);

From 3779dc1fa038bd57ef8907293f9c3a07ab0c7c29 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Mon, 5 Aug 2024 12:05:30 +0530
Subject: [PATCH 9/9] refactor: revert storybook changes

---
 .../DatePicker/DatePicker.stories.js          | 159 +-----------------
 1 file changed, 5 insertions(+), 154 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 67207cbf27ba..6581c877b137 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
@@ -40,15 +40,8 @@ export default {
   },
 };
 
-export const Simple1 = () => (
-  <DatePicker
-    datePickerType="simple"
-    onChange={(value) => {
-      console.log('check onchange bugs', value);
-    }}
-    onClose={(e) => {
-      console.log(' check onclose', e);
-    }}>
+export const Simple = () => (
+  <DatePicker datePickerType="simple">
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
@@ -57,64 +50,8 @@ export const Simple1 = () => (
   </DatePicker>
 );
 
-export const Test33 = () => {
-  const [currentDate, setCurrentDate] = useState(null);
-  const [inputText, setInputText] = useState('');
-  const [currentTypedDate, setCurrentTypedDate] = useState('');
-
-  return (
-    <div>
-      <DatePicker
-        id="testDateField"
-        datePickerType="single"
-        allowInput={true}
-        dateFormat="d/m/Y"
-        locale="en"
-        onChange={(event) => {
-          if (event && Array.isArray(event) && event.length) {
-            setCurrentDate(event[0]);
-          } else {
-            setCurrentDate(null);
-          }
-        }}>
-        <DatePickerInput
-          id="testDateFieldInput"
-          datePickerType="single"
-          placeholder="dd/mm/yyyy"
-          labelText="Date"
-          size="md"
-          onChange={(event) => {
-            setInputText(event?.target?.value);
-          }}
-          onBlur={(event) => {
-            setCurrentTypedDate(inputText);
-          }}
-        />
-      </DatePicker>
-      <br />
-      <p style={{ fontWeight: 600, fontSize: '10pt' }}>Date picker date:</p>
-      <p style={{ fontSize: '11pt' }}>
-        {currentDate && currentDate.toISOString
-          ? currentDate.toDateString()
-          : 'No date'}
-      </p>
-      <br />
-      <p style={{ fontWeight: 600, fontSize: '10pt' }}>Date input date:</p>
-      <p style={{ fontSize: '11pt' }}>
-        {currentTypedDate ? currentTypedDate : 'No date typed'}
-      </p>
-    </div>
-  );
-};
 export const SingleWithCalendar = () => (
-  <DatePicker
-    datePickerType="single"
-    onChange={(value) => {
-      console.log('check onchange bugs', value);
-    }}
-    onClose={(e) => {
-      console.log(' check onclose', e);
-    }}>
+  <DatePicker datePickerType="single">
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
@@ -123,49 +60,10 @@ export const SingleWithCalendar = () => (
     />
   </DatePicker>
 );
-export const Test2 = () => {
-  const [date, setDate] = useState();
-  return (
-    <>
-      <DatePicker
-        datePickerType="single"
-        value={date}
-        onChange={(value) => {
-          console.log('check onchange bugs', value);
-          setDate(value);
-        }}
-        onClose={(e) => {
-          console.log(' check onclose', e);
-        }}>
-        <DatePickerInput
-          placeholder="mm/dd/yyyy"
-          labelText="Date Picker label"
-          id="date-picker-simple"
-        />
-      </DatePicker>
-      <button
-        type="button"
-        onClick={() => {
-          console.log('date', date);
-          setDate('');
-        }}>
-        clear
-      </button>
 
-      <span> value is {date?.toLocaleString()}</span>
-    </>
-  );
-};
 export const RangeWithCalendar = () => {
   return (
-    <DatePicker
-      datePickerType="range"
-      onChange={(e) => {
-        console.log('check onchange bugs', e);
-      }}
-      onClose={(e) => {
-        console.log(' check onclose', e);
-      }}>
+    <DatePicker datePickerType="range">
       <DatePickerInput
         id="date-picker-input-id-start"
         placeholder="mm/dd/yyyy"
@@ -181,54 +79,7 @@ export const RangeWithCalendar = () => {
     </DatePicker>
   );
 };
-export const Test = () => {
-  const [date, setDate] = useState(['', '']);
-  useEffect(() => {
-    console.log('selected date:', date);
-  }, [date]);
-
-  const handleChange = (range) => {
-    const [startDate, endDate] = range ?? ['', ''];
 
-    if (!startDate || !endDate) return;
-
-    setDate([startDate, endDate]);
-  };
-
-  return (
-    <>
-      <div className="buttonsGroup">
-        <div className="button">
-          <Button kind="ghost" onClick={() => setDate(['', ''])}>
-            reset
-          </Button>
-        </div>
-      </div>
-      <DatePicker
-        light
-        datePickerType="range"
-        dateFormat="m/d/Y"
-        value={date}
-        //   onChange={(vals) => handleChange(vals)}
-        onClose={(e) => {
-          console.log('check onclose', e);
-        }}>
-        <DatePickerInput
-          id="date-picker-input-id-start"
-          placeholder="mm/dd/yyyy"
-          labelText="Start date"
-          size="md"
-        />
-        <DatePickerInput
-          id="date-picker-input-id-finish"
-          placeholder="mm/dd/yyyy"
-          labelText="End date"
-          size="md"
-        />
-      </DatePicker>
-    </>
-  );
-};
 export const SimpleWithLayer = () => (
   <WithLayer>
     {(layer) => (