Unform: Help with unform and react-input-mask - React does not recognize the `inputRef` prop on a DOM element.

[roaugusto]

Description of issue

Hey guys. Someone can help me? I trying to figure out what I'm doing wrong.

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

I'm using the example used with "input" component on the GoStack 11, but I'm trying to implement to use with react-input-mask.
The example in the docs said to use "ref" with react-input-mask, but I needed to use "inputRef".

I spending some days on it and appreciate it if someone can help me.

Usage example

import React, { useEffect, useRef, useState, useCallback } from 'react';
import { IconBaseProps } from 'react-icons';
import { FiAlertCircle } from 'react-icons/fi';
import { useField } from '@unform/core';

import ReactInputMask, { Props } from 'react-input-mask';
import { Container, Error } from './styles';

interface InputProps extends Props {
  name: string;
  mask: string;
  containerStyle?: object;
  containerInputStyle?: object;
  icon?: React.ComponentType<IconBaseProps>;
}

const InputMask: React.FC<InputProps> = ({
  name,
  mask,
  containerStyle = {},
  containerInputStyle = {},
  icon: Icon,
  ...rest
}) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isFocused, setIsFocused] = useState(false);
  const [isFilled, setIsFilled] = useState(false);

  const { fieldName, defaultValue, error, registerField } = useField(name);

  const handleInputFocus = useCallback(() => {
    setIsFocused(true);
  }, []);

  const handleInputBlur = useCallback(() => {
    setIsFocused(false);

    setIsFilled(!!inputRef.current?.value);
  }, []);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
    });
  }, [fieldName, registerField]);

  return (
    <Container
      style={containerStyle}
      isErrored={!!error}
      isFocused={isFocused}
      isFilled={isFilled}
    >
      {Icon && <Icon size={20} />}
      <ReactInputMask
        mask={mask}
        style={containerInputStyle}
        name={name}
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
        defaultValue={defaultValue}
        inputRef={inputRef}
      />
      {error && (
        <Error title={error}>
          <FiAlertCircle color="#c53030" size={20} />
        </Error>
      )}
    </Container>
  );
};

export default InputMask;

[roaugusto]

I found the problem....

I can't define the InputRef like this:

  const inputRef = useRef<HTMLInputElement>(null);

Just change for

  const inputRef = useRef(null);

It works.

import React, { useEffect, useRef, useState, useCallback } from 'react';
import { IconBaseProps } from 'react-icons';
import { FiAlertCircle } from 'react-icons/fi';
import { useField } from '@unform/core';

import ReactInputMask, { Props } from 'react-input-mask';
import { Container, Error } from './styles';

interface InputProps extends Props {
  name: string;
  mask: string;
  containerStyle?: object;
  containerInputStyle?: object;
  icon?: React.ComponentType<IconBaseProps>;
}

const InputMask: React.FC<InputProps> = ({
  name,
  mask,
  containerStyle = {},
  containerInputStyle = {},
  icon: Icon,
  ...rest
}) => {
  const inputRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);
  const [isFilled, setIsFilled] = useState(false);

  const { fieldName, defaultValue, error, registerField } = useField(name);

  const handleInputFocus = useCallback(() => {
    setIsFocused(true);
  }, []);

  const handleInputBlur = useCallback(() => {
    setIsFocused(false);
    // setIsFilled(!!inputRef.current?.value);
  }, []);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
    });
  }, [fieldName, registerField]);

  return (
    <Container
      style={containerStyle}
      isErrored={!!error}
      isFocused={isFocused}
      isFilled={isFilled}
    >
      {Icon && <Icon size={20} />}
      <ReactInputMask
        mask={mask}
        style={containerInputStyle}
        name={name}
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
        defaultValue={defaultValue}
        ref={inputRef}
        {...rest}
      />
      {error && (
        <Error title={error}>
          <FiAlertCircle color="#c53030" size={20} />
        </Error>
      )}
    </Container>
  );
};

export default InputMask;