Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Samoulou opened this issue Nov 13, 2018 · 4 comments
Closed

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

Samoulou opened this issue Nov 13, 2018 · 4 comments

Comments

@Samoulou
Copy link

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.
test

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
Copy link
Member

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
Copy link
Member

Closing this issue since it's working by design.

@jessycormier
Copy link

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants