Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
7.89k stars 2.23k forks source link

The time selector does not shown in the custom container when the container has a conditional render #4884

Open evgenygil opened 3 weeks ago

evgenygil commented 3 weeks ago

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

Screenshot 2024-06-11 at 12 09 43 PM

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)

Screenshot 2024-06-11 at 12 10 47 PM

Expected behavior A time selector should be available all time, not only when I open it by default

Desktop (please complete the following information):