Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
evgenygil opened this issue Jun 11, 2024 · 0 comments

Comments

@evgenygil
Copy link

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):

  • OS: macOS
  • Browser: Chrome
  • Version: 125
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant