Multiple p-editors bound to the same property, and rendered on the page at the same time, doesn't work properly.

[ngPrimeUser]

So in my project I have an object that is shared by both parent and child component. And both components have p-editors that is two-way bound to the same property of the object.
Code Below is html of parent component:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to PrimeNG Editor!
</h1>
</div>
<h2>{{title}} Component </h2>
<div style="position:fixed;left:30px;bottom:50px;z-index:999;">

<div class="row" *ngIf="showNotes" [ngClass]="'rationaleStyle'" >
<label>I am from the {{title}} Component</label>

<p-editor id="parentInput" [(ngModel)]="tag.text1">
<p-header>
<span class="ql-formats">
<select class="ql-font">
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="serif"></option>
<option value="monospace"></option>
</select>
<select class="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
</span>

<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>

<span class="ql-formats">
<select class="ql-align">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>

<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>

</p-header>
</p-editor>
</div>
<button class="btn btn-info" type="button" style="margin-top: 8px; border-radius:50%; width:50px;height:50px;" (click)="toggleNotes()" >
<span class="fa fa-sticky-note" aria-hidden="true"></span>
</button>
</div>

<p-accordion [multiple]="true">

<p-accordionTab header="Child Component" [selected]="true">
<app-childcomponent [tag]='tag' ></app-childcomponent>
</p-accordionTab>
<p-accordionTab header="Child2 Component">
<p>Coming soon!</p>
</p-accordionTab>

</p-accordion>

<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

Code below is the html of child component
<h4>
I am the {{title}} Component
</h4>

<p-editor [(ngModel)]="tag.text2">
<p-header>
<span class="ql-formats">
<select class="ql-font">
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="serif"></option>
<option value="monospace"></option>
</select>
<select class="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
</span>

<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>

<span class="ql-formats">
<select class="ql-align">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>

<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>

</p-header>
</p-editor >

<p-editor [(ngModel)]="tag.text1" id="childInput">
<p-header>
<span class="ql-formats">
<select class="ql-font">
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="serif"></option>
<option value="monospace"></option>
</select>
<select class="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
</span>

<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>

<span class="ql-formats">
<select class="ql-align">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>

<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>

</p-header>
</p-editor>


<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
Code below is the parent-component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Parent';
tag: any = {
'text1': 'I am first property!',
'text2': 'I am Second Property!'
};
showNotes = false;
constructor() {
}
toggleNotes(): void {
this.showNotes = !this.showNotes;
}
}
<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

Code below is childcomponent.ts
import { Component, OnInit, Input } from '@angular/core';

@Component({
selector: 'app-childcomponent',
templateUrl: './childcomponent.component.html',
styleUrls: ['./childcomponent.component.css']
})
export class ChildcomponentComponent implements OnInit {
@Input() tag: any;
title = 'Child';
constructor() { }

ngOnInit() {
}

}
<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
Now the issue:
Both of the p-editors shows the bound property properly. And when I type in any one of the editors, the input is bound to the property correctly.
But when I press enter to go the next line, or tab off, or press space to give space between words, the cursor always goes to the beginning of the paragraph.
Is there any solution to this problem?
I am using primeNG:5.0.2,quil:1.3.4, angular 5.0.0