contenteditable is not working with cdkDrag

user_6138913 0
Viewed 749

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.

angular-cdk-drag-drop contenteditable
3 Answers
user_2588000

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.

user_52149110 
<div class="custom-editable" contenteditable="true" #contentNotes (mousedown)="$event.stopPropagation()"></div>

its working and working good result

user_48822020
Related