6

I am trying to use a div element tag and make it behave as a textarea with css.

#textarea {
    -moz-appearance: textfield-multiline;   ------------ card.component.css
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="textarea" contenteditable>I look like a textarea</div>  ---- card.component.html

But i am using cdkDrag on my card from parent component(Category component)

<div cdkDrag class="col-sm-12 px-2 pb-2">
  <app-card (cardEvent)="deleteCard($event)" [card]="card">

I found this link contenteditable not working properly with cdkDrag on google-chrome explaining the same, but couldn't get any answer.

Amulya Vasa
  • 63
  • 4

3 Answers3

8

CDK's DragRef listens to the mousedown event, so you can add a (mousedown)="$event.stopPropagation()" handler to your contenteditable div to prevent that event from bubbling up to the element that has the cdkDrag directive on it.

edit: Here's the call site in the CDK DragRef code: https://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-ref.ts#L775

Christopher R
  • 305
  • 3
  • 8
2
<div class="custom-editable" contenteditable="true" #contentNotes (mousedown)="$event.stopPropagation()"></div>

its working and working good result

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Haresh Rafaliya
  • 21
  • 2
1

The problem is caused by left click mouse events being absorbed by the CdkDrag directive. If you use tab to navigate to the element or right click on it, editing is possible which confirms this.

A possible solution is to set the cdkDragDisabled property of the CdkDrag directive to true like

<div cdkDrag [cdkDragDisabled]="some condition" ...

for times of the editing.

Just add the same value to [cdkDragDisabled] and [contentEditable] and you're good.

tom
  • 2,137
  • 2
  • 27
  • 51