react-date-picker
react-date-picker copied to clipboard
"<Fit />'s child does not have absolute position. You should apply `position: absolute` to it" warning
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
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.