IMaskInput mask prop types broken
silverlight513 opened this issue · comments
Describe the bug
When trying to use the types created for IMaskInput, they become invalid for IMaskInput.
I get a typescript error complaining that string is not a valid DateConstructor. I'm assuming this is a red herring because both string and date constructor are valid options and TS is getting confused due to the way the props types are written.
To Reproduce
CodeSandbox
Expected behavior
Expect the ComponentProps<typeof IMaskInput>
to not cause any errors when being used for IMaskInput
Environment:
- TS: 4.4.2
- React-Imask: 7.1.3
Additional context
Add any other context about the problem here.
types is not broken. take a look at type which is returned from register
:
https://github.com/react-hook-form/react-hook-form/blob/91949a0a6211b402d31cff19b65b111475cb8608/src/types/form.ts#L178
min
/max
values conflicts with mask values because they are used in Date mask.
working example:
type MaskedInputProps = IMaskInputProps<HTMLInputElement>;
const MaskedInputInner = ({ id, name, onChange, onBlur ...props }: MaskedInputProps) => (
<IMaskInput {...props} id={id ?? name} name={name} />
);
const MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>(
(props, ref) => <MaskedInputInner {...props} inputRef={ref} />
);
function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const { name, ref } = register("test-input", { required: true });
return <MaskedInput name={name} ref={ref} mask={Number} />
}