From 7d6d807347801bccf94c600cecd47312a3a62999 Mon Sep 17 00:00:00 2001 From: Joe Love Date: Thu, 1 Dec 2016 12:08:10 +0000 Subject: [PATCH 1/6] add user agent sniffing for keypress event name (eww) --- src/index.js | 43 ++++++++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/src/index.js b/src/index.js index a902abd..321f8cd 100644 --- a/src/index.js +++ b/src/index.js @@ -235,6 +235,16 @@ var MaskedInput = React.createClass({ return value === this.mask.emptyValue ? '' : value }, + _userAgentIsEdge() { + return navigator.userAgent.match(/(Edge)/i); + }, + + _keyPressEventProp() { + return (this._userAgentIsEdge) + ? 'onKeyPress' + : 'onBeforeInput' + }, + focus() { this.input.focus() }, @@ -244,19 +254,26 @@ var MaskedInput = React.createClass({ }, render() { - var {mask, formatCharacters, size, placeholder, placeholderChar, ...props} = this.props - var patternLength = this.mask.pattern.length - return this.input = r } - maxLength={patternLength} - onChange={this._onChange} - onKeyDown={this._onKeyDown} - onBeforeInput={this._onKeyPress} - onPaste={this._onPaste} - placeholder={placeholder || this.mask.emptyValue} - size={size || patternLength} - value={this._getDisplayValue()} - /> + var ref = (r => this.input = r) + var maxLength = this.mask.pattern.length + var value = this._getDisplayValue() + + var { + size = maxLength, + placeholder = this.mask.emptyValue + } = this.props + + var eventHandlers = { + onChange: this._onChange, + onKeyDown: this._onKeyDown, + onPaste: this._onPaste + } + + eventHandlers[this._keyPressEventProp()] = this._onKeyPress; + + var props = { ...this.props, ...eventHandlers, ref, maxLength, value, size, placeholder } + + return } }) From f224d1f44281bd97a378149b11ef9e0562e250af Mon Sep 17 00:00:00 2001 From: Joe Love Date: Thu, 1 Dec 2016 12:09:23 +0000 Subject: [PATCH 2/6] remove semi-colons to match coding style --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 321f8cd..7a953b0 100644 --- a/src/index.js +++ b/src/index.js @@ -236,7 +236,7 @@ var MaskedInput = React.createClass({ }, _userAgentIsEdge() { - return navigator.userAgent.match(/(Edge)/i); + return navigator.userAgent.match(/(Edge)/i) }, _keyPressEventProp() { @@ -269,7 +269,7 @@ var MaskedInput = React.createClass({ onPaste: this._onPaste } - eventHandlers[this._keyPressEventProp()] = this._onKeyPress; + eventHandlers[this._keyPressEventProp()] = this._onKeyPress var props = { ...this.props, ...eventHandlers, ref, maxLength, value, size, placeholder } From 6875568ac4c254516d1a72a6a308b5429031a8fe Mon Sep 17 00:00:00 2001 From: Joe Love Date: Thu, 1 Dec 2016 13:31:15 +0000 Subject: [PATCH 3/6] fix bug with android chrome, bah --- src/index.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index 7a953b0..3b7f882 100644 --- a/src/index.js +++ b/src/index.js @@ -235,12 +235,21 @@ var MaskedInput = React.createClass({ return value === this.mask.emptyValue ? '' : value }, - _userAgentIsEdge() { - return navigator.userAgent.match(/(Edge)/i) + _getEventHandlers() { + return { + onChange: this._onChange, + onKeyDown: this._onKeyDown, + onPaste: this._onPaste, + [this._keyPressEventProp()]: this._onKeyPress + } }, _keyPressEventProp() { - return (this._userAgentIsEdge) + var { userAgent } = navigator + var isEdge = userAgent.match(/Edge/i) + var isNotAndroid = !userAgent.match(/[Aa]ndroid/i) + + return (isEdge || isNotAndroid) ? 'onKeyPress' : 'onBeforeInput' }, @@ -257,19 +266,13 @@ var MaskedInput = React.createClass({ var ref = (r => this.input = r) var maxLength = this.mask.pattern.length var value = this._getDisplayValue() + var eventHandlers = this._getEventHandlers() var { size = maxLength, placeholder = this.mask.emptyValue } = this.props - var eventHandlers = { - onChange: this._onChange, - onKeyDown: this._onKeyDown, - onPaste: this._onPaste - } - - eventHandlers[this._keyPressEventProp()] = this._onKeyPress var props = { ...this.props, ...eventHandlers, ref, maxLength, value, size, placeholder } From beb4693f29ae08d55db7a4d90da30428bf784833 Mon Sep 17 00:00:00 2001 From: Joe Love Date: Thu, 1 Dec 2016 13:46:46 +0000 Subject: [PATCH 4/6] small tweak to (hopefully) fix android chrome) gs --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 3b7f882..8e46431 100644 --- a/src/index.js +++ b/src/index.js @@ -247,9 +247,9 @@ var MaskedInput = React.createClass({ _keyPressEventProp() { var { userAgent } = navigator var isEdge = userAgent.match(/Edge/i) - var isNotAndroid = !userAgent.match(/[Aa]ndroid/i) + var isAndroid = userAgent.match(/Android/i) - return (isEdge || isNotAndroid) + return isEdge || isAndroid ? 'onKeyPress' : 'onBeforeInput' }, @@ -263,7 +263,7 @@ var MaskedInput = React.createClass({ }, render() { - var ref = (r => this.input = r) + var ref = r => this.input = r var maxLength = this.mask.pattern.length var value = this._getDisplayValue() var eventHandlers = this._getEventHandlers() From 201a75f04a1ac00f9bd0275c03ccf16eebe67399 Mon Sep 17 00:00:00 2001 From: Joe Love Date: Thu, 1 Dec 2016 15:16:52 +0000 Subject: [PATCH 5/6] just make it exclude android --- src/index.js | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 8e46431..28c302b 100644 --- a/src/index.js +++ b/src/index.js @@ -235,6 +235,12 @@ var MaskedInput = React.createClass({ return value === this.mask.emptyValue ? '' : value }, + _keyPressEventProp() { + return navigator.userAgent.match(/Android/i) + ? 'onBeforeInput' + : 'onKeyPress' + }, + _getEventHandlers() { return { onChange: this._onChange, @@ -244,16 +250,6 @@ var MaskedInput = React.createClass({ } }, - _keyPressEventProp() { - var { userAgent } = navigator - var isEdge = userAgent.match(/Edge/i) - var isAndroid = userAgent.match(/Android/i) - - return isEdge || isAndroid - ? 'onKeyPress' - : 'onBeforeInput' - }, - focus() { this.input.focus() }, @@ -267,13 +263,7 @@ var MaskedInput = React.createClass({ var maxLength = this.mask.pattern.length var value = this._getDisplayValue() var eventHandlers = this._getEventHandlers() - - var { - size = maxLength, - placeholder = this.mask.emptyValue - } = this.props - - + var { size = maxLength, placeholder = this.mask.emptyValue } = this.props var props = { ...this.props, ...eventHandlers, ref, maxLength, value, size, placeholder } return From cc90ea8a27295eaf3dbd56a0fb630f705305b748 Mon Sep 17 00:00:00 2001 From: Joe Love Date: Thu, 1 Dec 2016 15:42:02 +0000 Subject: [PATCH 6/6] rename method --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 28c302b..de95ca6 100644 --- a/src/index.js +++ b/src/index.js @@ -235,7 +235,7 @@ var MaskedInput = React.createClass({ return value === this.mask.emptyValue ? '' : value }, - _keyPressEventProp() { + _keyPressPropName() { return navigator.userAgent.match(/Android/i) ? 'onBeforeInput' : 'onKeyPress' @@ -246,7 +246,7 @@ var MaskedInput = React.createClass({ onChange: this._onChange, onKeyDown: this._onKeyDown, onPaste: this._onPaste, - [this._keyPressEventProp()]: this._onKeyPress + [this._keyPressPropName()]: this._onKeyPress } },