Merge pull request #5456 from yuki0410-dev/bugfix/5428

fix: 5428 ContainerRef Propagation

Author: martijnrusschen

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>
     );
   }

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;
 }

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;

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;
 }