Contenteditable DIV is not working properly with angular two way binding in firefox

Question

I have made my div contenteditable div and it also opens ngx-popover on keyup and populate search results into popover on basis of searchText so I need two way

Answer 1

In .html:

<div (blur)="getContent($event.target.innerHTML)" contenteditable [innerHTML]="content"></div>

In .ts:

getContent(innerText){
  this.content = innerText;
}

Answer 2

(input)

Input event is fired when something in an input or textarea element has changes and it's also fired when something has changed in elements with contenteditable attribute.

Since contenteditable elements doesn't have change event input is used to check the change event and Mozilla has some bug regarding the wrong caret position.

(input)="searchText=$event.target.textContent"

If you remove this line from your div it will work properly in Mozilla!

And you dont need this to get (input)="searchText=$event.target.textContent" the div value you can simply use ViewChild decorator to get the value of div

@ViewChild('ref') ref:ElementRef; 
 triggerUserSearch(){
       console.log(this.ref.nativeElement.innerHTML);
  }

Check the example here: https://stackblitz.com/edit/input-event