Input focuses on the input end

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

thanks

Same problem

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?

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.

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);
          });
}

Thanks @AvinashChavanN Will check it out

@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.

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

@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.

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

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

@clemsontiger we abandoned this due to this problem.

I used cleavejs instead

@sjobidoo okay thanks.

This is still a problem.

@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.

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

has someone found a fix for this issue?