antoniopresto / antd-mask-input Goto Github PK

• I'm submitting a ...
  [*] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  It should be possible to edit only days or months without breaking the whole date

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

imask has right behavior

https://codesandbox.io/s/ecstatic-joliot-klo9pw?file=/src/App.js

• I'm submitting a ...
  [x] bug report
• Summary

Input placeholders are not honoured when switching between tabs

Good Result

Bad Result

• I'm submitting a ...
  [    ] bug report
  [    ] feature request
  [    ] question about the decisions made in the repository
  [ x ] question about how to use this project

• Summary
  I'm trying to make a simple number mask to currency values.

<Space direction="vertical">
  <label>Entrada</label>
    <MaskedInput
      autoComplete="off"
      placeholder = "Entrada"
      mask={
        React.useMemo<MaskType>(() => [
          {
            mask: 'R$ num',
            lazy: true,
            blocks: {
              num: {
                mask: Number,
                thousandsSeparator: '.',
                padFractionalZeros: true
              }
            }
          }
        ], [])
      }
    />
</Space>

But that way only one digit appears and throws this warning on the console. What am I doing wrong?

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

I am following this documentation: https://imask.js.org/

Thanks!

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

First digit onPaste is removed when corresponds to first digit of mask

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

When my mask is "+855 000 000 00[0]", copy pasting a number that starts with "8" will remove that digit from the paste.

Copy paste "87100378" into field

Expectation:
"+855 871 003 78"

Actual Outcome:
"+855 710 037 8"

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  The mask prop places an underscore on unfilled positions of the mask. When the field is empty, you see them as the field's placeholder, but once you start to type, they'll become actual characters typed in the field. Like this, Antd's len rule fails. If I want to set a required size to ensure all the characters of the field (a phone) is filled up, these underscores will count as characters.

<Form.Item label="Phone">
  {getFieldDecorator('phone', {
    rules: [
      { required: true, message: 'Phone is mandatory' },
      { len: 15, message: 'Phone must contain all digits' },
    ],
  })(
    <MaskedInput
      mask="(11) 11111-1111"
      id="phone"
      name="phone"
      value={phone}
      onChange={e => setPhone(e.target.value)}
    />
  )}
</Form.Item>

but

In theory, it should display the len error message, but due to the underscores taking place, it cannot be done. Any ideas? Perhaps an option to disable the underscores?

• I'm submitting a ...
  [+] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

• I'm submitting a ...
  [ ] bug report
  [x] feature request
  [ ] question about the decisions made in the repository
  [x] question about how to use this project

• Summary

Is is possible to use this component with Form.getFieldDecorator()? As a drop-in replacement to <Input />, the value is getting overwritten with the following warning in the console:

Warning: getFieldDecorator will override value, so please don't set value directly and use setFieldsValue to set it.

• I'm submitting a ...
  [x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  When used with a value provided by React state, inside onBlur event the state is not available, see example:
  https://stackblitz.com/edit/react-ts-awptpj?file=App.tsx

React version 18.2.0

I'm using antd blazor and would like to use this to format phone numbers, ssn as the user types is there a port for this library?

• I'm submitting a ...
  feature request
  question about how to use this project

• Summary
  I've tried to use antd-mask-input for phone number input with country selection.
  I found a possibility to dynamically change a mask, but I cannot control it outside.

What am I doing wrong?
I've prepared a sandbox
https://stackblitz.com/edit/react-ts-sn4acx?file=PhoneInput.tsx

added antd-mask-input into my application
facing this issue:

Node: 8.x
Webpacker : 3

/projects/node_modules/import-glob/index.js!/node_modules/antd-mask-input/build/module/lib/MaskedInput.js Unexpected token (100:53)
You may need an appropriate loader to handle this file type.
|             let eventHandlers = this._getEventHandlers();
|             let { placeholder = this.mask.emptyValue } = this.props;
|             let { placeholderChar, formatCharacters, ...cleanedProps } = this.props;
|             const props = { ...cleanedProps, ...eventHandlers, maxLength, placeholder };
|             delete props.value;
    at eval (4405:1)
    at Object.<anonymous> (vendor-044a8ee2351fcff75855.min.js:46083)

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Hi, I am using version 2.0.5 of antd-mask-input. In other cases it seems to work fine but when the component (MaskedInput) receives a new - changed value in the 'value' prop (from one it had been instantiated with before) after user already typed something in the field, the new value doesn't get updated in the component. The old value the user typed keeps being displayed in the input field though a different value has been passed in props already. imask package also logs a warning in the console: Element value was changed outside of mask. Syncronize mask using mask.updateValue() to work properly.
  I don't see that imask.current from antd-mask-input would be made accessible from outside of the package. Hopefully this problem can get resolved and antd-mask-input can work without having to call mask.updateValue() from outside of the package.
  Having read this problem description, can you think of something that could be wrong there?

• I'm submitting a ...
  [X] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  I was trying to use the dynamic mask, and kept getting an error when trying to delete characters in the input:
  imask.js:3527
  Error: Cannot read properties of undefined (reading '9') imask.js:3527
  So I cloned the repo and run the storybook. And the error is still there.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

1. Running the storybook, go to Dynamic Mask
2. Enter numbers, and then go with the arrows to the left
3. Delete a character
4. Notice there is an error in the console
   It also happens with RGB, which is using an array of masks

Do you know why it happens? Thanks for reading!

I have an issue with Edge & IE11 is it possible to add babel to convert the spread syntax in your build ?

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

<Form.Item className='form_item' name='ssn' rules={[ { required: true, message: 'Please input your US social security number', whitespace: true, }, { message: 'Only numbers must be entered', pattern: new RegExp(/^\d{3}-\d{2}-\d{4}$/), } ]} > <MaskedInput mask="000-00-0000" /> </Form.Item>

I got the value of this form item from api. But after replacing the with , the value are not showed.
Thank you.

The component works properly on chrome but on ie11 it causes an error.

"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

• I'm submitting a ...
  [X] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Version 2.0.6 does not build files in the node_modules folder but 2.0.5 has built files in node_modules

v2.0.5

v2.0.6

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

r.state._Input.setState is not a function

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)
  node 14.17.0
  react: 17.02
  "react-scripts": "4.0.3"

I get Uncaught Error whet pattern is not Ok.
For example for pattern "+7".
Error message: pattern "+7" does not contain any editable characters.

How to catch it? to prevent Uncaught Error?

• I'm submitting a ...
  [*] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Here I am trying to use mask for the IP address. Where in each part there could be max 3 digits.
  Usage: <MaskedInput mask="111.111.111.111" value="192.16.1.5" />
  Expectation: The input box should render value "192.16_.1__.5__"
  Actual Outcome: And here is what gets rendered "192.16_.1_5.___"

When value is "0.0.0.0" this is what I get "0_0.0_0.."

• I'm submitting a ...
  [x] bug report
  [x] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

It seems that this library is broken with antd v5, it does not use the theming correctly from the ConfigProvider.

It even starts to affect non <MakedInput /> components (these are supposed to be in dark mode:

I guess problem is when getting ref of input.

It's too hard to migrate project to react 16. Many other projects I think too.
Maybe it is possible to make MaskInput suitable for react 15? Please!

• I'm submitting a ...
  [+] bug report

• Summary
  I create MaskedInput with such mask:

const mask = useMemo( () => [ { mask: Number, scale: 2, thousandsSeparator: ' ', radix: '.', normalizeZeros: false, min: 0, max: 9999.99, }, ], [] );

And insert it in ant Form.Item with required prop.
When validation failed nothing happens with MaskedInput (borders not red, focus state not red etc).

I can provide status only manually, but I cant know about it (through props input status not provided).

antd version: 4.22.5
antd-mask-input version: 2.0.7

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  First of all, thanks for the lib =)

Currently, the behavior of adding a maxLength prop to the field based on the mask length, breaks the possibility of having dynamic masks in the same input

Especially for Brazilian forms, we have some fields in which the length and mask might vary, and it makes it impossible to do something close to this, or like masking a common document input type that we use, which the length vary from 11 to 18 chars and the masks are completely different (999.999.99-99 and 99.999.999/9999-99)

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

I think this is not the same as an optional character, but a completely different expected value and mask in the same field

We thought about the approach of using a select option so the user define the type of the document and we go from there, but this is actually a not expected behavior from a mask, so I'm calling it a bug, feel free to change it if you like ;)

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [x] question about how to use this project

• Summary

I have a custom prefixCls using the ConfigProvider component from antD, I have a way to overwrite the default class of the input ?

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

its possible use dynamic mask? Like in the ngx-mask

mask="(00) 0000-0000||(00) 0 0000-0000"

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository
[ ] question about how to use this project

Summary

MaskedInput doesn't transform initial value if hidden but already rendered (throw display: none or visibility)

Steps to reproduce

https://codesandbox.io/s/maskedinput-doesnt-break-text-if-hidden-br2dys?file=/demo.js

• I'm submitting a ...
  [ ] bug report
  [X] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

There's any impact on using lowercase on the custom input props?

• I'm submitting a ...

[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository
[ ] question about how to use this project

• Summary

this is _getEventHandlers method in MaskedInput.tsx:

// MaskedInput.tsx
// ...
  _keyPressPropName() {
    if (typeof navigator !== 'undefined') {
      return navigator.userAgent.match(/Android/i)
        ? 'onBeforeInput'
        : 'onKeyPress';
    }
    return 'onKeyPress';
  }

  _getEventHandlers() {
    return {
      onChange: this._onChange,
      onKeyDown: this._onKeyDown,
      onPaste: this._onPaste,
      [this._keyPressPropName()]: this._onKeyPress
    };
  }
// ...

...And the source is compiled as:

// compiled type signature file
// ...
    _keyPressPropName(): "onBeforeInput" | "onKeyPress";
    _getEventHandlers(): {
        [x: string]: (e: React.ChangeEvent<HTMLInputElement>) => void;
        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
        onKeyDown: (e: any) => void;
        onPaste: (e: React.ClipboardEvent<any>) => void;
    };

Though _keyPressPropName is Union type, because of typescript issue that union type cannot be a key of object, _getEventHandlers is compiled with x key which is a string type.

This makes compile error Property 'onPaste' of type '(e: ClipboardEvent<any>) => void' is not assignable to string index type '(e: ChangeEvent<HTMLInputElement>) . this should be fixed by more explicit type declaration on method:

  _getEventHandlers(): {
    onChange: (TChangeEvent) => void;
    onKeyDown: (TChangeEvent) => void;
    onPaste: (TClipboardEvent) => void;
    onBeforeInput?: (TChangeEvent) => void;
    onKeyPress?: (TChangeEvent) => void;
  } {
    return {
      onChange: this._onChange,
      onKeyDown: this._onKeyDown,
      onPaste: this._onPaste,
      [this._keyPressPropName()]: this._onKeyPress
    };
  }

which is compiled liked this:

    _getEventHandlers(): {
        onChange: (TChangeEvent: any) => void;
        onKeyDown: (TChangeEvent: any) => void;
        onPaste: (TClipboardEvent: any) => void;
        onBeforeInput?: (TChangeEvent: any) => void;
        onKeyPress?: (TChangeEvent: any) => void;
    };

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

• I'm submitting a ...

[ ] question about how to use this project

• Summary
  i want to keep input +1 by default
  mask used in input : mask="+\1 (111) 111-1111"
  error : Don't use octal: '\1'. Use '\u....' instead no-octal-escape
  if i escape wit \x1 it shows in input as +x1

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

Summary
Good Result

Bad Result

Working only "aa" rule in mask attribute, because with "AA" set value "AA" and can't write something.

Before big "AA" worked successfully for Uppercase letters

This is a bug report.

The static characters get skipped on a masked input field, on desktop, but not on the mobile browser.
For example, for the format 'DD-MM-YYYY', the masking pattern is '11-11-1111', and after entering 'DD', the cursor skips the '-' and automatically moves to the 'MM' part, on the desktop browser. But, on the mobile, the cursor doesn't skip the static '-', hence the input character is lost and confuses the user.

• I'm submitting a ...
  [* ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

WARNING in ./node_modules/antd-mask-input/build/module/lib/MaskedInput.js
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/antd-mask-input/src/lib/MaskedInput.tsx' file: Error: ENOENT: no such file or directory, open 'node_modules/antd-mask-input/src/lib/MaskedInput.tsx'

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

• I'm submitting a ...
  [x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

Summary

Good Result:

Required rule should always be shown if all text has been removed from the field

Bad Result:

After writing and deleting text, required no longer works

• I'm submitting a ...
  [X] bug report

• Summary
  I want to create a simple mac address field with mask like this

                <MaskedInput type="text" mask="00:00:00:00:00:00" />

i can only fill the field with numbers no chars

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  I'm getting some warns after update react-scipts from v4 to v5

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

WARNING in ./node_modules/antd-mask-input/build/module/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\index.ts' file: Error: ENOENT: no such file or director
y, open 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\index.ts'
 @ ./src/components/CustomInput/customInput.js 5:0-42 350:37-48
 @ ./src/components/index.js 3:0-52 26:0-368
 @ ./src/NextApp.js 16:0-69 32:39-52 49:42-64
 @ ./src/index.js 5:0-32 16:7-14

WARNING in ./node_modules/antd-mask-input/build/module/lib/MaskedInput.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\MaskedInput.tsx' file: Error: ENOENT: no such file 
or directory, open 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\MaskedInput.tsx'
 @ ./node_modules/antd-mask-input/build/module/index.js 1:0-38 2:25-30 3:15-20
 @ ./src/components/CustomInput/customInput.js 5:0-42 350:37-48
 @ ./src/components/index.js 3:0-52 26:0-368
 @ ./src/NextApp.js 16:0-69 32:39-52 49:42-64
 @ ./src/index.js 5:0-32 16:7-14

WARNING in ./node_modules/antd-mask-input/build/module/lib/Pattern.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\Pattern.ts' file: Error: ENOENT: no such file or di
rectory, open 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\Pattern.ts'
 @ ./node_modules/antd-mask-input/build/module/lib/inputmask-core.js 5:0-36 54:25-32 393:20-27
 @ ./node_modules/antd-mask-input/build/module/lib/MaskedInput.js 11:0-41 217:27-36
 @ ./node_modules/antd-mask-input/build/module/index.js 1:0-38 2:25-30 3:15-20
 @ ./src/components/CustomInput/customInput.js 5:0-42 350:37-48
 @ ./src/components/index.js 3:0-52 26:0-368
 @ ./src/NextApp.js 16:0-69 32:39-52 49:42-64
 @ ./src/index.js 5:0-32 16:7-14

WARNING in ./node_modules/antd-mask-input/build/module/lib/helpers.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\helpers.ts' file: Error: ENOENT: no such file or di
rectory, open 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\helpers.ts'
 @ ./node_modules/antd-mask-input/build/module/lib/MaskedInput.js 12:0-71 63:10-16 77:17-23 240:34-46 245:6-18 304:38-50 309:38-50 315:36-48
 @ ./node_modules/antd-mask-input/build/module/index.js 1:0-38 2:25-30 3:15-20
 @ ./src/components/CustomInput/customInput.js 5:0-42 350:37-48
 @ ./src/components/index.js 3:0-52 26:0-368
 @ ./src/NextApp.js 16:0-69 32:39-52 49:42-64
 @ ./src/index.js 5:0-32 16:7-14

WARNING in ./node_modules/antd-mask-input/build/module/lib/inputmask-core.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\inputmask-core.ts' file: Error: ENOENT: no such fil
e or directory, open 'C:\Workspace\harv-Harvest-frontend\node_modules\antd-mask-input\src\lib\inputmask-core.ts'
 @ ./node_modules/antd-mask-input/build/module/lib/MaskedInput.js 11:0-41 217:27-36
 @ ./node_modules/antd-mask-input/build/module/index.js 1:0-38 2:25-30 3:15-20
 @ ./src/components/CustomInput/customInput.js 5:0-42 350:37-48
 @ ./src/components/index.js 3:0-52 26:0-368
 @ ./src/NextApp.js 16:0-69 32:39-52 49:42-64
 @ ./src/index.js 5:0-32 16:7-14

• I'm submitting a ...
  [X] bug report

• Summary
  All the MaskedInput fields in a edit resource show it's values initially masked and then, less than a second later, turns into unmasked values. If I focus the field, it shows masked again and stays.
  This happens only after the second time I edit the record.

• Other information

The code is as simple as this:

<Edit saveButtonProps={saveButtonProps}>
  <Form {...formProps}>
    <Form.Item
      label="Phone Number"
      name={["phoneNumber"]}
    >
      <MaskedInput mask="(00) 0 0000-0000" />
    </Form.Item>
 </Form>
</Edit>

I'm using @pankod/[email protected], @refinedev/[email protected], @refinedev/[email protected], [email protected], [email protected]

• I'm submitting a ...
  [ ] bug report
  [x] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Actually:
  I set the mask "11111-111-1-1111-1111111"
  but I can get the value "1____-___-_-____-_______" if user inputs only one symbol "1"
  Expect:
  I expect that if I set a mask I will get a value that matches the mask and the change event to be generated only if the value matches the mask.

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  When loading the <MaskedInput> component, the page instantly crashes and provides me the following information:

TypeError: this.state._Input.setState is not a function
    at MaskedInput.setInputValue (MaskedInput.tsx:288:23)
    at MaskedInput.componentDidMount (MaskedInput.tsx:55:10)
    at commitLifeCycles (react-dom.development.js:20663:24)
    at commitLayoutEffects (react-dom.development.js:23426:7)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at commitRootImpl (react-dom.development.js:23151:9)
    at unstable_runWithPriority (scheduler.development.js:468:12)
    at runWithPriority$1 (react-dom.development.js:11276:10)

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)
  I have been doing a lot of overdue infrastructure upgrades, I'm not certain which one broke this component. Some relevant ones might be:
• [email protected] -> [email protected]
• Upgraded to [email protected]
• Upgraded to [email protected]

• I'm submitting a ...
  [X ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  When mask have optional characters as [000] and i trying paste some value less than required + optional, optional values are filled from start string.

• Other information
  Reproduce link: https://codesandbox.io/s/antd-mask-input-onpaste-bug-dmxqrt

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  MaskedInput doesn't allow type anything using any char mask (mask="***")

• Steps to reproduce
  https://codesandbox.io/s/festive-fire-ibwydw?file=/src/App.js

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [X] question about how to use this project

• How to set mask to element or value

ex: el.SetMaskedInput("(11) 1111-1111"); or
when value before ? its a optional

• I'm submitting a ...
  [x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

How to use with multiple masks? For example, I need to use the mask 000.000.000-00 and 00.000.000/0000-00, but when I have the value with first mask, is not possible to type more character, I type and nothing happened and the second mask is not applied.

Using dispatch not working too beacuse the same problem and I can't deal with the length of characters.

I would like that when it had the value 123.456.789-00 and I typed one more character, it would format with the second mask

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Setting readOnly={true} should prevent changes to the field value, currently it is ignored.

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [*] question about how to use this project

• Summary
  Can you share an example to mask the IP address. Like "111.111.111.111" where the each part could be at max a 3 digit number.

• I'm submitting a ...
  [ ] bug report
• Summary

Hi, in my project I want to allow the user to enter in the field cell phone numbers that he copied and paste into the field but it is not possible at all, can anyone help me with this problem?

Thanks :)

• I'm submitting a ...
  [ ] bug report
  [X] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• When I try to use the setFieldsValue function from Form object fields don't get populated.

• I'm submitting a ...
  [ ] bug report
  [x] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

The maxLength prop should be passed to the wrapped <Input /> component if explicitly set. Currently it is being overridden with the length of the pattern string.

• Other information

For example, a card CVV can be a 3 or 4 digit number. As they are usually only 3 digits it makes sense to show a pattern that matches this. However, the user should still be able to enter 4 digits.

<MaskedInput mask="111" maxLength={4} />

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  form.setFieldValue() does not trigger mask.updateValue(), which means value will be reset to the previously inputted by user as soon as rerender triggers. Warning
  Element value was changed outside of mask. Syncronize mask using mask.updateValue() to work properly. will be displayed in console, indicating that mask.updateValue is required.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

Consider following component. forceRerender is only for testing purposes to manually trigger component rerender.

import {Form} from "antd";
import {MaskedInput} from "antd-mask-input";
import {useState} from "react";

export function Dummy() {
  const [form] = Form.useForm()
  const [forceRerender, setForceRerender] = useState({})
  return (
    <div>
      <button onClick={() => {
        form.setFieldValue("test", "1234")
        /*
        None works:
        form.setFieldsValue({
          test: '1234'
        })
        form.setFields([{
          name: 'test',
          value: '1234'
        }])
         */
      }}>
        set
      </button>
      <button onClick={() => {
        setForceRerender({})
      }}>
        force rerender
      </button>
      <Form form={form}>
        <Form.Item
          name="test"
        >
          <MaskedInput
            mask={
              '00-00'
            }
          />
        </Form.Item>
      </Form>
    </div>
  )
}

Steps to reproduce:

1. Type anything in input
2. Press set button
3. Press force rerender button

Expected outcome:
Input value is 1234 as that's what form contains

Actual outcome:
Input value is whatever user typed on step 1.

Package versions:
react: 17.0.2
antd: 4.23.5
antd-mask-input: 2.0.7