From 2d07d8216af908b181c5e7e438e79a049bb6d8c2 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartin.dev>
Date: Mon, 12 Apr 2021 09:22:24 -0400
Subject: [PATCH] fix(content): change main child element to div when parent is
 menu (#23160)

* fix(content): change main child element to div when parent is menu

* fix(content): change main child element to div when parent is menu, popover, or modal

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* fix(content): make closest element detector unreactive

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 core/src/components/content/content.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 5f417daaf8..7eedb90361 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -27,6 +27,7 @@ export class Content implements ComponentInterface {
   private cTop = -1;
   private cBottom = -1;
   private scrollEl!: HTMLElement;
+  private isMainContent = true;
 
   // Detail is used in a hot loop in the scroll event, by allocating it here
   // V8 will be able to inline any read/write to it since it's a monomorphic class.
@@ -105,6 +106,10 @@ export class Content implements ComponentInterface {
    */
   @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
 
+  connectedCallback() {
+    this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+  }
+
   disconnectedCallback() {
     this.onScrollEnd();
   }
@@ -304,9 +309,10 @@ export class Content implements ComponentInterface {
   }
 
   render() {
-    const { scrollX, scrollY } = this;
+    const { isMainContent, scrollX, scrollY } = this;
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
+    const TagType = isMainContent ? 'main' : 'div' as any;
     const transitionShadow = (mode === 'ios' && config.getBoolean('experimentalTransitionShadow', true));
 
     this.resize();
@@ -324,19 +330,19 @@ export class Content implements ComponentInterface {
         }}
       >
         <div id="background-content" part="background"></div>
-        <main
+        <TagType
           class={{
             'inner-scroll': true,
             'scroll-x': scrollX,
             'scroll-y': scrollY,
             'overscroll': (scrollX || scrollY) && forceOverscroll
           }}
-          ref={el => this.scrollEl = el!}
-          onScroll={(this.scrollEvents) ? ev => this.onScroll(ev) : undefined}
+          ref={(el: HTMLElement) => this.scrollEl = el!}
+          onScroll={(this.scrollEvents) ? (ev: UIEvent) => this.onScroll(ev) : undefined}
           part="scroll"
         >
           <slot></slot>
-        </main>
+        </TagType>
 
         {transitionShadow ? (
           <div class="transition-effect">