-
-
Notifications
You must be signed in to change notification settings - Fork 251
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TypeError: Cannot read property 'addEventListener' of undefined #163
Comments
hi! Sorry, don't have time to investigate Ant, but by this error it seems that HTML-element was not passed to imask plugin. You probably have to change code a little bit to correctly pass native element reference to imask mixin. Take a look as it was done for IMaskInput and try to modify it according to Ant docs. |
Hey, I ended up switching to Text Mask and got it up running instantly by creating a DOM ref. Thanks for replying anyways. |
This comment was marked as resolved.
This comment was marked as resolved.
To get the original input element, we can use callback on the ref prop and extract the element from // types.d.ts
// based on https://github.com/uNmAnNeR/imaskjs/issues/329#issuecomment-708418004
export function IMaskMixin<T, D>(
Component: React.ComponentType<{ inputRef: React.RefCallback<D> } & T>,
): React.ComponentType<T & IMaskInputProps>;
// NumberField.tsx
import React from 'react';
import { Input, InputProps } from 'antd'; // v. 4.5.14
import { IMaskMixin } from 'imask-react'
const MaskedInput = IMaskMixin<InputProps, HTMLInputElement>(({ inputRef, ...props }) => {
const extractInputRef = React.useCallback(
(inst: React.ElementRef<typeof Input>) => inputRef(inst?.input),
[inputRef],
);
return <Input ref={extractInputRef} {...props} />;
});
export const NumberField = () => <MaskedInput mask={Number} size="large" />; |
I've run into an issue, while using
react-imask
's mixin w/Ant Design's Input component. Here's a simple implementation:and here are the errors I get:
Any idea what could be the cause of this issue or how I can address it?
The text was updated successfully, but these errors were encountered: