react-date-picker icon indicating copy to clipboard operation
react-date-picker copied to clipboard

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

Open pjg opened this issue 1 year ago • 1 comments

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 avatar Sep 19 '22 14:09 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.

pjg avatar Sep 19 '22 18:09 pjg