Description
Describe the bug
The time selector does not shown in the custom container when the container has a conditional render
To Reproduce
Create a custom container with 2+ tabs, Absolute/Relative for example
Make a condition in it and render 2 different nodes, built-in children, and own RelativeIntervals
export const DatepickerContainer = ({
className,
children,
isStart,
initialDate,
}: DatepickerContainerProps) => {
const [selectedIntervalType, setSelectedIntervalType] = useState("relative");
...
switch (selectedIntervalType) {
case "absolute":
return <div className="relative">{children}</div>;
case "relative":
return (
<RelativeIntervals
setDate={onDateChange}
isStart={isStart}
initialDate={initialDate}
/>
);
}
And use it in the datepicker
<ReactDatePicker
...
minDate={actualStartDateValue}
showTimeSelect
onInputClick={inputClickEnd}
onClickOutside={clickOutside}
timeIntervals={5}
customInput={
<DatePickerInput size={size} opened={openedEnd} date={endDate} />
}
calendarContainer={(props) => (
<DatepickerContainer
onClose={() => setOpenedEnd(false)}
{...props}
onChange={onDatesChange}
onDateChange={onEndDateChange}
isRelativeSelector={isEndRelativeSelector}
initialDate={initialEndDate}
/>
)}
/>
When you open the datepicker in popup and the selectedIntervalType = "absolute" you can see the time selector on the right side, but if it is "relative" by default when you click on Absolute tab and change it there is no time selector there
The children contains an array and 6th index is empty (when you open it with absolute tab active there are time container in this position)
Expected behavior
A time selector should be available all time, not only when I open it by default
Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version: 125