Обновление значения innerHTML изменяет позицию курсора на начальную точку

Question

HTML:

<h1 contenteditable="true" [innerHTML]="myData['name']" (click) = "myFunc($event)"></h1>

TS:

myData = {name: "test"};

myFunc ($event) {
     changedVal = $event.target.innerHTML;
     myData['name'] = changedVal; //this will update the innerHTML of h1
}

При редактировании значения редактируемого элемента h1 каждый раз, когда курсор перемещается к начальной точке