"<Fit />'s child does not have absolute position. You should apply `position: absolute` to it" warning

[pjg]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-Date-Picker version
• [X] I have checked if this bug is not already reported

Description

After upgrading to v9.0.0 (from v8.4.0) I started receiving this warning in the console (even with devtools closed).

I tried adding the position: absolute style to the Fit's child (which is .react-calendar) but this didn't change anything.

I guess this is closely related to https://github.com/wojtekmaj/react-datetime-picker/issues/137.

Steps to reproduce

This issue occurs on first rendering of the ReactDatePicker component and also on each closing of the calendar popup. I can see it even if I don't apply any styling to the component. Here's the snippet from my code:

import ReactDatePicker from 'react-date-picker'

const DatePicker = ({ className, id, isPristine, locale, name, open, required, setOpen, setValue, small, value }) => {
  const onClose = () => setOpen(false)

  const onChange = (date) => setValue(date)

  return (
    <Container
      className={className}
      id={id}
      isPristine={isPristine}
      small={small}>
      <ReactDatePicker
        clearIcon={null}
        format="yyyy-MM-dd"
        isOpen={open}
        locale={locale}
        minDetail="year"
        name={name}
        onCalendarClose={onClose}
        onChange={onChange}
        required={required}
        value={value}
      />
    </Container>
  )
}

Expected behavior

Not seeing this warning.

Actual behavior

Seeing the warning.

Additional information

No response

Environment

• Browser (if applicable): Chrome 105
• React-Date-Picker version: 9.0.0
• React version: 17.0.2

[pjg]

I was able to fix this issue on my end by adding position: absolute css rule for .react-date-picker__calendar--open and .react-date-picker__calendar--closed css classes. Not sure why those classes don't have this rule as the component sets inset css value as style attribute to the element with those classes.

[github-actions[bot]]

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

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.

[lebalz]

This seems to be still a problem. The fix described does not seem to work.

[PlatosTwin]

The above solution (adding position: absolute) to .react-date-picker__calendar--open and .react-date-picker__calendar--closed worked for me. Remember to import your CSS file.

[xgqfrms]

This is a very poor developer experience for users of this component.

https://github.com/wojtekmaj/react-datetime-picker/issues/137