useMask.js:1 Error: The initialized value of the `value` or `defaultValue` property is longer than the value specified in the `mask` property. Check the correctness of the initialized value in the specified property.

[ashok-mis]

Using @react-input/mask v1.0.23, when modify callback is used to update the mask dynamically (based on the entered value) and a value is entered the following error is thrown

useMask.js:1 Error: The initialized value of thevalueordefaultValueproperty is longer than the value specified in themaskproperty. Check the correctness of the initialized value in the specified property.

And it seems to be related to @react-input/core v1.0.9 onwards (useDispatchCustomInputEvent.js has been removed?) as v1.0.8 is working fine.

modify callback is invoked but the returned mask is not reflecting in useMask.js resulting in the error above.

Though not ideal for now we have modified the package-lock.json to use v1.0.8

[GoncharukBro]

Please provide a code example or a repository so that we can analyze the error.

[ashok-mis]

Please provide a code example or a repository so that we can analyze the error.

import TextField from "@mui/material/TextField";
import { Replacement } from "@react-input/mask";

const onMaskModify = (value: string): any => {
    let mask = "lla";
    const length = value.length;
    const mask1= length > 2 && value.match(/^[A-Z]{2}\d+/g);
    const mask2= length > 2 && value.match(/^[A-Z]{2}\d+/g);

    if (mask1) {
        mask = "lll ____ ______";
    } else if (mask2) {
        mask = "ll __ __ ______";
    }

    return { mask: mask };
};

const textMaskInput = forwardRef<HTMLInputElement, ITextMaskInputProps>(function textMaskInput(props, ref) {
    return <InputMask ref={ref} {...props} />;
});

textMaskInput.displayName = "TextMaskInput";

inputProps = { ...inputProps, mask: "lla", replacement: { _: /\d/, a: /[A-Z]|\d/, l: /[A-Z]/ }, modify: onMaskModify };
fieldInputProps = { ...fieldInputProps, inputComponent: textMaskInput };

<TextField inputProps={inputProps} InputProps={fieldInputProps} />

[MartinDavi]

I am seeing this with both the <InputMask /> component or when using useMask, for what it's worth.

I imagine making the input controlled and passing the value to mask: onMaskModify(value).mask would probably prevent the error, but obviously annoying to need to switch to a controlled component just for this.