[EuiDatePicker] findDOMNode is deprecated in StrictMode. in EuiDatePicker

[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)
   ...

[kurt-o-sys]

Checking the code, there seem to be 2 calls to findDOMNode in the EuiDatePicker. It is in the onClickOutside function, or rather in onClickOutsideHOC of react-datepicker.js#L1247-1274:

    _proto.componentDidMount = function componentDidMount() {
      // If we are in an environment without a DOM such
      // as shallow rendering or snapshots then we exit
      // early to prevent any unhandled errors being thrown.
      if (typeof document === 'undefined' || !document.createElement) {
        return;
      }

      var instance = this.getInstance();

      if (config && typeof config.handleClickOutside === 'function') {
        this.__clickOutsideHandlerProp = config.handleClickOutside(instance);

        if (typeof this.__clickOutsideHandlerProp !== 'function') {
          throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
        }
      }

      this.componentNode = reactDom.findDOMNode(this.getInstance());
      this.enableOnClickOutside();
    };

    _proto.componentDidUpdate = function componentDidUpdate() {
      this.componentNode = reactDom.findDOMNode(this.getInstance());
    };
    /**
     * Remove all document's event listeners for this component
     */

I guess, here's a problem depending on where/how the EuiDatePicker is used:

react-datepicker.js#L1234

    _proto.getInstance = function getInstance() {
      if (!WrappedComponent.prototype.isReactComponent) {
        return this;
      }

      var ref = this.instanceRef;
      return ref.getInstance ? ref.getInstance() : ref;
    };

So, I suppose there may be two solutions:

1. It is fixed in the datepicker (not sure how exactly) - seems the most logic solution to me, since findDOMNode shouldn't be used.
2. It is documented how to wrap the datepicker nicely so to comply with Strict mode - I didn't test/try yet, but probably the component using the datepicker may need to add some useRef?

@thompsongl Any hints/ideas how to solve the findDOMNode warning?

[chandlerprall]

Thanks for digging through the code on this! We use a vendored version of react-datepicker, where we "forked" that project but keep the files within the EUI repo https://github.com/elastic/eui/tree/master/packages/react-datepicker

That code relies on react-onclickoutside@^6.7.1 which is where the findDOMNode call comes from. That project's most recent version still uses findDOMNode. There is an issue which mentions the need to remove findDOMNode, but I don't see indication that the project will be updated to avoid it. Which means EUI needs to further modify our react-datepicker fork to use another solution. We do have our own EuiOutsideClickDetector component, but there isn't a way to use that component from within the react-datepicker project.

[thompsongl]

Haven't explored this at all, but I wonder if the idea suggested in #3476 (use the inline datepicker inside of EuiPopover) would help here.