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

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 binding as well as content editable further I need div rather than input:

   <span><div id="contenteditablediv" contenteditable="true" (keyup)="triggerUserSearch()" type="text" [popover]="searchTemplate"
        placement="bottom"  triggers="keyup click" [textContent]="searchText" (input)="searchText=$event.target.textContent" [outsideClick]="true"
        containerClass="searchUsersPopup" placeholder="To" class="recipientInput searchTerm"></div>
    </span>

But when I add below line of code:

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

It does not work correctly in firefox browser. It types backward in firefox when you place cursor at end.

I took reference from below Plunker which is also not working correctly in firefox.
Also happens same for SO Answer and Plunker

I am not sure what (input)="searchText=$event.target.textContent" code exactly does. But it bind searchText and div value. So it is required but it is also causing issue. Please explain meaning of above code if possible. Thanks!

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