[@next] findDOMNode is deprecated in StrictMode

[cutterbl]

So I was playing around with the @next build of react-input-mask, and specifically the bit about being able to wrap custom components. I was making some progress, but notice the following error hitting the console

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of InputMaskChildrenWrapper 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

You can see this in the CodeSandbox I created for testing. I provided some very basic commenting in the InputWrapper and Input components about basic usage.

Also, attempting to change my input value (in the input) threw an Error about string.split not being a function?

[scott-r-lindsey]

Same, I traced deprecation warnings to this package, but I gather from #184 that this project is dead.

[SherAtrium]

Same issue 😞

[paulocf92]

I would appreciate if this issue was fixed.

[AndreyPatseiko]

The same problem!!

[anton-prok]

Same

[Temirtator]

I have the same issue

[donaldpipowitch]

Please stop the "same" posts. You can upvote the original post or even better create a pull request. Everyone including the maintainer are aware of the warning.

[Temirtator]

I have send PR. Can somebody check it @sanniassin?

https://github.com/sanniassin/react-input-mask/pull/255

[ben4956]

same issue

[gilvaju]

we depend a lot on this package, and due to the delay and lack of feedback, we decided to fork.

https://github.com/comigotech/react-input-mask

We have already managed to publish the package and are already using it directly.

I kept the credits and we linked to this same package

[Rigii]

we depend a lot on this package, and due to the delay and lack of feedback, we decided to fork.

https://github.com/comigotech/react-input-mask

We have already managed to publish the package and are already using it directly.

I kept the credits and we linked to this same package

hm, why do I have the same issue with "^3.0.0-alpha.2"? React v- "17.0.2"

[BorjaRafolsMartinez]

The haven't published the package, or at least not with the react-input-mask name, so install from github

[gilvaju]

we depend a lot on this package, and due to the delay and lack of feedback, we decided to fork. https://github.com/comigotech/react-input-mask We have already managed to publish the package and are already using it directly. I kept the credits and we linked to this same package

hm, why do I have the same issue with "^3.0.0-alpha.2"? React v- "17.0.2"

Hi, the package is comigo-tech-react-input-mask

[excal1bu7]

lmao 2022 and still facing same warning

[matheusrgarcia]

Any news on this issue?

[matheusrgarcia]

I'll be working on this issue on the weekend.

Personal reminder: github.dev/sanniassin/react-input-mask/blob/master/src/index.js

[tutods]

Any solution? @gilvaju your package have the types package to install?

[alexnatea]

still up :(

[ianchanning]

This is effectively a duplicate of https://github.com/sanniassin/react-input-mask/issues/198

[nathanbeers]

i would just use this library instead: https://github.com/text-mask/text-mask/tree/master/react/#readme

[mariosantosdev]

This did fix in this PR https://github.com/zenbill/react-input-mask/pull/1, but since wouldn't be published on npm. I'm using react-number-format in the npm trends many developers also using it.

[ianchanning]

We have released our version with a fix for this on NPM https://github.com/mona-health/react-input-mask/ .

[bloodsuckers-spb]

We have released our version with a fix for this on NPM https://github.com/mona-health/react-input-mask/ .

Doesn't work with typescript

404 Not Found - GET https://registry.npmjs.org/@types%2fmona-health__react-input-mask - Not found

[ianchanning]

@bloodsuckers-spb Yeah I might get round to converting it to typescript.

Also it does work with typescript but it gives you little squiggles :shrug:

[BorjanKalinoski]

For anyone encountering issues with typescript, here is a solution.

1. Create a comigo-tech-react-input-mask.d.ts ormona-health/react-input-mask.d.ts file
2. Paste the following code:

declare module 'comigo-tech-react-input-mask' {
  import * as React from 'react';

  export interface Selection {
    start: number;
    end: number;
  }

  export interface InputState {
    value: string;
    selection: Selection | null;
  }

  export interface BeforeMaskedStateChangeStates {
    previousState: InputState;
    currentState: InputState;
    nextState: InputState;
  }

  export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
    /**
     * Mask string. Format characters are:
     * * `9`: `0-9`
     * * `a`: `A-Z, a-z`
     * * `\*`: `A-Z, a-z, 0-9`
     *
     * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.
     * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}`
     */
    mask: string | Array<string | RegExp>;
    /**
     * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.
     */
    maskChar?: string | null | undefined;
    maskPlaceholder?: string | null | undefined;
    /**
     * Show mask even in empty input without focus.
     */
    alwaysShowMask?: boolean | undefined;

    ref?: React.Ref<HTMLInputElement> | undefined;
    /**
     * In case you need to implement more complex masking behavior, you can provide
     * beforeMaskedStateChange function to change masked value and cursor position
     * before it will be applied to the input.
     *
     * * previousState: Input state before change. Only defined on change event.
     * * currentState: Current raw input state. Not defined during component render.
     * * nextState: Input state with applied mask. Contains value and selection fields.
     */
    beforeMaskedStateChange?(states: BeforeMaskedStateChangeStates): InputState;
  }

  export class InputMask extends React.Component<Props> {}

  export default InputMask;
}

[BorjaRafolsMartinez]

I gave this a shot on another project.

https://github.com/BorjaRafolsMartinez/react-masked-input

I don't think it is 100% compatible with this project but I believe most of it has been migrated and requires little change in your project. It has full TS support.

The main reason was the lack of response on this project.

[ValeSack]

Así que estaba jugando con la @nextcompilación de react-input-mask, y específicamente con la posibilidad de envolver componentes personalizados. Estaba progresando un poco, pero noté el siguiente error al acceder a la consola

findDOMNode está en desuso en StrictMode. A findDOMNode se le pasó una instancia de InputMaskChildrenWrapper que está dentro de StrictMode. En su lugar, agregue una referencia directamente al elemento al que desea hacer referencia. Obtenga más información sobre el uso de referencias de forma segura aquí: https://fb.me/react-strict-mode-find-node

Puedes ver esto en CodeSandbox que creé para probar. Proporcioné algunos comentarios muy básicos en los componentes InputWrappery Inputsobre el uso básico.

Además, al intentar cambiar mi valor de entrada (en la entrada), se produjo un error que indica que string.splitno es una función.

I found the solution in https://www.npmjs.com/package/@react-input/mask