fix(drag-drop): preview not being rendered inside fullscreen element (#15066)

Fixes the drag preview not being rendered when the user goes into fullscreen mode.

Fixes #15033.

Author: crisbeto

src/cdk/drag-drop/BUILD.bazel

@@ -23,6 +23,7 @@ ng_test_library(
   name = "drag-drop_test_sources",
   srcs = glob(["**/*.spec.ts"]),
   deps = [
+    "@angular//packages/common",
     "@rxjs",
     "//src/cdk/testing",
     "//src/cdk/bidi",

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

@@ -12,6 +12,7 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 import {TestBed, ComponentFixture, fakeAsync, flush, tick} from '@angular/core/testing';
+import {DOCUMENT} from '@angular/common';
 import {DragDropModule} from '../drag-drop-module';
 import {
   createMouseEvent,
@@ -1320,6 +1321,41 @@ describe('CdkDrag', () => {
       expect(preview.parentNode).toBeFalsy('Expected preview to be removed from the DOM');
     }));
 
+    it('should create the preview inside the fullscreen element when in fullscreen mode',
+      fakeAsync(() => {
+        // Provide a limited stub of the document since we can't trigger fullscreen
+        // mode in unit tests and there are some issues with doing it in e2e tests.
+        const fakeDocument = {
+          body: document.body,
+          fullscreenElement: document.createElement('div'),
+          ELEMENT_NODE: Node.ELEMENT_NODE,
+          querySelectorAll: function() {
+            return document.querySelectorAll.apply(document, arguments);
+          },
+          addEventListener: function() {
+            document.addEventListener.apply(document, arguments);
+          },
+          removeEventListener: function() {
+            document.addEventListener.apply(document, arguments);
+          }
+        };
+        const fixture = createComponent(DraggableInDropZone, [{
+          provide: DOCUMENT,
+          useFactory: () => fakeDocument
+        }]);
+        fixture.detectChanges();
+        const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+
+        document.body.appendChild(fakeDocument.fullscreenElement);
+        startDraggingViaMouse(fixture, item);
+        flush();
+
+        const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement;
+
+        expect(preview.parentNode).toBe(fakeDocument.fullscreenElement);
+        fakeDocument.fullscreenElement.parentNode!.removeChild(fakeDocument.fullscreenElement);
+      }));
+
     it('should be able to constrain the preview position', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.componentInstance.boundarySelector = '.cdk-drop-list';

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

@@ -613,7 +613,7 @@ export class DragRef<T = any> {
       // from the DOM completely, because iOS will stop firing all subsequent events in the chain.
       element.style.display = 'none';
       this._document.body.appendChild(element.parentNode!.replaceChild(placeholder, element));
-      this._document.body.appendChild(preview);
+      getPreviewInsertionPoint(this._document).appendChild(preview);
       this._dropContainer.start();
     }
   }
@@ -1027,3 +1027,15 @@ function removeElement(element: HTMLElement | null) {
 function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent {
   return event.type.startsWith('touch');
 }
+
+/** Gets the element into which the drag preview should be inserted. */
+function getPreviewInsertionPoint(documentRef: any): HTMLElement {
+  // We can't use the body if the user is in fullscreen mode,
+  // because the preview will render under the fullscreen element.
+  // TODO(crisbeto): dedupe this with the `FullscreenOverlayContainer` eventually.
+  return documentRef.fullscreenElement ||
+         documentRef.webkitFullscreenElement ||
+         documentRef.mozFullScreenElement ||
+         documentRef.msFullscreenElement ||
+         documentRef.body;
+}