Incorrectly positioned cursor in MS Edge browser

[nastakhov]

Hello

Thanks for great control, guys!

Issue is that when you place cursor in input with mask in MS Edge browser it is placed in the beginning of input. In other browsers it is correctly positioned after last filled in character.

I've tried to fix this by myself but without success.

I've created plunkr. Try to put cursor in first input in Edge and you'll see it is before "4" character.

[ghost]

I found the same problem on Google Chrome 45.0 of an Android device (Galaxy Tab). The cursor fulfill the first character but stay at this position even when we insert new ones. The result is that the inserted word/number is inserted reversed (except for the first letter). Detected since 1.4.7 version.

[callmeaponte]

Changing the type attribute on the input element from "text" to "tel" seems to fix the issue.

<input type="tel">

I've tested this out in MS Edge, and in Google Chrome v45.0 on both Galaxy S6 and Galaxy Note 3.

[lukepfeiffer10]

Instead of changing the attribute have you tried removing the input event using the eventsToHandle property in the options?

From the readme:

When customizing eventsToHandle or clearOnBlur, the value you supply will replace the default. To customize eventsToHandle, be sure to replace the entire array.

[Tim91084]

looks like at the time the IE edge focus event is fired the browser hasn't set the cursor yet (we get a cursor position of 0). One possible solution to this is to timeout all the events in the eventsToHandle array. For example:

                      function bindEventListeners() {
                            if (eventsBound) {
                                return;
                            }

                            var handler = function() {
                              var args = arguments;
                              var context = this;
                              $timeout(function(){
                                eventHandler.apply(context, args);
                              }, 0, false);
                            }

                            iElement.bind('blur', blurHandler);
                            iElement.bind('mousedown mouseup', mouseDownUpHandler);
                            iElement.bind(linkOptions.eventsToHandle.join(' '), handler);
                            iElement.bind('paste', onPasteHandler);
                            eventsBound = true;
                        }

[nastakhov]

None of suggested fixes resolved issue for me.

[Mokto]

Hi guys,

Any update on this ?

[Tim91084]

I'm pretty sure the code snippet above fixes it, I'll have to test again and after that I'll submit a PR. If you get a chance, you want to test out the fix also?

[mattiLeBlanc]

Guys,

Interesting reading up on this masking issue that we only discovered on certain android devices (samsung in general). Adding type="tel" did work for me. Would this be a recommended fix for now? Since I am using it on a phone number I have no objections setting the type

[lukepfeiffer10]

@mattiLeBlanc Another thing that you can do is remove the input event in the eventsToHandle array for android devices. I have done that and that works without changing the input to type="tel"

Something like this:

    var isAndroid = /(android)/i.test(navigator.userAgent);
    if (isAndroid) {
           var index = uiMaskConfig.eventsToHandle.indexOf('input');
           uiMaskConfig.eventsToHandle.splice(index, 1);
    }

[mattiLeBlanc]

I am happy to use type="tel" because i am validating a phone number. No reason to fork the repo and change the event, right?

[lukepfeiffer10]

No need to fork the repo at all to do the above fix. Probably should have given you a little more context though sorry about that.

For example, if you include the above code snippet in your main angular app.run function you can modify the uiMaskConfig object by passing it as a DI parameter.

app.run(['uiMaskConfig', function(uiMaskConfig) {
    //insert code snippet here
});

This would be much easier if the uiMaskConfig object was exposed as a provider and then could be modified in the app.config sections, but it isn't and that functionality might be an enhancement later on.

[mattiLeBlanc]

Ah, I see. Thanks for that. I have applied your fix and it works like a charm!

[wanderleypanosso]

@lukepfeiffer10 I'm facing the same issue on Webkit running on Android devices. I tried tu use the code snippet you sugested above, however, when I try to delete the digits, the cursor gets stucked on the first character of the mask it encouters. e.g:

with this mask: (99)99999999?9

with the cursor at the end of the input: (11)123412345|

when trying to delete digits it works great until it encounter the char of the mask. So it gets stucked as below: (11)|_________

If I manually change the cursor position I can keep deleting until it finds a new mask char.

I've tried it with many different masks and it keep presenting the same behavior.

Any Ideas on what might be going on?

Thanks :)

[lukepfeiffer10]

@wanderleypanosso First thing I would check is make sure you are using the latest version. I wasn't able to recreate the issue using Chrome on a desktop but that doesn't necessarily mean your issue isn't valid I just don't have an easy way to test on an Android device currently.

[stalbot123]

Still getting the error - by the way, the bug can be replicated on the demo page as well. This is what I've tried: Installed Newest Version <input type="tel" modified bindEventListeners() as suggested above.

To replicate the error on the demo page:

1. Select the Mask for telephone (999) 999-9999
2. Enter a phone number in
3. Highlight your recent entry (chrome desktop)
4. Start typing a new area code (843) - notice that sometimes because of the bug you will get 438.

Does anyone have any other suggestions?

[travist]

I think this solves this problem. I included a description of what caused the bug in the pull request information.

https://github.com/angular-ui/ui-mask/pull/200