inputRef could also be a object

[iamrane]

It says that inputRef needs to be a function, but when using the new ref syntax in react https://reactjs.org/docs/refs-and-the-dom.html

the ref is an object. How can i use this component with the new ref syntax?

[iamrane]

I used children as props, so then it worked :)

<InputMask {...props}> {inputProps => <input ref={ref} {...inputProps} />} </InputMask>

[victorcarvalhosp]

@iamrane Can you explain a bit more your solution? Using the same code you used is now working here: Cannot find name 'inputProps'

[coldSeattle]

hey everyone! Have anyone an solution for how to set InputRef? how to set inputref as a function if react ref is a mutate object?

[coldSeattle]

P.S. like that did not work.

[victorcarvalhosp]

In my case I did like this:

const refPhoneNumber = useRef<HTMLInputElement>(null);

<InputMask
          alwaysShowMask={true}
          aria-label="phone-input"
          mask="999999999999"          
          onChange={(e) => handleOnChange(e)}
        >
          <input ref={refPhoneNumber} />
</InputMask>

[coldSeattle]

it will work! but I need use inputRef

[optimusleo]

I used children as props, so then it worked :)

<InputMask {...props}> {inputProps => <input ref={ref} {...inputProps} />} </InputMask>

It's no use, right after an attribute changes because of a state it won't pass the attribute to the child.

[optimusleo]

setInputRef(element){
        if(!this.inputRef.current){
            this.inputRef.current = element;
        }
 }

<InputMask inputRef={(el) => this.setInputRef(el)} />

This is the best alternative! The creator of react-input-mask should fix the inputRef to do this automatically since it doesn't work.

[Danilo-Guedes]

Same problem here!