Describe the bug IMaskInput is not typed properly and result with this typing -> const IMaskInput: React.ComponentType<{}> IMaskInput is not taking any props like mask,definitions etc. and make it not usable with typescript at all (Atleast the way i'm configured).

Is there something I'm missing ?

To Reproduce I have typescript 4.4.3, React 17.0.2 with Imask 6.2.2

Environment:

• OS: Windows
• Browser Chrome
• IMask 6.2.2
• typescript 4.4.3, React 17.0.2

Hello, when I try to add unit tests to my project, I'm having the following error in the console:

console.log: Jest:   ● Test suite failed to run
[Info]      C:\Code\Web\next-js\node_modules\imask\esm\index.js:1
[Info]      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './_rollupPluginBabelHelpers-3c58f0e3.js';
[Info]                                                                                               ^^^^^^
[Info]      SyntaxError: Cannot use import statement outside a module
[Info]        at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
[Info]        at node_modules/react-imask/dist/react-imask.js:2:83
[Info]        at Object.<anonymous> (node_modules/react-imask/dist/react-imask.js:3:3)
[Info]        at Object.<anonymous> (src/components/global-components/form-controls/MaskField.js:8:63)
[Info]        at Object.<anonymous> (src/components/global-components/form-controls/index.js:25:62)
[Info]        at Object.<anonymous> (src/components/component-library/examples/TextFieldExample.js:4:1)
[Info]        at Object.<anonymous> (src/__tests__/components/component-library/examples/TextFieldExample.test.js:9:69)

I have tried several fixes in the web but I can't make it work, have you had this issue before?

This is my package.json

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT",
    "postinstall": "next build",
    "test": "jest --maxWorkers=4 --colors",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:CI": "jest --maxWorkers=4 --colors --coverage --coverageReporters=cobertura --json --outputFile=coverage/testResults.json --ci --reporters=default --reporters=jest-junit",
    "export": "next export"
  },
  "dependencies": {
    "@babel/core": "^7.8.6",
    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@contentful/rich-text-types": "^14.0.1",
    "@fortawesome/fontawesome-pro": "^5.11.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/pro-light-svg-icons": "^5.11.2",
    "@fortawesome/pro-regular-svg-icons": "^5.11.2",
    "@fortawesome/pro-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.7",
    "@microsoft/applicationinsights-web": "^2.3.1",
    "@optimizely/react-sdk": "^1.0.1",
    "@types/react": "^16.9.14",
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.19.0",
    "babel-plugin-prismjs": "^1.1.1",
    "compression": "^1.7.4",
    "contentful": "^7.10.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "google-map-react": "^1.1.5",
    "isomorphic-unfetch": "^3.0.0",
    "jest-junit": "^10.0.0",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.15",
    "next": "^9.2.2",
    "next-redux-wrapper": "^3.0.0",
    "nookies": "^2.0.8",
    "prismjs": "^1.17.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-click-outside": "^3.0.1",
    "react-dom": "^16.12.0",
    "react-imask": "^6.0.3",
    "react-loading-skeleton": "^1.3.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-jest": "^25.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.3",
    "husky": "^4.2.3",
    "istanbul-reports": "^3.0.0",
    "jest": "^24.9.0",
    "jest-fetch-mock": "^3.0.1",
    "react-media": "^1.10.0",
    "react-test-renderer": "^16.12.0",
    "redux-mock-store": "^1.5.4"
  }
}

An this my jest.config.js file:

const esModules = ["react-imask", "imask"].join('|');

module.exports = {
  moduleDirectories: ["node_modules", "src", "static", "store"],
  modulePathIgnorePatterns: ["<rootDir>/node_modules/prismjs/plugins/line-numbers"],
  transform: {
    [`(${esModules}).+\\.js$`]: 'babel-jest'
  },
  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  testPathIgnorePatterns: [
    "<rootDir>/src/components/component-library",
    "<rootDir>/.next",
    "jest.config.js",
    "next.config.js"
  ],
  collectCoverageFrom: [
    "**/src/**",
    "**/store/**",
    "**/pages/**",
    "!**/__tests__/**",
    "!**/node_modules/**",
    "!**/component-library/**"
  ],
  testEnvironment: "node",
  collectCoverage: true,
  verbose: false,
  automock: false,
  setupFiles: ["./setupTests.js"],
  moduleNameMapper: {
    "functions/(.*)$": "<rootDir>/src/components/Functions/$1",
    "scripts(.*)$": "<rootDir>/src/scripts/$1",
    "^/(.*)$": "<rootDir>/src/$1",
    "^store(.*)$": "<rootDir>/store/$1",
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
  },
  coveragePathIgnorePatterns: ["/node_modules/"],
  coverageThreshold: {
    global: {
      branches: 25,
      functions: 20,
      lines: 40,
      statements: 40
    }
  }
};

An I can't make it work, could you help me please?

Thank you!

Hey!

I'm fairly new to js and wanted to know if there is a way to integrate this plugin with default html5-placeholder (or bootstrap required placeholder)? For example, until user clicked or hovered over input field mask stays hidden and only placeholder is shown.

Would appreciate any help, thanks!

The react-plugin keep getting the error at Nextjs. (This is a SSR).

The dependencies: "dependencies": { "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "animejs": "^3.2.0", "axios": "^0.19.2", "final-form": "^4.20.1", "mui-rff": "^2.1.15", "next": "^9.4.4", "notistack": "^0.9.17", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-final-form": "^6.5.1", "react-imask": "^6.0.5", "react-swipeable-views": "^0.13.9", "snyk": "^1.362.0", "styled-components": "^5.1.1", "yup": "^0.29.1" }, "devDependencies": { "@types/animejs": "^3.1.1", "@types/node": "^14.0.23", "@types/react": "^16.9.43", "@types/react-swipeable-views": "^0.13.0", "@types/styled-components": "^5.1.1", "@types/yup": "^0.29.3", "@typescript-eslint/eslint-plugin": "^3.6.1", "@typescript-eslint/parser": "^3.6.1", "babel-plugin-styled-components": "^1.10.7", "cz-conventional-changelog": "3.2.0", "eslint": "^7.4.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.20.3", "eslint-plugin-react-hooks": "^4.0.8", "prettier": "^2.0.5", "typescript": "^3.9.6" },

The user can't type the last number when I change the pattern to d/m/Y.

new IMask(element, { mask: Date, pattern: 'd/m/Y' })

Browser: Safari 11 Demo: https://jsfiddle.net/p2Lt5j3b/1/

Describe the bug The vue-imask plugin is not compiling on Vue2 app. Throws an error related to vue-demi

To Reproduce build or run dev a Vue2 (or Nuxt) app using vue-imask

Expected behavior A clear and concise description of what you expected to happen.

Environment:

• Windows
• [email protected]
• Nuxt 2.15.18

Additional context Output:

"export 'h' was not found in 'vue-demi'                                                                                                  friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'isRef' was not found in 'vue-demi'                                                                                              friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'onMounted' was not found in 'vue-demi'                                                                                          friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26
"export 'onUnmounted' was not found in 'vue-demi'                                                                                        friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'readonly' was not found in 'vue-demi'                                                                                           friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'ref' was not found in 'vue-demi'                                                                                                friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/component3-composition.js                                                                         friendly-errors 21:01:26

"export 'toRef' was not found in 'vue-demi'                                                                                              friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/component3-composition.js                                                                         friendly-errors 21:01:26

"export 'watch' was not found in 'vue-demi'                                                                                              friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26
 ERROR  Failed to compile with 1 errors                                                                                                  friendly-errors 21:01:26

This dependency was not found:                                                                                                           friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26
* @vue/composition-api/dist/vue-composition-api.esm.js in ./node_modules/vue-demi/lib/index.mjs                                          friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26
To install it, you can run: npm install --save @vue/composition-api/dist/vue-composition-api.esm.js```

Because Vue Model is not triggered with external value changes i.e. element.value = "", the bound value on Vue is no updated after a mask is complete and if values are entered still.

I found this when using a phone mask "(999) 999-9999". The mask would work fine, but if I hit an extra key after the last character the Vue data would be "(999) 999-9999X".

To solve this, I added updated InputMask.updateControl to :

function updateControl() {
                    var newUnmaskedValue = this.masked.unmaskedValue;
                        var newValue = this.masked.value;
                    var isChanged = this.unmaskedValue !== newUnmaskedValue || this.value !== newValue;
                    this._unmaskedValue = newUnmaskedValue;
                        this._value = newValue;
                        if (this.el.value !== newValue) {
                            this.el.value = newValue;
                            // If the mask has completed and keys are still entered, manually trigger Vue to update
                            if (this.masked.isComplete) this.el.input.dispatchEvent(new Event('input'));
                        }
                    if (isChanged) this._fireChangeEvents();
}

On a previous version of angular-imask (specifically [email protected] with [email protected] on Angular 5.2.5 - sample project hereI was able to use the following mask:

<input [imask]="this.maskService.numericWithThousandsSeparator(999999)" [(ngModel)]="thousandsMask" name="thousandsMask"/>

    public numericWithThousandsSeparator(max: number): {} {
        return {
            mask: Number,
            scale: 0,
            signed: false,
            thousandsSeparator: ",",
            padFractionalZeros: false,
            normalizeZeros: false,
            max: max,
            min: 0,
        };
    };

The mask would allow me to type in any number from 0 to 999,999.

When I try to use this same number mask above with [email protected] with [email protected] on Angular 7.0.2 (sample project here). The mask won't allow me to type anything and I don't get any messages in the console.

Any ideas of why this is happening or what I'm doing wrong?

Additional Info: I've verified the mask also works with [email protected] with [email protected] on Angular 7.0.4. I then did an npm uninstall angular-imask and ran a npm install angular-imask which installed version 4.1.1 of both angular-imask and imask. This reproduced the issue of the mask not allowing me to enter anything into the input. So my guess is something between versions 3.4.0 and 4.1.1 was introduced that caused this.

Looks like [unmask]="true" input of IMaskDirective is not working - masked value returned.

my usage of directive

<input [value]="currentValue"
       [imask]="{mask: '000{ }000{ }0000'}"
       [unmask]="true"
       (accept)="onAccept($event)"
       (complete)="onComplete($event)"
/>

Thank you

I'm having a problem using Date type mask with angular-imask: it wont let me enter the last digit. I rechecked thing several times and can't find anything wrong. Can anybody help please ? is this a bug in angular-imask ?

This is the configuration I'm using:

 imaskDate = {
   mask: Date,

   pattern: 'd/`m/`Y',

   blocks: {
     d: {
       mask: IMask.MaskedRange,
       from: 1,
       to: 31,
       maxLength: 2,
     },
     m: {
       mask: IMask.MaskedRange,
       from: 1,
       to: 12,
       maxLength: 2,
     },
     Y: {
       mask: IMask.MaskedRange,
       from: 1900,
       to: 9999,
     }
   },
   lazy: false,
  };

The mask loads correctly, everything works ok, until I try to input the last digit :/

Here is a working example showing the problem: https://stackblitz.com/edit/angular-tzovqf

In Angular you can check the state of the form; if a control as been touched for example. When using imask, the dirty property of the form is automatically set to true. The expectation is that the form's dirty property should be false until the user changes an input value.

text-mask had a similar issueand apparently solved it with this commit. Was wondering if something similar could be done in imask?

Bumps json5 from 2.2.1 to 2.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Describe the bug When trying to extend existing components using IMaskMixin. The value submitted by the user is correct but the MaskedFunction_value shows a different result. This only happens on safari while using characters with accent marks, on chrome the results are correct.

• Safari

• Chrome

Expected behavior It should work like in chrome

Environment:

• Browser: safari
• "react-imask": "6.4.3",

Describe the bug Wrong phone number on input after paste.

To Reproduce Paste 89041234567 and get a wrong result on input field.

Expected behavior After paste 89041234567 field have a correct number, like this

Environment:

• OS: Mac Os
• Browser Edge
• Version 108.0.1462.41
• IMask version: 6.4.3

Describe the bug Probably related to https://github.com/microsoft/TypeScript/issues/49160 I use moduleResolution: "NodeNext" in my typescript project and I'm trying to use IMask, but I'm getting the following error:

This expression is not callable.
  Type 'typeof import("/home/petrus/tas/tmi/app/node_modules/imask/index")' has no call signatures.ts(2349)

It only works with moduleResolution: "node"

To Reproduce Reproduce using this repo https://github.com/petruspierre/imask-nodenext-issue

Expected behavior Should work independently of the moduleResolution method

Environment:

• "typescript": "4.9.4"

Describe the bug

When using a Number mask, after entering some number and after deleting the last digit, 0 will appear in the input and the cursor will move in front of it. This does not happen with 6.2.2. It started to happen since 6.3.

To Reproduce https://codesandbox.io/s/chakra-ui-react-imask-react-hook-form-forked-0j7mmt

Expected behavior It should not put 0 in the input when the last digit is deleted in the input, the input should be empty.

Environment:

• OS: Mac Os
• Browser Edge
• Version 108.0.1462.41
• IMask version: 6.4.3
• ReactJS

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.