fix(cdk/drag-drop): avoid conflicts with sticky table headers (#22864)

crisbeto · wagnermaciel · commit 2f90fc253d9c · 2021-07-09T05:56:40.000-07:00
The Material table with sticky headers sets its `position` as `!important` which ends up overriding the dragging styles. These changes rework the internals to use `setProperty` instead of `element.style.position` which allows us to set the `position` as `!important` as well. It also has the advantage that we can write the properties as dash case, instead of having to guess whether the vendor-prefixed properties are camel case or pascal case. Fixes #22781. (cherry picked from commit 6cfb549)
diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -2129,6 +2129,8 @@ describe('CdkDrag', () => {
 
       expect(item.parentNode).toBe(document.body, 'Expected element to be moved out into the body');
       expect(item.style.position).toBe('fixed', 'Expected element to be removed from layout');
+      expect(item.style.getPropertyPriority('position'))
+          .toBe('important', 'Expect element position to be !important');
       // Use a regex here since some browsers normalize 0 to 0px, but others don't.
       expect(item.style.top).toMatch(zeroPxRegex, 'Expected element to be removed from layout');
       expect(item.style.left).toBe('-999em', 'Expected element to be removed from layout');
diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts
@@ -88,6 +88,12 @@ export interface Point {
   y: number;
 }
 
+/** Inline styles to be set as `!important` while dragging. */
+const dragImportantProperties = new Set([
+  // Needs to be important, because some `mat-table` sets `position: sticky !important`. See #22781.
+  'position'
+]);
+
 /**
  * Possible places into which the preview of a drag item can be inserted.
  * - `global` - Preview will be inserted at the bottom of the `<body>`. The advantage is that
@@ -817,7 +823,7 @@ export class DragRef<T = any> {
       // We move the element out at the end of the body and we make it hidden, because keeping it in
       // place will throw off the consumer's `:last-child` selectors. We can't remove the element
       // from the DOM completely, because iOS will stop firing all subsequent events in the chain.
-      toggleVisibility(element, false);
+      toggleVisibility(element, false, dragImportantProperties);
       this._document.body.appendChild(parent.replaceChild(placeholder, element));
       this._getPreviewInsertionPoint(parent, shadowRoot).appendChild(this._preview);
       this.started.next({source: this}); // Emit before notifying the container.
@@ -914,7 +920,7 @@ export class DragRef<T = any> {
     // It's important that we maintain the position, because moving the element around in the DOM
     // can throw off `NgFor` which does smart diffing and re-creates elements only when necessary,
     // while moving the existing elements in all other cases.
-    toggleVisibility(this._rootElement, true);
+    toggleVisibility(this._rootElement, true, dragImportantProperties);
     this._anchor.parentNode!.replaceChild(this._rootElement, this._anchor);
 
     this._destroyPreview();
@@ -1030,14 +1036,14 @@ export class DragRef<T = any> {
     extendStyles(preview.style, {
       // It's important that we disable the pointer events on the preview, because
       // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
-      pointerEvents: 'none',
+      'pointer-events': 'none',
       // We have to reset the margin, because it can throw off positioning relative to the viewport.
-      margin: '0',
-      position: 'fixed',
-      top: '0',
-      left: '0',
-      zIndex: `${this._config.zIndex || 1000}`
-    });
+      'margin': '0',
+      'position': 'fixed',
+      'top': '0',
+      'left': '0',
+      'z-index': `${this._config.zIndex || 1000}`
+    }, dragImportantProperties);
 
     toggleNativeDragInteractions(preview, false);
     preview.classList.add('cdk-drag-preview');
diff --git a/src/cdk/drag-drop/drag-styling.ts b/src/cdk/drag-drop/drag-styling.ts
@@ -6,34 +6,32 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
-// Helper type that ignores `readonly` properties. This is used in
-// `extendStyles` to ignore the readonly properties on CSSStyleDeclaration
-// since we won't be touching those anyway.
-type Writeable<T> = { -readonly [P in keyof T]-?: T[P] };
-
 /**
  * Extended CSSStyleDeclaration that includes a couple of drag-related
  * properties that aren't in the built-in TS typings.
  */
-export interface DragCSSStyleDeclaration extends CSSStyleDeclaration {
-  webkitUserDrag: string;
-  MozUserSelect: string; // For some reason the Firefox property is in PascalCase.
+ export interface DragCSSStyleDeclaration extends CSSStyleDeclaration {
   msScrollSnapType: string;
   scrollSnapType: string;
-  msUserSelect: string;
 }
 
 /**
- * Shallow-extends a stylesheet object with another stylesheet object.
+ * Shallow-extends a stylesheet object with another stylesheet-like object.
+ * Note that the keys in `source` have to be dash-cased.
  * @docs-private
  */
-export function extendStyles(
-    dest: Writeable<CSSStyleDeclaration>,
-    source: Partial<DragCSSStyleDeclaration>) {
+export function extendStyles(dest: CSSStyleDeclaration,
+                             source: Record<string, string>,
+                             importantProperties?: Set<string>) {
   for (let key in source) {
     if (source.hasOwnProperty(key)) {
-      dest[key] = source[key]!;
+      const value = source[key];
+
+      if (value) {
+        dest.setProperty(key, value, importantProperties?.has(key) ? 'important' : '');
+      } else {
+        dest.removeProperty(key);
+      }
     }
   }
 
@@ -51,27 +49,32 @@ export function toggleNativeDragInteractions(element: HTMLElement, enable: boole
   const userSelect = enable ? '' : 'none';
 
   extendStyles(element.style, {
-    touchAction: enable ? '' : 'none',
-    webkitUserDrag: enable ? '' : 'none',
-    webkitTapHighlightColor: enable ? '' : 'transparent',
-    userSelect: userSelect,
-    msUserSelect: userSelect,
-    webkitUserSelect: userSelect,
-    MozUserSelect: userSelect
+    'touch-action': enable ? '' : 'none',
+    '-webkit-user-drag': enable ? '' : 'none',
+    '-webkit-tap-highlight-color': enable ? '' : 'transparent',
+    'user-select': userSelect,
+    '-ms-user-select': userSelect,
+    '-webkit-user-select': userSelect,
+    '-moz-user-select': userSelect
   });
 }
 
 /**
  * Toggles whether an element is visible while preserving its dimensions.
  * @param element Element whose visibility to toggle
  * @param enable Whether the element should be visible.
+ * @param importantProperties Properties to be set as `!important`.
  * @docs-private
  */
-export function toggleVisibility(element: HTMLElement, enable: boolean) {
-  const styles = element.style;
-  styles.position = enable ? '' : 'fixed';
-  styles.top = styles.opacity = enable ? '' : '0';
-  styles.left = enable ? '' : '-999em';
+export function toggleVisibility(element: HTMLElement,
+                                 enable: boolean,
+                                 importantProperties?: Set<string>) {
+  extendStyles(element.style, {
+    position: enable ? '' : 'fixed',
+    top: enable ? '' : '0',
+    opacity: enable ? '' : '0',
+    left: enable ? '' : '-999em'
+  }, importantProperties);
 }
 
 /**
