uNmAnNeR / imaskjs

vanilla javascript input mask

Home Page:https://imask.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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} />
}