Not working correctly inside CDK drag and drop

[mebibou]

When used within a cdkDrag component, it becomes impossible to edit the content without doing a right-click first.

There is a solution explained here: https://stackoverflow.com/a/64084061/517193

Maybe we could have an option that will automatically add the mousedown event and prevent the bubble up? or add it by default?

[mebibou]

For now, this is what worked for me:

<angular-editor (blur)="fixEditor($event)"></angular-editor>

...


public fixEditor($event) {
    const content = $event.target as HTMLDivElement;
    content.onmousedown = event => event.stopPropagation();
  }

[kolkov]

Hello @mebibou!

Thanks for the detailed report and workaround!

The Issue:
CDK Drag & Drop captures mousedown events, preventing contenteditable from receiving focus.

Your Workaround (Working):

public fixEditor($event) {
  const content = $event.target as HTMLDivElement;
  content.onmousedown = event => event.stopPropagation();
}

Better Solution - Built-in Support

Option 1: Add to component (v3.1.0):

// Add input to enable CDK compatibility
@Input() cdkDragCompatible = false;

ngAfterViewInit() {
  if (this.cdkDragCompatible && this.textArea) {
    this.textArea.nativeElement.addEventListener('mousedown', 
      (e) => e.stopPropagation()
    );
  }
}

Usage:

<div cdkDrag>
  <angular-editor [cdkDragCompatible]="true" [(ngModel)]="content"></angular-editor>
</div>

Option 2: Always prevent propagation (no breaking change):
Since stopping mousedown propagation on contenteditable is harmless outside CDK context.

Recommended Implementation

Add to angular-editor.component.ts:

ngAfterViewInit() {
  // ... existing code
  
  // Fix for CDK Drag & Drop compatibility
  if (this.textArea) {
    this.textArea.nativeElement.addEventListener('mousedown', 
      (event: MouseEvent) => {
        // Prevent CDK drag from capturing mousedown
        event.stopPropagation();
      }, 
      { passive: true }
    );
  }
}

This should be safe for all use cases.

Tracking

Labels:

• bug - Doesn't work correctly with CDK
• enhancement - Add CDK compatibility
• good first issue - Clear implementation
• help wanted - PR welcome

Target: v3.0.3 or v3.1.0

Impact:

• Fixes CDK Drag & Drop
• No side effects for non-CDK users
• Small code addition

Would be happy to review a PR implementing Option 2 (always prevent propagation).

Thanks for the excellent bug report with working solution!