Skip to content

[EuiDatePicker] findDOMNode is deprecated in StrictMode. in EuiDatePicker #3850

@kurt-o-sys

Description

@kurt-o-sys

Having an overlay with an EuiDatePicker (using formik and yup for form control), I seem to run into issues with findDOMNode (when in Strict mode). Somewhere, depending on the code path, it seems there are still references to DOM Nodes. Can this be fixed?

DatePicker.js#L17-27:

const DatePicker = ({date, changeDateTo}) => {
    const {i18n} = useTranslation()
    return (
        <EuiDatePicker
            selected={date}
            onChange={changeDateTo}
            adjustDateOnChange={false}
            dateFormat={'DD MMM YYYY '}
            locale={i18n.language} />
    )
}

ChooseActivityDateForm.js#L89-99:

export default ({formik}) => {
    const changeDateTo = date => {
        formik.setFieldValue('calendar.date', date)
    }
    const date = formik.values.calendar.date;
    return (
        <EuiFlexGroup>
            <EuiFlexItem>
                <DatePicker date={date}
                            changeDateTo={changeDateTo} />
            </EuiFlexItem>

results in:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Calendar which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by CalendarContainer)
    in CalendarContainer (created by Calendar)
    in Calendar (created by OnClickOutside(Calendar))
    in OnClickOutside(Calendar) (created by DatePicker)
    in div (created by InnerPopper)
    in InnerPopper (created by Context.Consumer)
    in Popper$1 (created by PopperComponent)
    in Manager (created by PopperComponent)
    in PopperComponent (created by DatePicker)
    in DatePicker (created by Context.Consumer)
    in EuiValidatableControl (created by EuiDatePicker)
    in div (created by EuiFormControlLayout)
    in div (created by EuiFormControlLayout)
    in EuiFormControlLayout (created by EuiDatePicker)
    in span (created by EuiDatePicker)
    in span (created by EuiDatePicker)
    in EuiDatePicker (at ChooseActivityDateForm.js:20)
    in DatePicker (at ChooseActivityDateForm.js:97)
    in div (created by EuiFlexItem)
    in EuiFlexItem (at ChooseActivityDateForm.js:96)
    in div (created by EuiFlexGroup)
    in EuiFlexGroup (at ChooseActivityDateForm.js:95)
    in Unknown (at AddActivityForm.js:47)
    in div (created by EuiFlexItem)
   ...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions