How to set the mouse pointer to the text where I clicked?

Question

Vue.js

When clicking on a textarea, the mouse cursor always moves to the last position in the text.
The question is why and how to get rid of it.
What I wrote:
1) I create a constructor function that creates a div field and inside a textarea field
2) The div serves to drag this field across the screen
3) I hang a mousedown event on the body and create a field with a textarea on click
4) I listen to the event and I determine where the click was and if this is a textarea field I put focus () and at the same time the cursor pointer is always on the last character of the entered text in this field.
Some code

$('body').on(admin.touchStartEvent, e => {
    e.stopPropagation();
    e.preventDefault();
    const cls = $(e.target).attr('class');
    console.log(cls);
    $((e.target).closest('.wrapper-commite')).css('z-index', ++admin.zIndexCommit);
    admin.extactTouchPoint(e);
    const {top, left} = $('.wrapp-img').offset();
    switch (cls){
      case 'wrapper-commite':
        return false;
      case 'commit-textarea medium-editor-element':
        $(e.target).on('click', ev => {
          ev.stopPropagation();
          console.log($(ev.target).text());
          $(ev.target).focus();
        });
        // $(e.target).mouseup();
        // $(e.target).focus();                 // Здесь мне нужно как то поставить указатель мыши на тот участок текста куда я хочу, а не в конец текста
        // $(e.target).click();
        // console.log($(e.target));
        break;
      case 'commit-number':
        admin.moveElement = $(e.target).closest('.wrapper-commite');
        admin.moving = true;
        break;
      case 'wrapp-img__img':
        console.log('pf');
        addCommit.createCommit();
        admin.moving = true;
        break;
      case 'remove-commite':
        $(admin.moveElement).mouseup();
        $(e.target).closest('.wrapper-commite').remove();
        admin.moveElement = '';
        admin.moving = false;
        return false;
      case 'close-commite':
        addCommit.closeElem($(e.target).closest('.wrapper-commite'));
        return false;
      default:
        console.log(cls);
    }
    admin.commitePosX = admin.touchX - left; // получаем координаты элемента
    admin.commitePosY = admin.touchY - top;  // относительно края окна
    $(admin.moveElement).css({top: admin.commitePosY, left: admin.commitePosX});
    admin.touchStartX = admin.touchX;
    admin.touchStartY = admin.touchY;
  });

  $('body').on(admin.touchMoveEvent, e => {
    if (!admin.moving){
      return false;
    }
    admin.extactTouchPoint(e);
    let newY = admin.commitePosY + (admin.touchY - admin.touchStartY);
    let newX = admin.commitePosX + (admin.touchX - admin.touchStartX);
    admin.moveElem(admin.moveElement, newX, newY, function (){admin.moving = true;});
  });

  $('body').on(admin.touchEndEvent, e => {
    e.stopPropagation();
    e.preventDefault();
    admin.moving = false;
    admin.moveElement = '';
  });

  admin.moveElem = (elem, x, y, callback) => {
    $(elem).css({top: y, left: x});
    callback();
  };

Maybe I'm doing something wrong in the first place?

Answer 1

According to the sources:
this is the default behavior of this library.

Answer 2

If I understood correctly:
3) I hang the mousedown event on the body and create a field with a textarea on click.
4) I listen to the event and determine where the click was and if this is a textarea field I put focus ()
You only need to create a textarea if event.target is NOT a textarea.
And if textarea, then do nothing.
And it turns out that if it is a textarea, then you force the focus to move.