fix(drag-drop): error when item enters from the top and last has an intermediate child (#19361)

In #19116 some logic was added so that we use `insertBefore` when an item is entering from the top, rather than `appendChild`. The problem is that an error will be thrown if the first item in the drop list isn't a sibling of the first draggable element.

Fixes #19359.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -4352,6 +4352,29 @@ describe('CdkDrag', () => {
       dispatchMouseEvent(document, 'mouseup');
     }));
 
+    it('should not throw when entering from the top with an intermediate sibling present',
+      fakeAsync(() => {
+        const fixture = createComponent(ConnectedDropZonesWithIntermediateSibling);
+
+        // Make sure there's only one item in the first list.
+        fixture.componentInstance.todo = ['things'];
+        fixture.detectChanges();
+
+        const groups = fixture.componentInstance.groupedDragItems;
+        const dropZones = fixture.componentInstance.dropInstances.map(d => d.element.nativeElement);
+        const item = groups[0][0];
+
+        // Add some initial padding as the target drop zone
+        dropZones[1].style.paddingTop = '10px';
+        const targetRect = dropZones[1].getBoundingClientRect();
+
+        expect(() => {
+          dragElementViaMouse(fixture, item.element.nativeElement, targetRect.left, targetRect.top);
+          flush();
+          fixture.detectChanges();
+        }).not.toThrow();
+      }));
+
     it('should assign a default id on each drop zone', fakeAsync(() => {
       const fixture = createComponent(ConnectedDropZones);
       fixture.detectChanges();
@@ -6072,6 +6095,46 @@ class DraggableInHorizontalFlexDropZoneWithMatchSizePreview {
 }
 
 
+@Component({
+  styles: CONNECTED_DROP_ZONES_STYLES,
+  template: `
+    <div
+      cdkDropList
+      #todoZone="cdkDropList"
+      [cdkDropListData]="todo"
+      [cdkDropListConnectedTo]="[doneZone]"
+      (cdkDropListDropped)="droppedSpy($event)"
+      (cdkDropListEntered)="enteredSpy($event)">
+      <div
+        [cdkDragData]="item"
+        (cdkDragEntered)="itemEnteredSpy($event)"
+        *ngFor="let item of todo"
+        cdkDrag>{{item}}</div>
+    </div>
+
+    <div
+      cdkDropList
+      #doneZone="cdkDropList"
+      [cdkDropListData]="done"
+      [cdkDropListConnectedTo]="[todoZone]"
+      (cdkDropListDropped)="droppedSpy($event)"
+      (cdkDropListEntered)="enteredSpy($event)">
+
+      <div>Hello there</div>
+      <div>
+        <div
+          [cdkDragData]="item"
+          (cdkDragEntered)="itemEnteredSpy($event)"
+          *ngFor="let item of done"
+          cdkDrag>{{item}}</div>
+      </div>
+    </div>
+  `
+})
+class ConnectedDropZonesWithIntermediateSibling extends ConnectedDropZones {
+}
+
+
 /**
  * Drags an element to a position on the page using the mouse.
  * @param fixture Fixture on which to run change detection.

src/cdk/drag-drop/drop-list-ref.ts

@@ -301,15 +301,13 @@ export class DropListRef<T = any> {
       const element = newPositionReference.getRootElement();
       element.parentElement!.insertBefore(placeholder, element);
       activeDraggables.splice(newIndex, 0, item);
+    } else if (this._shouldEnterAsFirstChild(pointerX, pointerY)) {
+      const reference = activeDraggables[0].getRootElement();
+      reference.parentNode!.insertBefore(placeholder, reference);
+      activeDraggables.unshift(item);
     } else {
-      const element = coerceElement(this.element);
-      if (this._shouldEnterAsFirstChild(pointerX, pointerY)) {
-        element.insertBefore(placeholder, activeDraggables[0].getRootElement());
-        activeDraggables.unshift(item);
-      } else {
-        element.appendChild(placeholder);
-        activeDraggables.push(item);
-      }
+      coerceElement(this.element).appendChild(placeholder);
+      activeDraggables.push(item);
     }
 
     // The transform needs to be cleared so it doesn't throw off the measurements.