diff --git a/.gitignore b/.gitignore
index e51faa6..55238c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@
/umd
npm-debug.log*
package-lock.json
+/.vscode
diff --git a/CHANGES.md b/CHANGES.md
index c7a2410..1e250dd 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,3 +1,7 @@
+## 4.0.2 / 2018-02-08
+
+* Prevent paste in disabled state
+
## 4.0.1 / 2018-01-26 🇦🇺
* Fix auto-fill scenarios by using data from `onChange` events [[#112](https://github.com/insin/react-maskedinput/pull/112)]
diff --git a/README.md b/README.md
index 7ed1291..46cca07 100644
--- a/README.md
+++ b/README.md
@@ -118,6 +118,10 @@ A default `placeholder` will be generated from the mask's pattern, but you can p
By default, the rendered ``'s `size` will be the length of the pattern, but you can pass a `size` prop to override this.
+### `onBadInput` : `() => void`
+
+A callback which will be called any time the user inputs or pastes invalid character(s).****
+
### Other props
Any other props passed in will be passed as props to the rendered ``, except for the following, which are managed by the component:
diff --git a/demo/src/index.js b/demo/src/index.js
index 54a38d6..f9e7ddf 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -1,7 +1,7 @@
import './style.css'
import React from 'react'
-import {render} from 'react-dom'
+import {render, findDOMNode} from 'react-dom'
import MaskedInput from '../../src'
@@ -12,7 +12,7 @@ const PATTERNS = [
'1 1',
]
-class App extends React.Component {
+class App extends React.PureComponent {
state = {
card: '',
expiry: '',
@@ -43,6 +43,24 @@ class App extends React.Component {
}
}
+ _onBadInput = () => {
+ if (this.timerId) {
+ return;
+ }
+ this.inputCardNode.classList.add('is-invalid');
+ this.timerId = setTimeout(() => {
+ delete this.timerId;
+ this.inputCardNode.classList.remove('is-invalid');
+ }, 400);
+ };
+
+ componentWillUnmount() {
+ if (this.timerId) {
+ clearTimeout(this.timerId);
+ delete this.timerId;
+ }
+ };
+
render() {
return
@@ -51,7 +69,8 @@ class App extends React.Component {