Components: Empty cdkList container "lose drop area" if its position changes.

[ajeiie120120]

Reproduction

Hi, i've found some weird issue using a simple empty div as "drop container" in order to show users a box where to drop contents into.
It seems that if this box, for whatever reason, changes its visibility, position, etc... it loses the "drop capability".

Here's the stackblitz used to reproduce the bug:

https://stackblitz.com/edit/angular-hqxu2m

Steps to reproduce:

1. Test the example dragging a "done" element into the "to do" list (a "exited" console log should appear each time you enter the "to do" container while dragging an element)
2. In the template file, uncomment the second line (as suggested by the comment) and retry the step 1, now it's impossibile to make the console log"exited" again

Expected Behavior

The drop zone of the container should be always active

Actual Behavior

The drop zone of the container is lost whenever the container is moved around or it's visibility changes

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Chrome: 78.0.3904.97
• Operating System : Windows

[mushyak]

I experience the same issue with Angular 8.2.11, Material: 8.2.3.

[ajeiie120120]

Any news?

[ajeiie120120]

Up

[ajeiie120120]

Any help?

[james-logan]

Up. Also experiencing this.

Potentially a related issue here: https://github.com/angular/components/issues/18638

[ekselys]

Issue still present with the latest dependencies, the stackblitz example has been updated.

It's quite critical, is there any workaround?

[matthewerwin]

The drop area "client rect" is cached for performance according to the comments in the code which would result in problems with animations (which the code tries to account for) though there are many reasons content could shift (such as the removal of the drag element during drag), use of *ngIf="dragging" on a drop zone you wish to show only when dragging is available, or [hidden].

Caching the clientrect to me seems unreliable since even mouse movement can be a trigger for content position changes (e.g. highlighting a dropzone or other CSS transform/class on mouse-over).

I have some separate scenarios I set up of drop zone being "lost" or not found in the first place even without changes to the position: https://github.com/angular/components/issues/19085

[crisbeto]

Falls in the same category as https://github.com/angular/components/issues/14703 where the logic breaks down if the size changes after we've cached it.

[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._}