Fix/remove finddomnode

[ianchanning]

An attempt to fix https://github.com/sanniassin/react-input-mask/issues/239, but tries to go a step further than https://github.com/sanniassin/react-input-mask/pull/255 as that fails with the children tests.

This is still not a perfect fix as I gave up and skipped one of the tests which I think is the least relevant:

 it("should handle children change", ...)

However it does handle all other tests.

I've also given up on handling Class Components for children - my main reference for doing this is the Material UI library. They continue to support class components - but warn that you will get the findDOMNode warning and suggest you use forwardRef or wrap your class component inside forwardRef.

https://mui.com/material-ui/guides/composition/#caveat-with-strictmode:

If you use class components for the cases described above you will still see warnings in React.StrictMode. ReactDOM.findDOMNode is used internally for backwards compatibility. You can use React.forwardRef and a designated prop in your class component to forward the ref to a DOM component. Doing so should not trigger any more warnings related to the deprecation of ReactDOM.findDOMNode.

 class Component extends React.Component {
   render() {
-    const { props } = this;
+    const { forwardedRef, ...props } = this.props;
     return <div {...props} ref={forwardedRef} />;
   }
 }

-export default Component;
+export default React.forwardRef((props, ref) => <Component {...props} forwardedRef={ref} />);

[ianchanning]

Should fix these issues too:

• https://github.com/sanniassin/react-input-mask/issues/198
• https://github.com/sanniassin/react-input-mask/issues/166

[ianchanning]

@rokija As far as I can tell this project is effectively archived. I created this PR so that anyone using the project can use this PR or my fork of it, but I am not expecting that this PR to be merged.

[ianchanning]

I have put our fork of this as a stable version 3.0.0 now as we've been using it in production for 6 months https://github.com/mona-health/react-input-mask/

[johanguse]

I have put our fork of this as a stable version 3.0.0 now as we've been using it in production for 6 months https://github.com/mona-health/react-input-mask/

Thank you! But I can't use maskChar. On the @sanniassin I can.

Warning: React does not recognize the maskChar prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase maskchar instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[johanguse]

Find out @ianchanning I can use maskPlaceholder thank you for forking!

[ianchanning]

@johanguse As far as I know this is because maskChar in v2 was dropped in favour of maskPlaceholder in the v3-alpha code before I forked it. See https://github.com/sanniassin/react-input-mask/issues/212

So indeed, maskPlaceholder is what you want :)

[coelhoreinaldo]

Thank you so much for your version of the lib! It is exactly what I need.