Open ashok-mis opened 5 months ago
Please provide a code example or a repository so that we can analyze the error.
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} />
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 the
valueor
defaultValueproperty is longer than the value specified in the
maskproperty. 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