cdkDropListConnectedTo allowing invalid drop

[skeize]

Bug, feature request, or proposal:

I've got a scenario with 3 cdkDropLists, each with a different set of valid cdkDropListConnectedTo targets. If list 1 is connected to list 2, and list 2 is connected to list 3, this is where the bug occurs. I'm not able to more an item directly from list 1 to 3, but if I first drag it over list 2 (without dropping), I'm then able to drop it in list 3 (which is invalid since it wasn't specified in list 1's cdkDropListConnectedTo array.

What is the expected behavior?

Items being dragged from a source list, should only be dropable in the list(s) they have specified in their cdkDropListConnectedTo array, regardless of whether they hovered over another list in the process.

What is the current behavior?

I'm able to drop an item in an incorrect list.

What are the steps to reproduce?

<li class="swim-lane">
    <h4>LIST 1</h4>
    <div cdkDropList #list1="cdkDropList" [cdkDropListData]="list1Items$ | async"
      [cdkDropListConnectedTo]="[list2]" 
      (cdkDropListDropped)="actionDropped($event)">
      <div class="drag-box" *ngFor="let item of (list1Items$ | async)"
        cdkDrag>
                <span>content</span>
      </div>
    </div>
  </li>

  <li class="swim-lane">
    <h4>LIST 2</h4>
    <div cdkDropList #list2="cdkDropList" [cdkDropListData]="list2Items$ | async"
      [cdkDropListConnectedTo]="[list1]"
      (cdkDropListDropped)="actionDropped($event)">
      <div class="drag-box" *ngFor="let item of (list2Items$ | async)"
        cdkDrag>
                <span>content</span>
      </div>
    </div>
  </li>

  <li class="swim-lane">
    <h4>LIST 3</h4>
    <div cdkDropList #list3="cdkDropList" [cdkDropListData]="list3Items$ | async"
      [cdkDropListConnectedTo]="[list2]" 
      (cdkDropListDropped)="itemDropped($event)">
      <div class="drag-box" *ngFor="let item of (list3Items$ | async)"
        cdkDrag>
        <span>content</span>
      </div>
    </div>
  </li>

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

Invalid drops are causing unnecessary validation errors and an incorrect UX.

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

Angular 7.2.4
Material/CDK 7.3.2
Windows 10
TypeScript 3.1.1
Chrome

Is there anything else we should know?

[angular-automatic-lock-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.}