Add isWithinModal option to DateTimePicker (#1305)

Author: domschab23

src/DateTimePicker/DateTimePicker.scss

@@ -1,6 +1,10 @@
 @import 'react-datepicker/dist/react-datepicker.css';
 @import '../../scss/theme.scss';
 
+.react-datepicker__popper-container--modal {
+  z-index: var(--z-index-popover);
+}
+
 .date-time-picker {
   align-items: flex-start;
   display: flex;
@@ -26,13 +30,12 @@
     color: var(--ux-gray-300);
   }
 
-
   .date-time-picker {
     &__input-group {
       background-color: var(--ux-white);
       border-radius: var(--ux-border-radius);
       border: thin solid var(--ux-gray-400);
-      padding: .46875rem .75rem;
+      padding: 0.46875rem 0.75rem;
       justify-content: space-between;
       width: inherit;
     }
@@ -58,10 +61,10 @@
   }
 
   .react-datepicker__time-container
-  .react-datepicker__time
-  .react-datepicker__time-box
-  ul.react-datepicker__time-list
-  li.react-datepicker__time-list-item--selected {
+    .react-datepicker__time
+    .react-datepicker__time-box
+    ul.react-datepicker__time-list
+    li.react-datepicker__time-list-item--selected {
     background: var(--ux-blue-500);
   }
 
@@ -78,7 +81,8 @@
   }
 
   // Override form-control's default greying of read only inputs
-  input:read-only, .form-control[readonly] {
+  input:read-only,
+  .form-control[readonly] {
     background-color: var(--ux-white);
   }
 
@@ -95,38 +99,36 @@
     }
 
     &:not(:first-child) {
-      margin-top: .5rem;
+      margin-top: 0.5rem;
 
       @include media-breakpoint-up(sm) {
         margin-top: 0;
-        margin-left: .5rem;
+        margin-left: 0.5rem;
       }
     }
   }
 }
 
-
 // override some of the form group invalid styles
-.FormGroup--is-invalid
-.date-time-picker
-select {
+.FormGroup--is-invalid .date-time-picker select {
   border: thin solid var(--ux-gray-400);
   border-radius: var(--ux-border-radius);
 }
 
 // override some of the form group invalid styles
 // inputs need more specificity to override the above styling
 .FormGroup--is-invalid
-.date-time-picker
-.react-datepicker-wrapper
-.react-datepicker__input-container
-input {
+  .date-time-picker
+  .react-datepicker-wrapper
+  .react-datepicker__input-container
+  input {
   border: thin solid var(--ux-red);
 }
 
 // Undoing some styles when this is nested within a bootstrap table
 .table .date-time-picker {
-  td, th {
+  td,
+  th {
     border-top: 0;
     padding: 0;
     vertical-align: middle;

src/DateTimePicker/DateTimePicker.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import DatePicker, { getDefaultLocale, registerLocale, setDefaultLocale } from 'react-datepicker';
 import {
   format,
@@ -32,6 +33,10 @@ const localeMap = {
 const STANDARD_TIME_FORMAT_FNS = 'hh:mm aa';
 const ISO_DATE_FORMAT_FNS = 'yyyy-MM-dd';
 
+const popperContainerDocumentBody = ({ children }: { children?: React.ReactNode }) => (
+  createPortal(children, document.body)
+);
+
 export type DateTimePickerProps = {
   date?: string;
   dateFormat?: string;
@@ -46,6 +51,7 @@ export type DateTimePickerProps = {
   showTimeSelect?: boolean;
   time?: string;
   timeFormat?: string;
+  isWithinModal?: boolean;
   onChangeDate?: (...args: unknown[]) => unknown;
   onDateParseError?: (...args: unknown[]) => unknown;
 };
@@ -64,6 +70,7 @@ function DateTimePicker({
   showTimeSelect = false,
   time = '',
   timeFormat = STANDARD_TIME_FORMAT_FNS,
+  isWithinModal = false,
   onChangeDate,
   onDateParseError,
 }: DateTimePickerProps) {
@@ -195,6 +202,8 @@ function DateTimePicker({
         minDate={minDate}
         name={name}
         placeholderText={getDateFormat().toUpperCase()}
+        popperClassName={isWithinModal ? 'react-datepicker__popper-container--modal' : ''}
+        popperContainer={isWithinModal ? popperContainerDocumentBody : undefined}
         selected={dateFromString()}
         showMonthDropdown={showMonthAndYearSelects}
         showTimeSelect={showTimeSelect}