onMask handler makes input uncontrolled

[hadeji33]

When adding the onMask handler, the value of the input field changes even if we strictly specified the value prop of the element. This can be demonstrated by modifying the original example as follows:

import { useMask } from "@react-input/mask";

export default function Input() {
  const inputRef = useMask({
    mask: "+1 (___) ___-__-__",
    replacement: { _: /\d/ },
    onMask: console.log,
  });

  return (
    <input ref={inputRef} value={"+1 (555"} placeholder="+1 (___) ___-__-__" />
  );
}

We can see this when we want to implement a controlled input component that receives value and onChange props from outside:

import { useMask, type MaskEvent } from "@react-input/mask";

import { useState } from "react";

export type InputProps = {
  value?: string;
  defaultValue?: string;
  onChange?: (neValue: string) => void;
};

export default function Input({ value, defaultValue, onChange }: InputProps) {
  const [innerValue, setInnerValue] = useState(defaultValue);

  const handleMask = (event: MaskEvent) => {
    setInnerValue(event.detail.value);
    onChange?.(event.detail.value);
  };

  const inputRef = useMask({
    mask: "+1 (___) ___-__-__",
    replacement: { _: /\d/ },
    onMask: handleMask,
  });

  return (
    <input
      ref={inputRef}
      value={value ?? innerValue}
      placeholder="+1 (___) ___-__-__"
    />
  );
}