From b092989bdbddcbfccbb801370e0dfb8d6eae58c3 Mon Sep 17 00:00:00 2001 From: "Bruhn, Daniel" Date: Wed, 27 Sep 2017 17:48:38 -0700 Subject: [PATCH] Fix autofill scenarios by using data from onchange events Side effects: 1) Delete behavior now allows removal of more than one character 2) Cut now shifts remaining characters left instead of leaving "hole" Also fix binding of this._updateInputSelection (cf. https://github.com/insin/react-maskedinput/pull/110) --- src/index.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/index.js b/src/index.js index b9b16a8..57e0d8c 100644 --- a/src/index.js +++ b/src/index.js @@ -66,6 +66,7 @@ class MaskedInput extends React.Component { this._onKeyDown = this._onKeyDown.bind(this) this._onPaste = this._onPaste.bind(this) this._onKeyPress = this._onKeyPress.bind(this) + this._updateInputSelection = this._updateInputSelection.bind(this) } componentWillMount() { @@ -132,20 +133,14 @@ class MaskedInput extends React.Component { // console.log('onChange', JSON.stringify(getSelection(this.input)), e.target.value) var maskValue = this.mask.getValue() - if (e.target.value !== maskValue) { - // Cut or delete operations will have shortened the value - if (e.target.value.length < maskValue.length) { - var sizeDiff = maskValue.length - e.target.value.length - this._updateMaskSelection() - this.mask.selection.end = this.mask.selection.start + sizeDiff - this.mask.backspace() - } - var value = this._getDisplayValue() - e.target.value = value - if (value) { - this._updateInputSelection() - } + var incomingValue = e.target.value + if (incomingValue !== maskValue) { // only modify mask if form contents actually changed + this._updateMaskSelection() + this.mask.setValue(incomingValue) // write the whole updated value into the mask + e.target.value = this._getDisplayValue() // update the form with pattern applied to the value + this._updateInputSelection() } + if (this.props.onChange) { this.props.onChange(e) }