Timepicker is remounted on every click when passing a calendarContainer

[AbdelHajou]

Describe the bug
When passing a calendarContainer to the Datepicker with showTimeSelect enabled and shouldCloseOnSelect set to false, the timepicker gets remounted whenever the user selects a time. This causes the timepicker to try to center the selected time, but this fails because it calculates the center position based on the calendarContainer's clientHeight (which is 0).

To Reproduce

Go to https://reactdatepicker.com/#example-select-time and change the example to:

() => {
  const [startDate, setStartDate] = useState(new Date());
  
  const CustomContainer = ({className, children}) => {
    return (
      <div className={className}>{children}</div>
    );
  };
  
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
      shouldCloseOnSelect={false}
      calendarContainer={CustomContainer}
    />
  );
};

Open the datepicker and select a time. The timepicker will remount and try to center the selected time, but it scrolls up too far.

Expected behavior
It should either not scroll at all (like the default behavior when not passing a custom container) or it should correctly center the selected time.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version 106.0.5249.120

Additional context

react-datepicker/src/time.jsx

Lines 63 to 76 in 2400071

	componentDidMount() {
	// code to ensure selected time will always be in focus within time window when it first appears
	this.list.scrollTop = Time.calcCenterPosition(
	this.props.monthRef
	? this.props.monthRef.clientHeight - this.header.clientHeight
	: this.list.clientHeight,
	this.centerLi
	);
	if (this.props.monthRef && this.header) {
	this.setState({
	height: this.props.monthRef.clientHeight - this.header.clientHeight,
	});
	}
	}

In the componentDidMount of the Time component, it tries to calculate the center position based on the clientHeight of the monthContainer. When passing a custom container, this clientHeight always returns 0 for some reason.

The bug does not occur when defining the Custom Container as a separate component.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[bartzalewski]

I get the same issue. Any fixes? 🤔

[iryna-martyniuk-techmagic]

I get the same issue

[nikolayemrikh]

For anyone looking for a solution:

First of all, define a custom container component outside of a component's body. This is the only correct way to define components: https://react.dev/learn/your-first-component#nesting-and-organizing-components

Then, create a context, wrap ReactDatePicker into the context provider and use it inside of the custom container component:

interface ICalendarContext {
  datePickerRef: RefObject<ReactDatePicker | null>;
}

const CalendarContext = createContext<ICalendarContext | null>(null);

const CalendarContainerWithFooter: FC<CalendarContainerProps> = ({ children, ...restProps }) => {
  const calendarContext = useContext(CalendarContext);
  if (!calendarContext) throw new Error('CalendarContext was not provided');
  const { datePickerRef } = calendarContext;
  return (
    <CalendarContainer className={styles.calendar} {...restProps}>
        {children}
        <button>some button</button>
    </CalendarContainer>
  );
};


const SomePage: FC = () => {
  return (
    <CalendarContext.Provider value={{ datePickerRef }}>
      <ReactDatePicker
        selected={date}
        onChange={handleDateChange}
        calendarContainer={CalendarContainerWithFooter}
       />
    </CalendarContext.Provider>
  );
}

Pass whatever you need in that context