cursor in the wrong place after mask changes

I have a phone mask 9999-9999. But, I want it to be 99999-9999 if the user inputs another number. It is working, but the input happens in the penultimate place instead of the last one. Here is an example:

input: 123456789

expected result: 12345-6789

actual result: 12345-6798

I tried .focus() but it only works when debugging. I think it is something related to it having time to execute since the code is stopped, but i'm not sure.

$(document).ready(function () {
  $('#TelContato').unmask();
  $('#TelContato').prop('placeholder', '9999-9999');
  $('#TelContato').mask('0000-0000');

  mask2 = false;
  var masks = ['0000-0000', '00000-0000'];
  $("#TelContato").keypress(function(e){
    var value = $('#TelContato').val().replace(/-/g, '').replace(/_/g, '');
    //changes mask
    if (value.length == 8 && mask2 == false) {
      $('#TelContato').unmask(masks[0]);
      $('#TelContato').mask(masks[1]);
      mask2 = true;
    }
  })
  //this is a keyup method because detects backspace/delete
  $("#TelContato").keyup(function (e) {
    var value = $('#TelContato').val().replace(/-/g,'').replace(/_/g, '');
    //changes mask back
    if (value.length <= 8 && mask2 == true) {
      $('#TelContato').unmask(masks[1]);
      $('#TelContato').mask(masks[0]);
      mask2 = false;
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>

<input asp-for="TelContato" class="form-control" maxlength="9" id="TelContato" />

Solution

It seems your problem is that you are unmasking, right before masking. You do not need to unmask, just updating mask (reconfiguring) should work.

$(document).ready(function() {
  const masks = ['0000-0000', '00000-0000'];
  const maskedElem = $('#TelContato');

  maskedElem.prop('placeholder', '9999-9999');
  maskedElem.mask(masks[0]);

  maskedElem.on('propertychange input', function(e) {
    var value = maskedElem.cleanVal();

    //changes mask
    maskedElem.mask(value.length >= 8 ? masks[1] : masks[0]);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>

<input asp-for="TelContato" class="form-control" maxlength="9" id="TelContato" />