Input focuses on the input end

[nunob87]

When you focus on the start of the input after the first click on a key, it focuses on the input end

thanks

[PNKBizz]

Same problem

[akselhenriksen79]

Having the same issue here.

Type in something in the input field, then mark some text anywhere else than the end, start typing, and the cursor / marker jumps to the end of the field. Giving a rather poor user experience.

Edit: Just noticed this issue was raised 2 years ago...still no fix for this?

[probil]

Hi @sjobidoo
It's not easy to fix. If you have an idea how to do it - create PR.
I will be glad to review.

If you are not satisfied with the library to just pick another one.

[AvinashChavanN]

You can handle this issue with calling below method on input event

onInput(e) {
        const position = e.target.selectionStart;
          this.$nextTick(() => {
            e.target.setSelectionRange(position, position);
          });
}

[probil]

Thanks @AvinashChavanN
Will check it out

[clemsontiger]

@AvinashChavanN @probil this "fix" didn't work for me. It's still jumping focus to the end. i.e. if the field has a filled out 10 digit phone number, i then highlight and deleted the first three digits, then type a digit, it still jumps to the end. I debugged and the onInput runs twice, first time it seems to maintain the position but 2nd run it jumps to the end.

[probil]

@clemsontiger thanks for your feedback! I hope I will find some time to check it myself

[clemsontiger]

@probil , sorry but any further update? Unfortunately I'm going to have to look to use a different mask library for vue as this open issue is causing too many issues.

[probil]

@clemsontiger I understand. I hope you'll find a better solution. 🐈 👋
Unfortunately I don't have enough time to fix and investigate every issue.

[clemsontiger]

@sjobidoo , @nunob87 , @PNKBizz did either of you find a working workaround for this issue? The fix provided by @AvinashChavanN never worked for me.

[akselhenriksen79]

@clemsontiger we abandoned this due to this problem.

I used cleavejs instead

[clemsontiger]

@sjobidoo okay thanks.

[zcuric]

This is still a problem.

[subtronic]

@AvinashChavanN workaround will work if If the handler will only handle only user-generated events (isTrusted property), this will prevent process action generated by v-mask reaction:

onInput(event) {
  if (event.isTrusted) {
    const position = event.target.selectionStart;
    this.$nextTick(() => {
      event.target.setSelectionRange(position, position);
    });
  }
}

But this solution will give rise to a small heap of small bugs.

[probil]

Thanks @subtronic
I'll try that out and include in the next release if it works without issues

[hd-luisaguilar]

has someone found a fix for this issue?