Skip to content

Commit

Permalink
Can't enter more than one character in Edge browser (#79)
Browse files Browse the repository at this point in the history
* add user agent sniffing for keypress event name (eww)

* remove semi-colons to match coding style

* fix bug with android chrome, bah

* small tweak to (hopefully) fix android chrome)
gs

* just make it exclude android

* rename method
  • Loading branch information
Joe Love authored and iamdustan committed Dec 1, 2016
1 parent ad934c3 commit fa0b07e
Showing 1 changed file with 23 additions and 13 deletions.
36 changes: 23 additions & 13 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,21 @@ var MaskedInput = React.createClass({
return value === this.mask.emptyValue ? '' : value
},

_keyPressPropName() {
return navigator.userAgent.match(/Android/i)
? 'onBeforeInput'
: 'onKeyPress'
},

_getEventHandlers() {
return {
onChange: this._onChange,
onKeyDown: this._onKeyDown,
onPaste: this._onPaste,
[this._keyPressPropName()]: this._onKeyPress
}
},

focus() {
this.input.focus()
},
Expand All @@ -244,19 +259,14 @@ var MaskedInput = React.createClass({
},

render() {
var {mask, formatCharacters, size, placeholder, placeholderChar, ...props} = this.props
var patternLength = this.mask.pattern.length
return <input {...props}
ref={r => 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 eventHandlers = this._getEventHandlers()
var { size = maxLength, placeholder = this.mask.emptyValue } = this.props
var props = { ...this.props, ...eventHandlers, ref, maxLength, value, size, placeholder }

return <input {...props} />
}
})

Expand Down

0 comments on commit fa0b07e

Please sign in to comment.