Can't Enter more than one character in Edge Browser

[furrot]

I've been getting an issue with the latest update (3.30 over 3.2.4) in the Edge Browser.

For all masked inputs on my site I can now only enter one character.

Ex. for a mask like: "111-111-111"

Once I enter "2__--" the field stops accepting character entry. I can delete or replace the first character I enter but I can't seem to type anymore. Noticing it for A and 1 masked characters.

Thanks.

[gvincentlh]

Bump. This is happening for us as well.

[rafaelbusetti]

version 3.0.0 work!

http://insin.github.io/react-maskedinput/

[KittyGiraudel]

Hello. The bug still is present in 3.3.1 as far as I can tell. First character works, then no character gets printed anymore.

[joelove]

Bump. Has anyone found a solution? 🍰

[iamdustan]

Shucks. I’m willing to bet that the fix for Android broke MS Edge.

PRs accepted. Especially with tests.

eda4e4c

[joelove]

@hugogiraudel @gvincentlh @furrot I'll claim this one and take a shot.

@iamdustan I can only see 7 tests, is this right?

[furrot]

Sorry guys, been meaning to reply. The problem was definitely introduced between 3.2.3 and 3.3.0 as downgrading back to that version resolved the issue. I also noticed that the demo site was still using an older version of the component so I wasn't able to confirm the issue against it.

[joelove]

I've had a look at this and it's not an easy fix. The problem seems to be with Edge unfocusing the window object, which causes it to stop firing the beforeinput event. This is rather annoying because it looks like the keypress event, which does work in this situation, is becoming deprecated (which is presumably why android browser was ignoring it in the first place).

There are a few common hacks for the Edge bug, including inserting a hidden input into the DOM and calling .focus() on it, but I'm not keen on that as it may cause weird behaviour in some (decent) browsers.

I've got another few ideas left to try but I'm coming pretty close to feature detecting the beforeinput event on the browser and building the <input> props dynamically...

[joelove]

@iamdustan PR created here: #79

In the end, I had to just sniff for Android browser and use onBeforeInput in that instance only. That was the only way I could get all the major browsers to play ball.

[iamdustan]

Published as 3.3.2. Thanks @joelove

[rfviolato]

It's not working for me :/
Is the fix working for anyone with the 3.2.2 version?

Tested it on Edge 14.

[iamdustan]

ah bleh. I forgot to build.

[iamdustan]

publishing v3.3.3