Mask doesnt not work on Android Chrome

[nic]

Look that:

Any idea of how to solve that?

Demo env:

package.json

  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-maskedinput": "^3.3.4"
  }

App.js

var React = require('react')
var MaskedInput = require('react-maskedinput')

var CreditCardDetails = React.createClass({
  state: {
    card: '',
    expiry: '',
    ccv: ''
  },

  _onChange(e) {
    var stateChange = {}
    stateChange[e.target.name] = e.target.value
    this.setState(stateChange)
  },

  render() {
    return <div className="CreditCardDetails">
      <label>
        Card Number:{' '}
        <MaskedInput mask="1111 1111 1111 1111" name="card" size="20" onChange={this._onChange}/>
      </label>
      <label>
        Expiry Date:{' '}
        <MaskedInput mask="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
      </label>
      <label>
        CCV:{' '}
        <MaskedInput mask="111" name="ccv" onChange={this._onChange}/>
      </label>
    </div>
  }
})
export default CreditCardDetails

[jtanner]

I'm also seeing this issue with an app at work (same version of react-maskedinput). Backspace also doesn't work.

[chezedude]

I ran into a similar problem on Android Chrome. Fixed it with a slightly hacky solution changing the _updateMaskSelection function.

_updateMaskSelection() {
  this.mask.selection = getSelection(this.input);

  setTimeout(function() {
    this.input.setSelectionRange(this.mask.selection.start, this.mask.selection.end);
  }.bind(this), 1);
},

I had to wrap it in setTimeout or it doesn't work.

[jrodl3r]

@chezedude sorry, that doesn't fix the issue on my end. would really love to get this working... =\

you can use the Chrome debugger to connect an android device and then (through the debugger) you can edit the text-box perfectly fine, and you can shift over to the device and it works like a charm as well. Right up until you clear out the value and try to start typing again from scratch on the device... Then it doesn't work again, and no errors on the console...

[GulinSS]

@insin, I confirm bug on various Android devices and also, @chezedude, I confirm https://github.com/insin/react-maskedinput/issues/86#issuecomment-286292388 is working well for me.

[bholzer]

Yeah, this is getting me as well.

I can't seem to find any good information on the onBeforeInput event, can someone explain why this is necessary: https://github.com/insin/react-maskedinput/blob/master/src/index.js#L230

[jtanner]

My team switched to https://github.com/text-mask/text-mask and it has been working well for us on mobile and desktop.

[raphaelpc]

Hello! Anyone know if there is still no solution for this problem?

[pedrosimao]

I am facing the same issue. It works fine everywhere, but not on Android. If I set type="tel" it works fine, but I actually need the user to enter letter and not only numbers...