0

I simply trying to make a div editable. It was working like a charm on chrome before adding Drag-n-drop to my component with cdkDrag directive. However, it works fine with FireFox and Edge and it does show the input cursor.

 <app-note-item  
      *ngFor=" let note of notes"
      cdkDrag
      [note] = "note"
      class="note-item"
      [cdkDragFreeDragPosition] = "note.position"
  ></app-note-item>

App-note-item :


<div contenteditable="true"   class="note-content">

      {{note.content}}
  </div>

Any help would be grateful.

Alaeddin BENSALAH
  • 1
  • 4
  • I am facing the same issue. But I think `contenteditable` is also not fully functioning on FireFox with `cdkDrag`, if you want to double click to select a word, or select a part of paragraph, it is not working. Please update if you have any progress~ – Wayne Wei Aug 12 '19 at 09:58
  • Hi Wayne, yes unfortunately its not stable with other browsers too, so as an alternative solution i just used the html textarea – Alaeddin BENSALAH Aug 13 '19 at 14:53
  • See [this answer](https://stackoverflow.com/a/61128879/5214911) for a solution. – tom Apr 09 '20 at 21:05

0 Answers0