fix: menu placement issue with react dates

Author: eshankvaish

src/Shared/Components/DatePicker/DateTimePicker.tsx

@@ -50,6 +50,7 @@ const DateTimePicker = ({
     isTodayBlocked = false,
     dataTestIdForTime = DATE_PICKER_IDS.TIME,
     dataTestidForDate = DATE_PICKER_IDS.DATE,
+    openDirection = 'down',
 }: DateTimePickerProps) => {
     const time = getTimeValue(dateObject)
     const selectedTimeOption = DEFAULT_TIME_OPTIONS.find((option) => option.value === time) ?? DEFAULT_TIME_OPTIONS[0]
@@ -84,7 +85,7 @@ const DateTimePicker = ({
                     focused={isFocused}
                     onFocusChange={handleFocusChange}
                     numberOfMonths={1}
-                    openDirection="down"
+                    openDirection={openDirection}
                     renderCalendarDay={(props) => <CustomizableCalendarDay {...props} {...customDayStyles} />}
                     hideKeyboardShortcutsPanel
                     withFullScreenPortal={false}
@@ -96,6 +97,7 @@ const DateTimePicker = ({
                     data-testid={dataTestidForDate}
                     isDayBlocked={isDayBlocked}
                     disabled={disabled}
+                    appendToBody
                 />
                 {!hideTimeSelect && (
                     <div className="dc__no-shrink">

src/Shared/Components/DatePicker/datePicker.scss

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-.date-time-picker {
-    .DayPicker__horizontal {
-        position: fixed !important;
-    }
+.SingleDatePicker_picker {
+    z-index: calc(var(--modal-index) + 1) !important;
+}
 
+.date-time-picker {
     .SingleDatePicker {
         width: 100%;
     }

src/Shared/Components/DatePicker/types.ts

@@ -16,6 +16,7 @@
 
 import { Moment } from 'moment'
 import { SelectInstance } from 'react-select'
+import { SingleDatePickerShape } from 'react-dates'
 import { OptionType } from '../../../Common'
 
 export interface SingleDatePickerProps {
@@ -100,10 +101,8 @@ export interface TimeSelectProps {
 }
 
 export interface DateTimePickerProps
-    extends Pick<
-        TimeSelectProps,
-        'date' | 'onChange' | 'timePickerProps' | 'error' | 'disabled' | 'dataTestIdForTime'
-    > {
+    extends Pick<TimeSelectProps, 'date' | 'onChange' | 'timePickerProps' | 'error' | 'disabled' | 'dataTestIdForTime'>,
+        Pick<SingleDatePickerShape, 'openDirection'> {
     /**
      * Props for the date picker
      */