[DatePicker] Triggers `findDOMNode` error in strict mode

[connor4312]

Current Behavior

1. Have any date picker in React 16.13.1

2. This warning is shown:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of InputElement 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 input (created by Context.Consumer)
    in DevConsumer (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Input (created by InputElement)
    in InputElement (created by ForwardRef)
    in ForwardRef (created by BaseInput)
    in div (created by Context.Consumer)
    in DevConsumer (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in InputContainer (created by BaseInput)
    in BaseInput (created by Input)
    in div (created by Context.Consumer)
    in DevConsumer (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Root (created by Input)
    in Input (created by MaskedInput)
    in MaskedInput (created by Context.Consumer)
    in div (created by Context.Consumer)
    in DevConsumer (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in StyledInputWrapper (created by Popover)
    in Popover (created by Context.Consumer)
    in Datepicker (created by MyComponent)

Expected Behavior

No deprecation warning is shown :)

Your Environment

Tech	Version
Base UI	v9.99.0
React	16.13.1

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[konradkalemba]

The problem lies in an external lib that Base Web makes use of to provide masked input functionality. There is an open issue for this: https://github.com/sanniassin/react-input-mask/issues/198 However the lib seems to be abandoned ;/

[niksmac]

+1

[hotyes]

+1

[JelloCho]

Thanks to @konradkalemba, I realized that the warning would occur because of an external lib. MaskedInput obviously causes the warning. So I tried replacing the MaskedInput with BasedInput.

const ForwardedInput = forwardRef<HTMLInputElement>(function ForwardedInput(
  props,
  ref,
) {
  return <BaseInput {...props} inputRef={ref} />;
});

<DatePicker
  overrides={{
    Input: {
      props: {
        overrides: {
          Input: {
            component: ForwardedInput,
          },
        },
      },
    },
  }}
/>

It works. But I hope that they fix the issue.

[channeladam]

+1

[channeladam]

Any update on a fix this issue which is almost 1 year old?