Components: Drag and Drop - Can't select text in an input without moving all item

[Samoulou]

Bug, feature request, or proposal:

I'm using the new cdkDrag in a mat-list. It seems it can't handle text selection in an input.

What is the expected behavior?

I should be able to select the text in my input without my mat-list-item dragging

What is the current behavior?

When I try to select text in my input all my component is dragging away

What are the steps to reproduce?

<mat-list cdkDropList fxFlex role="list" (cdkDropListDropped)="drop($event)">
  <mat-list-item (mouseover)="listitem=i" (mouseleave)="listitem=null;" *ngFor="let productionInformation of productionInformationItems.controls; let i=index" [formGroupName]="i" fxLayout="column" cdkDrag>
    <mat-form-field fxFlex *ngIf="i > sizeBeforeSave-1 || isEdition == i || !isLabel; else notShow;">
      <input matInput formControlName="value" />
    </mat-form-field>
    <ng-template #notShow>
      <mat-label fxFlex>{{productionInformation.get('value').value}}</mat-label>
    </ng-template>
    <button mat-icon-button *ngIf="listitem == i && i < sizeBeforeSave && isEdition!=i && isLabel" (click)="editProductionInformationValue(i)">
      <mat-icon>edit</mat-icon>
    </button>
    <button mat-icon-button *ngIf="listitem == i && !noDelete" (click)="deleteProductionInformationValue(i)">
      <mat-icon>delete</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

What is the use-case or motivation for changing an existing behavior?

Correcting a behaviour that is not working well

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/cdk": "7.0.1", "@angular/material": "7.0.1", "@angular/core": "7.0.1", "typescript": "3.1.3"

[crisbeto]

The problem with allowing text selection is that it can clash with the drag and drop. You could use a drag handle so text selection isn't disabled on the entire element.

[crisbeto]

Closing this issue since it's working by design.

[jessycormier]

The feature's you are attempting can be accomplished with the available API for Drag and Drop.

Specifically in the examples provided in the examples https://material.angular.io/cdk/drag-drop/overview#disable-dragging You can see it's possible to disable dragging.

I propose for your requirements simply add [cdkDragDisabled]="true" when you're editing the field which would allow your selection.

Another solution if this isn't what you're looking for would be to add drag handles which would resolve your issue of text selection as well as letting the end user know that this is something that can be dragged.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}