text-mask: Caret position incorrect on android device

Hi @msafi -

I was able to replicate this issue on my Google Pixel. I saw this issue https://bugs.chromium.org/p/chromium/issues/detail?id=32865 and it seems this issue is related. I added a setTimeout to line 213 in createTaskMaskInputElement.js

To confirm, I changed: element.setSelectionRange(selectionPosition, selectionPosition, strNone) to setTimeout(() => element.setSelectionRange(selectionPosition, selectionPosition, strNone), 0);

If you would like, I can make a PR with this change, but I wanted to reach out first.

Thanks for your time.

–Adam

I’m using React. And problem with cursor was solved by providing type="tel":

<input type="tel" value={this.state.value} />

The problem is that now makes inputs async and adds a whole host of different issues.

I’ve made the test on the demo site. I tried to write the number (123) 456-7890. The screenshots go as attachments.

@msafi it is not the same bug. And it is only on android chrome v55. It is happening as well on zenfone 2. I will debug to check what is going on

Tnx for the reply

I don’t use text-mask, but I found this issue while googling for selectionStart on Chrome/Android. Just wanted to pass along what I figured out in my own project: This behavior is due to virtual keyboard suggestions. The workaround in my own project looks like this:

let {selectionStart: start, selectionEnd: end} = e.target
if (e.nativeEvent.isComposing) {
  // Virtual keyboard sets selectionStart to the beginning of the word
  // for which it's providing suggestions, even though there's no
  // obvious selection on the screen (except the word is underlined).
  // For our purposes, assume there is no selection, and the cursor is
  // positioned at end.
  start = end
}

Hope that helps!

Hello I had that problem with ionic 2, had an ion-input type tel and gave me that error. To solve what I did was to change the type tel by text and it worked very well.

I’m thinking that maybe we should just add the setTimeout solution, even though it is less than ideal. For example, if you bash at the keyboard fast, the cursor will not maintain accurate position. You can try that on the demo page that @fernandobandeira posted. But if it works for real-world situations (which do not involve bashing mindlessly at the keyboard), I think that’s good enough.

I’ll play with it on the weekend and post here.

CC @browniefed

Alright folks, published new core and new components to npm that include this fix.

This was fixed with the setTimeout on this library

Used a timeout of 10ms instead of plain 0, afaik it didn’t add any issues, this was fixed around 3/4 months ago, maybe increasing the ms on settimeout may help a little.

IDK just giving some info as it may help somehow, it seems possible, here’s a demo it seems to work even when typing fast.