fix(cdk/drag-drop): reset user agent color on preview popover

After #28945 the preview is inserted into a `popover` element which has a user agent styling of `color: canvastext`. These changes reset it to `inherit` to match the old behavior. Fixes #28974.
angular · May 1, 2024 · a3b3211 · a3b3211
1 parent dde3793
commit a3b3211
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -2515,6 +2515,15 @@ describe('CdkDrag', () => {
       expect(previewContainer)
         .withContext('Expected preview container to be in the DOM')
         .toBeTruthy();
+      expect(previewContainer.style.color)
+        .withContext('Expected preview container to reset user agent color')
+        .toBe('inherit');
+      expect(previewContainer.style.margin)
+        .withContext('Expected preview container to reset user agent margin')
+        .toMatch(zeroPxRegex);
+      expect(previewContainer.style.padding)
+        .withContext('Expected preview container to reset user agent padding')
+        .toMatch(zeroPxRegex);
       expect(preview.textContent!.trim())
         .withContext('Expected preview content to match element')
         .toContain('One');

diff --git a/src/cdk/drag-drop/preview-ref.ts b/src/cdk/drag-drop/preview-ref.ts
@@ -121,6 +121,7 @@ export class PreviewRef {
       'pointer-events': 'none',
       'margin': '0',
       'padding': '0',
+      'color': 'inherit',
     });
     toggleNativeDragInteractions(wrapper, false);