contenteditable is not working with cdkDrag

问题

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.

回答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.

来源：https://stackoverflow.com/questions/60943166/contenteditable-is-not-working-with-cdkdrag