Warn: Input element does not exist.

[mdodge-ecgrow]

I am using this library exactly like the example shows. I have installed @react-input/mask in my project. Then in my component, I am importing it: import { useMask } from '@react-input/mask';.

And then I am using it:

const app = () => {
...
const phoneInputRef = useMask({
        mask: '(___) ___-____',
        replacement: { _: /\d/ }
    });
...
return (
...
<input
    ref={phoneInputRef}
    type={'text'}
    className={'form-control'}
    id={'email'}
    name={'phone'}
    placeholder={'Phone'}
    maxLength={16}
    value={phone}
    onChange={updateCustomer}
    disabled={editing}
    required
/>
...

And it is giving me no mask and in the console I see: Warn: Input element does not exist. from 'useInput.js'. What am I doing wrong?

[BADtochka]

Same annoying warning.

[GoncharukBro]

Could you share the repository?

[doksara]

I know I'm late to the party, but I might have figured out the root cause of this issue. This error only occurs when I'm rendering my input inside of a modal - which is rendered inside portal (outside of root node) and that's why it can't find the actual input. Nonetheless, it's a bug which needs to be fixed.

[GoncharukBro]

Tests according to your description did not reveal any problems, please provide a repository or a code example to understand exactly what the problem is.

[GoncharukBro]

Most likely, your input element is under a condition as a result of which the element was not initialized. Install the new version, it includes the ability to put an input element under a condition, without having to monitor the existence of the element.

npm i @react-input/mask@latest