Watch issues when integrating with react-number-format

[hbarcelos]

Describe the bug
This is related to #528.
However, even following the suggested approach, it doesn't seem to work.

Whenever I watch a value, the input can present 2 of the following behavior:

• If I watch the same field the input is registered to, it stops working
• If I watch any other field, or even an nonexistent one, the first keystroke in the input is ignored

To Reproduce
Steps to reproduce the behavior:

1. Go to sandbox linked bellow
2. Test that the phone input works normally
3. Look for one of the lines bellow:
   
4. Uncomment one of the lines to see the described effect in the phone input

Codesandbox link
https://codesandbox.io/s/react-number-fomat-vs-react-hook-form-broken-example-2e97y

Expected behavior
Input should work normally.

Desktop (please complete the following information):

• OS: Linux (Manjaro)
• Browser: Firefox
• Version: 74.0.1

[bluebill1049]

for the phone one, can you try to use react-hook-form-input. it's a masked input, watch will result re-render which may set the input to initial state.

[hbarcelos]

watch will result re-render which may set the input to initial state.

Could you please elaborate?

I'll give it a try with react-hook-form-input and let you know the result.

[bluebill1049]

mask inputs normally don't trigger external state updates, by trigger a re-render there is a change will reset the input to original state, i believe you may be able to solve the problem with react.memo too

[hbarcelos]

I was able to make it work with RHFInput.

Here's the code I'm using:

import React, { useCallback } from 'react';
import { RHFInput } from 'react-hook-form-input';
import t from 'prop-types';
import NumberFormat from 'react-number-format';

export default function CustomNumberFormat({ onChange, setValue, register, name, rules, mode, inputRef, ...other }) {
  const onValueChange = useCallback(
    values => {
      onChange({
        target: {
          value: values.value,
        },
      });
    },
    [onChange]
  );

  return (
    <RHFInput
      register={register}
      setValue={setValue}
      rules={rules}
      name={name}
      mode={mode}
      as={<NumberFormat {...other} onValueChange={onValueChange} />}
    />
  );
}

CustomNumberFormat.propTypes = {
  setValue: t.func.isRequired,
  register: t.func.isRequired,
  name: t.string.isRequired,
  rules: t.object,
  mode: t.oneOf(['onChange', 'onSubmit']),
  onChange: t.func,
  inputRef: t.any,
};

CustomNumberFormat.defaultProps = {
  onChange: () => {},
  mode: 'onSubmit',
  rules: {},
};

[bluebill1049]

awesome thanks for sharing the solution @hbarcelos

[choyan]

Controller is now preferable instead of RHFInput. In my case, I am now working with this snippet. Although I am failing to get the required rule to work properly.

import { useForm, Controller } from 'react-hook-form';

const {
    register, handleSubmit, watch, errors, control,
  } = useForm();

<Controller 
  allowEmptyFormatting 
  as={NumberFormat}
  control={control}
  format="(###) ###-##-##"
  mask=" "
  name="telephone"
  rules={{ required: true }}
/>

More example here:
https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r