CODEWITHSUNDEEP
reactjsdeprecatedreact-hook-formreact-datepickerandroid-strictmode
Ruby
Ruby

Reputation: 2949

"findDOMNode is deprecated in StrictMode" using react-datepicker with React-Hook-Form

I'm having an issue when trying to use "showMonthDropdown" or "showYearDropdown" options with react-datepicker.

Everything is working great until I click on the years or month Dropdown in the date picker, then I get this error in the console ...

enter image description here

Here's my code ...

import "react-datepicker/dist/react-datepicker.css";

import DatePicker from "react-datepicker";
import { Controller } from "react-hook-form";

import { MetadataObj } from "../../types/globalTypes";
import Div from "./InputDatePickerStyles";

type Iprops = {
  control: any;
  name: string;
  label: string;
  errors: MetadataObj;
  minDate?: Date;
  maxDate?: Date;
  showMonthDropdown?: boolean;
  showYearDropdown?: boolean;
};

const InputDatePicker = ({
  control,
  name,
  label,
  errors,
  minDate,
  maxDate,
  showMonthDropdown = false,
  showYearDropdown = false,
}: Iprops) => {
  return (
    <div>
      <label>{label}</label>
      {errors[name] && <span className="error">{errors[name].message}</span>}

      <Controller
        control={control}
        name={name}
        render={({ field, fieldState, formState }) => {
          return (
            <DatePicker
              className={errors[name] && "invalid"}
              placeholderText="Select date"
              onBlur={field.onBlur}
              onChange={date => field.onChange(date)}
              selected={field.value}
              dateFormat="d MMMM yyyy"
              maxDate={maxDate && maxDate}
              showMonthDropdown={showMonthDropdown}
              showYearDropdown={showYearDropdown}
            />
          );
        }}
      />
    </div>
  );
};

export default InputDatePicker;

Upvotes: 2

Views: 1042

Answers (1)

Igor Loskutov
Igor Loskutov

Reputation: 2344

React-datepicker relies on the react-onclickoutside library which currently has this issue unchecked (i.e. https://github.com/Pomax/react-onclickoutside/issues/369).

For my projects, I just let it be for now. At some point, either react-datepicker or react-onclickoutside will fix it, even more so if this deprecation warning becomes an error.

There seems to be no way to partially disable StrictMode either, although someone on https://github.com/facebook/react/issues/16362 (the thread about partially disabling StrictMode) suggests overriding console.error to filter out the messages you don't want to see, which could or could not be what you're ready to do.

Upvotes: 2

Related Questions