search

insin / react-maskedinput

Masked <input/> React component
http://insin.github.io/react-maskedinput/
MIT License
730 stars 197 forks source link

Can't Enter more than one character in Edge Browser #75

Closed furrot closed 7 years ago

furrot commented 7 years ago

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 commented 7 years ago

Bump. This is happening for us as well.

rafaelbusetti commented 7 years ago

version 3.0.0 work!

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

KittyGiraudel commented 7 years ago

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 commented 7 years ago

Bump. Has anyone found a solution? 🍰

iamdustan commented 7 years ago

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

PRs accepted. Especially with tests.

https://github.com/insin/react-maskedinput/commit/eda4e4c7474d250c52b356063c1b569c355b122c

joelove commented 7 years ago

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

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

furrot commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@iamdustan PR created here: https://github.com/insin/react-maskedinput/pull/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 commented 7 years ago

Published as 3.3.2. Thanks @joelove

rfviolato commented 7 years ago

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

Tested it on Edge 14.

iamdustan commented 7 years ago

ah bleh. I forgot to build.

iamdustan commented 7 years ago

publishing v3.3.3