From 79a6456fe14840c46b2880bccbf629b661c024d8 Mon Sep 17 00:00:00 2001 From: Daniel Bruhn Date: Fri, 20 Oct 2017 06:26:38 -0700 Subject: [PATCH] Fix autofill scenarios by using data from onchange events (#112) 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 ce2f038..5c6a55b 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) }