onAccept fires when value is set programmatically

[viveleroi]

I'm using the react-imask plugin with react-hook-form. The value from rhf gets passed as the value prop to imask, and we use onAccept to set the value in rhf when the user makes changes to the input.

However we've noticed that onAccept fires even when the value is set programmatically. So when we load data, set it in RHF, it passes the value to this component, which fires onAccept, which per our code fires RHF's onChange, which makes RHF think the user changed something and it marks the field as "dirty".

Is there a native way to either prevent onAccept from firing when the value prop changes, or a similar event that only fires when the user has typed into the field?

const {
  field: { onChange, onBlur, value },
  fieldState: { error }
} = useController({
  name,
  rules: {
    required
  }
})

return (<IMaskInput
  className={classNames}
  data-tooltip-content={isErrored ? error.message : (value as string)}
  data-tooltip-id='default'
  data-tooltip-variant={isErrored ? 'accentError' : 'default'}
  id={id}
  lazy={false}
  name={name}
  onBlur={onBlur}
  placeholderChar='_'
  readOnly={readOnly}
  value={value as string}
  {...props}
  onAccept={(value, maskEvent) => {
    onChange(maskEvent.unmaskedValue === '' ? '' : value)
  }}
/)

[tuul-wq]

@viveleroi I've managed to get around with the following solution:

export const AmountInput = ({ value, placeholder = '0.00', onChange }: Props) => {
  const handleChange = (inputValue: string) => {
    // Skip onAccept from IMaskInput when new value set programmatically (came from props)
    if (inputValue === value) return;

    onChange(inputValue);
  };

  return (
    <IMaskInput
      mask={Number}
      min={0}
      scale={15}
      value={value}
      radix="."
      mapToRadix={[',']}
      autofix={true}
      placeholder={placeholder}
      onAccept={handleChange}
    />
  );
};

[viveleroi]

That seems to fix the issue, thanks!