From 64e803c6af558fac4335dd4f16df4ef551ac602d Mon Sep 17 00:00:00 2001
From: Dominik Schab <dominik@userinterviews.com>
Date: Tue, 17 Dec 2024 11:26:20 -0500
Subject: [PATCH] some cleanup

---
 src/DateTimePicker/DateTimePicker.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/DateTimePicker/DateTimePicker.tsx b/src/DateTimePicker/DateTimePicker.tsx
index 071da26c..7c41f2a4 100644
--- a/src/DateTimePicker/DateTimePicker.tsx
+++ b/src/DateTimePicker/DateTimePicker.tsx
@@ -33,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;
@@ -52,12 +56,6 @@ export type DateTimePickerProps = {
   onDateParseError?: (...args: unknown[]) => unknown;
 };
 
-function DocumentBodyContainer({ children }) {
-  return children ? (
-    createPortal(React.cloneElement(children, {}), document.body)
-  ) : null;
-}
-
 function DateTimePicker({
   date = '',
   dateFormat = ISO_DATE_FORMAT_FNS,
@@ -204,8 +202,9 @@ 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}
         showYearDropdown={showMonthAndYearSelects}
         timeCaption="Time"
@@ -214,10 +213,6 @@ function DateTimePicker({
         title={name}
         onCalendarClose={handleOnCalendarClose}
         onChange={handleOnChange}
-        {...(isWithinModal ? {
-          popperContainer: DocumentBodyContainer,
-          popperClassName: 'react-datepicker__popper-container--modal',
-        } : {})}
       />
     </div>
   );