Add isWithinModal option to DateTimePicker

user-interviews · Dec 17, 2024 · f3e710c · f3e710c
1 parent f827f73
commit f3e710c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 18 deletions.
diff --git a/src/DateTimePicker/DateTimePicker.scss b/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;

diff --git a/src/DateTimePicker/DateTimePicker.tsx b/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,
@@ -46,10 +47,17 @@ export type DateTimePickerProps = {
   showTimeSelect?: boolean;
   time?: string;
   timeFormat?: string;
+  isWithinModal?: boolean;
   onChangeDate?: (...args: unknown[]) => unknown;
   onDateParseError?: (...args: unknown[]) => unknown;
 };
 
+function DocumentBodyContainer({ children }) {
+  return children ? (
+    createPortal(React.cloneElement(children, {}), document.body)
+  ) : null;
+}
+
 function DateTimePicker({
   date = '',
   dateFormat = ISO_DATE_FORMAT_FNS,
@@ -64,6 +72,7 @@ function DateTimePicker({
   showTimeSelect = false,
   time = '',
   timeFormat = STANDARD_TIME_FORMAT_FNS,
+  isWithinModal = false,
   onChangeDate,
   onDateParseError,
 }: DateTimePickerProps) {
@@ -205,6 +214,10 @@ function DateTimePicker({
         title={name}
         onCalendarClose={handleOnCalendarClose}
         onChange={handleOnChange}
+        {...(isWithinModal ? {
+          popperContainer: DocumentBodyContainer,
+          popperClassName: 'react-datepicker__popper-container--modal',
+        } : {})}
       />
     </div>
   );