2

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">{{searchText}}
   </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!

Sanoj_V
  • 2,936
  • 1
  • 12
  • 28
Always_a_learner
  • 4,585
  • 13
  • 63
  • 112

2 Answers2

3

(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

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
  • It worked fine. Thanks a lot. But I am not able to understand what do u meant by "and which tracking your current input caret position and keep pushing the caret to beginning of the input". And why issue only exist in Firefox and not chrome. – Always_a_learner Jul 18 '18 at 11:26
  • I will award bounty after 22 hours :) – Always_a_learner Jul 18 '18 at 11:28
  • Your are welcome!... which is mozilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1020973 – Chellappan வ Jul 18 '18 at 11:36
  • In your StackBlitz example, what does `triggers="keyup click"` do? – Drenai Jul 18 '18 at 15:48
  • i don't know exactly she is trying to call event tag attribute. i think since i copied that code it was there now i modified!. – Chellappan வ Jul 18 '18 at 16:15
  • 1
    @Dave It was part of my code which I implemented for ngx-bootstrap popover as I show popover on keyup and click for this input, chellappan added it because it was present in my code. – Always_a_learner Jul 19 '18 at 11:07
1

In .html:

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

In .ts:

getContent(innerText){
  this.content = innerText;
}
Sahil Ralkar
  • 2,331
  • 23
  • 25