fix(menu): menu no longer disappears with multiple split panes (#28370)

Issue number: resolves #18683, resolves #15538, resolves #22341 ---------   ## What is the current behavior?  Menus in a split pane are hidden when a second split pane is mounted/made visible. This is because the `onSplitPaneChanged` callback does not take into account whether the it is a child of the split pane that emitted `ionSplitPaneVisible`. When split pane 2 is shown, that causes the menu is split pane 1 to hide. When split pane 1 is shown, the menu inside of it _is_ shown. However, since split pane 2 is then hidden that component also emits `ionSplitPaneVisible`, causing the menu inside of split pane 1 to hide. ## What is the new behavior?  - Menus are only hidden when its parent split pane changes visibility ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information  Dev build: `7.5.1-dev.11697568647.1ac87d08` --------- Co-authored-by: Amanda Johnston <[email protected]>
ionic-team · Oct 19, 2023 · 5a30082 · 5a30082
1 parent 068d003
commit 5a30082
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 0 deletions.
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
@@ -289,6 +289,20 @@ export class Menu implements ComponentInterface, MenuI {
 
   @Listen('ionSplitPaneVisible', { target: 'body' })
   onSplitPaneChanged(ev: CustomEvent) {
+    const { target } = ev;
+    const closestSplitPane = this.el.closest('ion-split-pane');
+
+    /**
+     * Menu listens on the body for "ionSplitPaneVisible".
+     * However, this means the callback will run any time
+     * a SplitPane changes visibility. As a result, we only want
+     * Menu's visibility state to update if its parent SplitPane
+     * changes visibility.
+     */
+    if (target !== closestSplitPane) {
+      return;
+    }
+
     this.isPaneVisible = ev.detail.isPane(this.el);
     this.updateState();
   }

diff --git a/core/src/components/split-pane/test/multiple/index.html b/core/src/components/split-pane/test/multiple/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Split Pane - Multiple</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+  <body>
+    <ion-split-pane id="pane-one" content-id="content-one">
+      <ion-menu id="pane-one-menu-one" side="start" content-id="content-one">
+        <div class="ion-padding">Split One Menu One</div>
+      </ion-menu>
+
+      <div class="ion-page" id="content-one">
+        <ion-content class="ion-padding">
+          Page Content One
+          <button id="show-pane-two" onclick="showSecondPane()">Show Second Pane</button>
+        </ion-content>
+      </div>
+
+      <ion-menu id="pane-one-menu-two" side="end" content-id="content-one">
+        <div class="ion-padding">Split One Menu Two</div>
+      </ion-menu>
+    </ion-split-pane>
+
+    <ion-split-pane id="pane-two" content-id="content-two" disabled="true" class="ion-page-hidden">
+      <ion-menu id="pane-two-menu-one" side="start" content-id="content-two">
+        <div class="ion-padding">Split Two Menu One</div>
+      </ion-menu>
+
+      <div class="ion-page" id="content-two">
+        <ion-content class="ion-padding">
+          Page Content Two
+          <button id="show-pane-one" onclick="showFirstPane()">Show First Pane</button>
+        </ion-content>
+      </div>
+
+      <ion-menu id="pane-two-menu-two" side="end" content-id="content-two">
+        <div class="ion-padding">Split Two Menu Two</div>
+      </ion-menu>
+    </ion-split-pane>
+
+    <script>
+      const splitPaneOne = document.querySelector('ion-split-pane#pane-one');
+      const splitPaneTwo = document.querySelector('ion-split-pane#pane-two');
+      const showSecondPane = () => {
+        splitPaneOne.disabled = true;
+        splitPaneOne.classList.add('ion-page-hidden');
+
+        splitPaneTwo.disabled = false;
+        splitPaneTwo.classList.remove('ion-page-hidden');
+      };
+      const showFirstPane = () => {
+        splitPaneOne.disabled = false;
+        splitPaneOne.classList.remove('ion-page-hidden');
+
+        splitPaneTwo.disabled = true;
+        splitPaneTwo.classList.add('ion-page-hidden');
+      };
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/split-pane/test/multiple/split-pane.e2e.ts b/core/src/components/split-pane/test/multiple/split-pane.e2e.ts
@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('split-pane: multiple'), () => {
+    test('using multiple split panes should not hide a menu in another split pane', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/18683',
+      });
+
+      await page.setViewportSize(Viewports.large);
+      await page.goto(`/src/components/split-pane/test/multiple`, config);
+
+      const paneOneMenuOne = page.locator('ion-menu#pane-one-menu-one');
+      const paneOneMenuTwo = page.locator('ion-menu#pane-one-menu-two');
+
+      const paneTwoMenuOne = page.locator('ion-menu#pane-two-menu-one');
+      const paneTwoMenuTwo = page.locator('ion-menu#pane-two-menu-two');
+
+      const showPaneOne = page.locator('button#show-pane-one');
+      const showPaneTwo = page.locator('button#show-pane-two');
+
+      await expect(paneOneMenuOne).toBeVisible();
+      await expect(paneOneMenuTwo).toBeVisible();
+
+      await showPaneTwo.click();
+
+      await expect(paneTwoMenuOne).toBeVisible();
+      await expect(paneTwoMenuTwo).toBeVisible();
+
+      await showPaneOne.click();
+
+      await expect(paneOneMenuOne).toBeVisible();
+      await expect(paneOneMenuTwo).toBeVisible();
+    });
+  });
+});