wojtekmaj / react-datetime-picker

A datetime picker for your React app.

Home Page:https://projects.wojtekmaj.pl/react-datetime-picker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error of "propType portalContainer is invalid"

douglasrcjames opened this issue · comments

I started using this library with my Next.js ^13.5.1 project recently and started running into the below error of propType portalContainer is invalid, a value I am not manipulating! It doesnt seem to be effecting the actual usage of the component, but is an annoying, long warning error! The component it sits within is flagged with "use client" so it isn't because it sits on the server. Any ideas?
image

I am also using styled-components and react-hook-form, here's my below usage of the components:
React Hook form

        <Controller
                name={fieldKey}
                control={control}
                render={({ field }) => {
                    return (
                        <TimestampPicker
                            disabled={disabled}
                            calendarType={"gregory"}
                            minDate={allowPrevDates ? null : new Date()}
                            onChange={(date: any) => field.onChange(date ? new Date(date) : null)}
                            $error={errors[fieldKey]}
                            value={field?.value ? new Date(field.value) : null}
                        />
                    )
                }}
            />

Styled component

export const TimestampPicker = styled(DateTimePicker)<MTStyledProps>`
    .react-datetime-picker__wrapper {
        ${BodyFont};
        padding: 10px;
        background: white;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 0 2pt 1pt ${props => props.$error ? onlyTheme.color.red : "none"};
        -webkit-box-shadow: 0 0 2pt 1pt ${props => props.$error ? onlyTheme.color.red : "none"};
        -moz-box-shadow: 0 0 2pt 1pt ${props => props.$error ? onlyTheme.color.red : "none"};  
    }
    
    .react-datetime-picker__calendar {
        /* empty */
    }

    .react-datetime-picker__inputGroup {
        input {
            ${BodyFont};
            color: black;
        }
    }

    .react-datetime-picker__inputGroup__amPm {
        ${BodyFont};
        color: black;
    }

    .react-calendar__navigation__label__labelText {
        ${BodyFont};
        color: black;
    }

    abbr {
        ${BodyFont};
        color: black;
    }

    .react-datetime-picker__inputGroup__divider, .react-datetime-picker__inputGroup__leadingZero {
        ${BodyFont};
        color: black;
    }

    .react-datetime-picker__calendar--open,
    .react-datetime-picker__calendar--closed,
    .react-datetime-picker__clock--open,
    .react-datetime-picker__clock--closed {
        position: absolute;
    }
`;

This sounds exactly like something I've addressed f46523f, but have not released yet.

Released an update.

Amazing, looks to be gone, but I will let you know if it pops back up. Thanks!!