From 5ca3e8cf97177ac450c6ebb4ae2653ab42983587 Mon Sep 17 00:00:00 2001
From: yuki0410-dev <40145947+yuki0410-dev@users.noreply.github.com>
Date: Wed, 26 Feb 2025 09:21:56 +0900
Subject: [PATCH] fix: 5428 ContainerRef Propagation

---
 src/calendar.tsx              | 38 ++++++++++++++++++-----------------
 src/click_outside_wrapper.tsx |  2 +-
 src/day.tsx                   |  2 +-
 src/week_number.tsx           |  2 +-
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/calendar.tsx b/src/calendar.tsx
index d80f1554aa..6194b0ffe4 100644
--- a/src/calendar.tsx
+++ b/src/calendar.tsx
@@ -991,6 +991,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
           <Month
             {...Calendar.defaultProps}
             {...this.props}
+            containerRef={this.containerRef}
             ariaLabelPrefix={this.props.monthAriaLabelPrefix}
             day={monthDate}
             onDayClick={this.handleDayClick}
@@ -1123,26 +1124,27 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
       <ClickOutsideWrapper
         onClickOutside={this.handleClickOutside}
         style={{ display: "contents" }}
-        containerRef={this.containerRef}
         ignoreClass={this.props.outsideClickIgnoreClass}
       >
-        <Container
-          className={clsx("react-datepicker", this.props.className, {
-            "react-datepicker--time-only": this.props.showTimeSelectOnly,
-          })}
-          showTime={this.props.showTimeSelect || this.props.showTimeInput}
-          showTimeSelectOnly={this.props.showTimeSelectOnly}
-        >
-          {this.renderAriaLiveRegion()}
-          {this.renderPreviousButton()}
-          {this.renderNextButton()}
-          {this.renderMonths()}
-          {this.renderYears()}
-          {this.renderTodayButton()}
-          {this.renderTimeSection()}
-          {this.renderInputTimeSection()}
-          {this.renderChildren()}
-        </Container>
+        <div style={{ display: "contents" }} ref={this.containerRef}>
+          <Container
+            className={clsx("react-datepicker", this.props.className, {
+              "react-datepicker--time-only": this.props.showTimeSelectOnly,
+            })}
+            showTime={this.props.showTimeSelect || this.props.showTimeInput}
+            showTimeSelectOnly={this.props.showTimeSelectOnly}
+          >
+            {this.renderAriaLiveRegion()}
+            {this.renderPreviousButton()}
+            {this.renderNextButton()}
+            {this.renderMonths()}
+            {this.renderYears()}
+            {this.renderTodayButton()}
+            {this.renderTimeSection()}
+            {this.renderInputTimeSection()}
+            {this.renderChildren()}
+          </Container>
+        </div>
       </ClickOutsideWrapper>
     );
   }
diff --git a/src/click_outside_wrapper.tsx b/src/click_outside_wrapper.tsx
index 1d0d60b0ba..b9ea78375f 100644
--- a/src/click_outside_wrapper.tsx
+++ b/src/click_outside_wrapper.tsx
@@ -6,7 +6,7 @@ interface ClickOutsideWrapperProps {
   onClickOutside: ClickOutsideHandler;
   className?: string;
   children: React.ReactNode;
-  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
   style?: React.CSSProperties;
   ignoreClass?: string;
 }
diff --git a/src/day.tsx b/src/day.tsx
index 833aa43af4..1c28426a5e 100644
--- a/src/day.tsx
+++ b/src/day.tsx
@@ -62,7 +62,7 @@ interface DayProps
   startDate?: Date | null;
   endDate?: Date | null;
   renderDayContents?: (day: number, date: Date) => React.ReactNode;
-  containerRef?: React.RefObject<HTMLDivElement>;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
   calendarStartDay?: DateNumberType;
   locale?: Locale;
   monthShowsDuplicateDaysEnd?: boolean;
diff --git a/src/week_number.tsx b/src/week_number.tsx
index 02a9eb3a2b..5e985d0285 100644
--- a/src/week_number.tsx
+++ b/src/week_number.tsx
@@ -16,7 +16,7 @@ interface WeekNumberProps {
   inline?: boolean;
   shouldFocusDayInline?: boolean;
   handleOnKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-  containerRef?: React.RefObject<HTMLDivElement>;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
   isInputFocused?: boolean;
   isWeekDisabled?: boolean;
 }