From 411889c919951a74a85b97f8edff7379c46180f7 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Wed, 27 Nov 2019 09:20:19 +0100
Subject: [PATCH] fix(overlays): fix overlay content node selector to be more
 accurate

---
 packages/overlays/src/OverlayMixin.js      | 18 ++++++++++++++----
 packages/overlays/stories/index.stories.js |  6 ------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/overlays/src/OverlayMixin.js b/packages/overlays/src/OverlayMixin.js
index f639abe11..d11deeb85 100644
--- a/packages/overlays/src/OverlayMixin.js
+++ b/packages/overlays/src/OverlayMixin.js
@@ -148,11 +148,21 @@ export const OverlayMixin = dedupeMixin(
         return Array.from(this.children).find(child => child.slot === 'invoker');
       }
 
-      // FIXME: This should be refactored to
-      // Array.from(this.children).find(child => child.slot === 'content')
-      // When this issue is fixed https://github.com/ing-bank/lion/issues/382
       get _overlayContentNode() {
-        const contentNode = this.querySelector('[slot=content]');
+        let contentNode;
+
+        // FIXME: This should shadow outlet in between the host and the content slot, is a problem
+        // Should simply be Array.from(this.children).find(child => child.slot === 'content')
+        // Issue: https://github.com/ing-bank/lion/issues/382
+        const shadowOutlet = Array.from(this.children).find(
+          child => child.slot === '_overlay-shadow-outlet',
+        );
+        if (shadowOutlet) {
+          contentNode = Array.from(shadowOutlet.children).find(child => child.slot === 'content');
+        } else {
+          contentNode = Array.from(this.children).find(child => child.slot === 'content');
+        }
+
         if (contentNode) {
           this._cachedOverlayContentNode = contentNode;
         }
diff --git a/packages/overlays/stories/index.stories.js b/packages/overlays/stories/index.stories.js
index 1c7b2cde9..eefceeb2d 100644
--- a/packages/overlays/stories/index.stories.js
+++ b/packages/overlays/stories/index.stories.js
@@ -84,12 +84,6 @@ const overlayDemoStyle = css`
     padding: 10px;
     border: 1px solid black;
   }
-
-  @media (max-width: 480px) {
-    .overlay {
-      display: none;
-    }
-  }
 `;
 
 customElements.define(