Doesn't work in Mobile Internet Explorer

[alpjor]

From what I've read Mobile Internet Explorer doesn't support the onKeyPress event, which is breaking this implementation. I've looked at the open pull request for android (https://github.com/insin/react-maskedinput/pull/47) and was able to make a working version that supports Android as well as browsers that support onKeyPress, by doing this:

    var event = {};
    if (!userAgent.match(/Android/i)) event.onKeyPress = this._onKeyPress;
    else event.onBeforeInput = this._onKeyPress;
    return (
      <input
        {...the_rest}
        ref={r => this.input = r }
        onChange={this._onChange}
        onKeyDown={this._onKeyDown}
        onPaste={this._onPaste}
        {...event}
        placeholder={this.props.placeholder}
        value={this._getDisplayValue()}
      />
    );

I wish there was some feature detection for onkeypress support or onbeforeinput support... any ideas anyone? This works great for Android, but I also found that Mobile Internet Explorer wasn't working. I tried all kinds of ways to bind the functions in this env, but it came down to this. Most browsers fire events in this order from a keyboard input (key down -> key press -> before input -> input -> key up). But Mobile IE does this: (key down -> key up -> input) NOTE: no keypress and the input is post key up and no before input. Anyway, I hope this helps someone, but I wasn't able to quite get it to work on Mobile IE. For now I fall back to unmasked inputs for Mobile IE, but I'd really like to fix this if possible.

[iamdustan]

Browsers really suck. :smile:

what version of React were you using? This problem is exacerbated by some churn in ReactDOM’s internal event handling where it is trying to fix and normalize some of this as well.

[alpjor]

React Version 15.0.1

[iamdustan]

would you be able to test your many variants with 15.2 by chance?

[alpjor]

@iamdustan I'll test tonight / tomorrow and get back to you. just upgraded to 15.2.1 but need to head out to dinner now.

[alpjor]

@iamdustan Okay, I got it to work better, but not work completely. If I use React 15.2.1 and I attach the onKeyPress event handler to the onInput event in Mobile IE then I can get an input that works with masks, but has this one remaining bug. The first character input is ignored, and the 2nd character input is input twice. Let me try to explain...

I have a credit card masked input with this mask: '1111 1111 1111 1111'

if I was to type "1234" into this input, the value would become "2234 ____ ____ " a single character input does not change the value at all: " ____ ____ __" the second character gets duplicated: "22 ____ ____ ____" and from then on the input works as expected: "2234 5678 9012 3456"

Any insight into how to fix the first character would be amazing.

[pedrosimao]

Same here