cdkDroplist :: Dragging from list to other may reverse placeholder position

[etiennetalbot]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/angular/nabbkobrxrn?file=src%2Fapp%2Fcdk-drag-drop-enter-predicate-example.ts

Steps to reproduce:

1. Make sure only 1 item is in the receiving list
2. Drag a new item on top of it, without releasing it (hover over receiving list)

Expected Behavior

The existing item in the list should move away from the cursor to allow the new item to be dropped at the intended index in the receiving list.

Actual Behavior

Some of the times (not always and it seems a bit random), the existing item will move to the spot where it shouldn't, trolling the user like it wants to prevent them from dropping the item at the intended position.

Visual example

See gif below, item number 6 works as expected, but item number 4 doesn't and prevents me to drop it in the spot that I want.

Environment

• Angular: 8.2.1
• CDK/Material: 8.2.3
• Browser(s): Chrome, Firefox (didn't test any other)
• Operating System (e.g. Windows, macOS, Ubuntu): Mac OS X

[fredpeaks]

I have the same problem with angular 9.0.0 and CDK 9.0.0. It seems to be happening when the dragged element enters into the drop list near the vertical middle of the item that is inside.
I also noticed that the bug is more easy to obtain when the target list elements are higher than the origin ones.
Here is slightly modified version of the stackblitz that allows to see the bug more easily because of differents sizes of elements and a bar in the middle of target elements : https://stackblitz.com/edit/angular-ni3d1q

[crisbeto]

Still seems to happen in master, but is partly resolved by #19633. We may have to apply a similar approach when an item enters a new list.