@ionic/core 7.4.3-dev.11696355997.1d94070b → 7.4.3-dev.11696514206.1c9669de

package/components/index4.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { p as printIonWarning } from './index6.js';
 import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button.js';
 import { c as componentOnReady } from './helpers.js';
 import { b as getIonMode } from './ionic-global.js';
@@ -155,13 +156,22 @@ const createMenuController = () => {
     if (menu === 'start' || menu === 'end') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      const menuRef = find((m) => m.side === menu && !m.disabled);
-      if (menuRef) {
-        return menuRef;
+      const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
+      if (menuRefs.length >= 1) {
+        if (menuRefs.length > 1) {
+          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
+        }
+        return menuRefs[0].el;
       }
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
-      return find((m) => m.side === menu);
+      const sideMenuRefs = menus.filter((m) => m.side === menu);
+      if (sideMenuRefs.length >= 1) {
+        if (sideMenuRefs.length > 1) {
+          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
+        }
+        return sideMenuRefs[0].el;
+      }
     }
     else if (menu != null) {
       // the menuId was not left or right
@@ -203,9 +213,6 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
-      if (!menu.disabled) {
-        _setActiveMenu(menu);
-      }
       menus.push(menu);
     }
   };
@@ -215,13 +222,6 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
-  const _setActiveMenu = (menu) => {
-    // if this menu should be enabled
-    // then find all the other menus on this same side
-    // and automatically disable other same side menus
-    const side = menu.side;
-    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
-  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -293,7 +293,6 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
-    _setActiveMenu,
   };
 };
 const menuController = /*@__PURE__*/ createMenuController();

package/components/ion-menu.js

@@ -3,7 +3,6 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
-import { d as doc } from './index5.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
 import { o as isEndSide, i as inheritAriaAttributes, p as assert, m as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
@@ -549,17 +548,6 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
-    if (doc === null || doc === void 0 ? void 0 : doc.contains(this.el)) {
-      /**
-       * Only set the active menu if the menu element is
-       * present in the DOM. Otherwise if it was destructively
-       * re-hydrated (through Angular Universal), then ignore
-       * setting the removed node as the active menu.
-       */
-      if (!this.disabled) {
-        menuController._setActiveMenu(this);
-      }
-    }
     assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {

package/components/ion-segment.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
-import { r as raf } from './helpers.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
@@ -87,7 +86,29 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
      * Used by `ion-segment-button` to determine if the button should be checked.
      */
     this.ionSelect.emit({ value });
-    this.scrollActiveButtonIntoView();
+    if (this.scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        /**
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
+         */
+        activeButton.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
+        });
+      }
+    }
   }
   disabledChanged() {
     this.gestureChanged();
@@ -109,13 +130,6 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
   }
   async componentDidLoad() {
     this.setCheckedClasses();
-    /**
-     * We need to wait for the buttons to all be rendered
-     * before we can scroll.
-     */
-    raf(() => {
-      this.scrollActiveButtonIntoView();
-    });
     this.gesture = (await import('./index3.js')).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -244,32 +258,6 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
-  scrollActiveButtonIntoView() {
-    const { scrollable, value } = this;
-    if (scrollable) {
-      const buttons = this.getButtons();
-      const activeButton = buttons.find((button) => button.value === value);
-      if (activeButton !== undefined) {
-        /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
-         */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
-        });
-      }
-    }
-  }
   setNextIndex(detail, isEnd = false) {
     const rtl = isRTL(this.el);
     const activated = this.activated;

package/dist/cjs/{index-5121bb90.js → index-7c1ae0f0.js}

@@ -3,6 +3,7 @@
  */
 'use strict';
 
+const index = require('./index-cc7dfb7c.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
@@ -157,13 +158,22 @@ const createMenuController = () => {
     if (menu === 'start' || menu === 'end') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      const menuRef = find((m) => m.side === menu && !m.disabled);
-      if (menuRef) {
-        return menuRef;
+      const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
+      if (menuRefs.length >= 1) {
+        if (menuRefs.length > 1) {
+          index.printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
+        }
+        return menuRefs[0].el;
       }
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
-      return find((m) => m.side === menu);
+      const sideMenuRefs = menus.filter((m) => m.side === menu);
+      if (sideMenuRefs.length >= 1) {
+        if (sideMenuRefs.length > 1) {
+          index.printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
+        }
+        return sideMenuRefs[0].el;
+      }
     }
     else if (menu != null) {
       // the menuId was not left or right
@@ -205,9 +215,6 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
-      if (!menu.disabled) {
-        _setActiveMenu(menu);
-      }
       menus.push(menu);
     }
   };
@@ -217,13 +224,6 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
-  const _setActiveMenu = (menu) => {
-    // if this menu should be enabled
-    // then find all the other menus on this same side
-    // and automatically disable other same side menus
-    const side = menu.side;
-    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
-  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -295,7 +295,6 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
-    _setActiveMenu,
   };
 };
 const menuController = /*@__PURE__*/ createMenuController();

package/dist/cjs/index.cjs.js

@@ -14,14 +14,14 @@ const index$1 = require('./index-0ee995e4.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const config = require('./config-d5882735.js');
-const index$2 = require('./index-5121bb90.js');
+const index$2 = require('./index-7c1ae0f0.js');
 const overlays = require('./overlays-d3a13e61.js');
 require('./index-306a7476.js');
 require('./index-6f887430.js');
 require('./gesture-controller-b46721be.js');
+require('./index-cc7dfb7c.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./framework-delegate-c0873a6f.js');
-require('./index-cc7dfb7c.js');
 
 const IonicSlides = (opts) => {
   const { swiper, extendParams } = opts;

package/dist/cjs/ion-menu_3.cjs.entry.js

@@ -7,18 +7,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f887430.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
-const index$2 = require('./index-306a7476.js');
 const gestureController = require('./gesture-controller-b46721be.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const index$1 = require('./index-5121bb90.js');
+const index$1 = require('./index-7c1ae0f0.js');
 const overlays = require('./overlays-d3a13e61.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
 const theme = require('./theme-fbc56b3b.js');
-const index$3 = require('./index-d8d1fc0b.js');
+const index$2 = require('./index-d8d1fc0b.js');
+require('./index-cc7dfb7c.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./animation-2bb33618.js');
+require('./index-306a7476.js');
 require('./framework-delegate-c0873a6f.js');
-require('./index-cc7dfb7c.js');
 
 const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
 
@@ -553,17 +553,6 @@ const Menu = class {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
-    if (index$2.doc === null || index$2.doc === void 0 ? void 0 : index$2.doc.contains(this.el)) {
-      /**
-       * Only set the active menu if the menu element is
-       * present in the DOM. Otherwise if it was destructively
-       * re-hydrated (through Angular Universal), then ignore
-       * setting the removed node as the active menu.
-       */
-      if (!this.disabled) {
-        index$1.menuController._setActiveMenu(this);
-      }
-    }
     helpers.assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {
@@ -647,7 +636,7 @@ const MenuButton = class {
   render() {
     const { color, disabled, inheritedAttributes } = this;
     const mode = ionicGlobal.getIonMode(this);
-    const menuIcon = ionicGlobal.config.get('menuIcon', mode === 'ios' ? index$3.menuOutline : index$3.menuSharp);
+    const menuIcon = ionicGlobal.config.get('menuIcon', mode === 'ios' ? index$2.menuOutline : index$2.menuSharp);
     const hidden = this.autoHide && !this.visible;
     const attrs = {
       type: this.type,

package/dist/cjs/ion-segment_2.cjs.entry.js

@@ -6,10 +6,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f887430.js');
-const helpers = require('./helpers-ea4ccbcb.js');
 const dir = require('./dir-f1e0ca26.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
+const helpers = require('./helpers-ea4ccbcb.js');
 
 const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
 
@@ -89,7 +89,29 @@ const Segment = class {
      * Used by `ion-segment-button` to determine if the button should be checked.
      */
     this.ionSelect.emit({ value });
-    this.scrollActiveButtonIntoView();
+    if (this.scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        /**
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
+         */
+        activeButton.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
+        });
+      }
+    }
   }
   disabledChanged() {
     this.gestureChanged();
@@ -111,13 +133,6 @@ const Segment = class {
   }
   async componentDidLoad() {
     this.setCheckedClasses();
-    /**
-     * We need to wait for the buttons to all be rendered
-     * before we can scroll.
-     */
-    helpers.raf(() => {
-      this.scrollActiveButtonIntoView();
-    });
     this.gesture = (await Promise.resolve().then(function () { return require('./index-0ee995e4.js'); })).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -246,32 +261,6 @@ const Segment = class {
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
-  scrollActiveButtonIntoView() {
-    const { scrollable, value } = this;
-    if (scrollable) {
-      const buttons = this.getButtons();
-      const activeButton = buttons.find((button) => button.value === value);
-      if (activeButton !== undefined) {
-        /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
-         */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
-        });
-      }
-    }
-  }
   setNextIndex(detail, isEnd = false) {
     const rtl = dir.isRTL(this.el);
     const activated = this.activated;

package/dist/collection/components/menu/menu.js

@@ -3,7 +3,6 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
-import { doc } from "../../utils/browser/index";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
@@ -540,17 +539,6 @@ export class Menu {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
-    if (doc === null || doc === void 0 ? void 0 : doc.contains(this.el)) {
-      /**
-       * Only set the active menu if the menu element is
-       * present in the DOM. Otherwise if it was destructively
-       * re-hydrated (through Angular Universal), then ignore
-       * setting the removed node as the active menu.
-       */
-      if (!this.disabled) {
-        menuController._setActiveMenu(this);
-      }
-    }
     assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {

package/dist/collection/components/menu/test/multiple/menu.e2e.js

@@ -0,0 +1,56 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('menu: multiple'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/menu/test/multiple`, config);
+    });
+    test('should present each menu on the same side individually', async ({ page }) => {
+      const primaryMenu = page.locator('ion-menu#primary-menu');
+      const secondaryMenu = page.locator('ion-menu#secondary-menu');
+      await primaryMenu.evaluate((el) => el.open());
+      await expect(primaryMenu).toBeVisible();
+      await primaryMenu.evaluate((el) => el.close());
+      await expect(primaryMenu).toBeHidden();
+      await secondaryMenu.evaluate((el) => el.open());
+      await expect(secondaryMenu).toBeVisible();
+      await secondaryMenu.evaluate((el) => el.close());
+      await expect(secondaryMenu).toBeHidden();
+    });
+    test('should close first menu when showing another menu on same side', async ({ page }) => {
+      const primaryMenu = page.locator('ion-menu#primary-menu');
+      const secondaryMenu = page.locator('ion-menu#secondary-menu');
+      await primaryMenu.evaluate((el) => el.open());
+      await expect(primaryMenu).toBeVisible();
+      await secondaryMenu.evaluate((el) => el.open());
+      await expect(primaryMenu).toBeHidden();
+      await expect(secondaryMenu).toBeVisible();
+    });
+    test('passing side to the menuController when multiple menus have that side should result in a warning', async ({ page, }) => {
+      const logs = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+      await page.evaluate(() => window.menuController.open('start'));
+      expect(logs.length).toBe(1);
+    });
+    test('passing side to the menuController when multiple disabled menus have that side should result in a warning', async ({ page, }) => {
+      const logs = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+      await page.evaluate(() => window.menuController.open('end'));
+      expect(logs.length).toBe(1);
+    });
+  });
+});

package/dist/collection/components/segment/segment.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, writeTask } from "@stencil/core";
-import { raf } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -79,7 +78,29 @@ export class Segment {
      * Used by `ion-segment-button` to determine if the button should be checked.
      */
     this.ionSelect.emit({ value });
-    this.scrollActiveButtonIntoView();
+    if (this.scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        /**
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
+         */
+        activeButton.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
+        });
+      }
+    }
   }
   disabledChanged() {
     this.gestureChanged();
@@ -101,13 +122,6 @@ export class Segment {
   }
   async componentDidLoad() {
     this.setCheckedClasses();
-    /**
-     * We need to wait for the buttons to all be rendered
-     * before we can scroll.
-     */
-    raf(() => {
-      this.scrollActiveButtonIntoView();
-    });
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -236,32 +250,6 @@ export class Segment {
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
-  scrollActiveButtonIntoView() {
-    const { scrollable, value } = this;
-    if (scrollable) {
-      const buttons = this.getButtons();
-      const activeButton = buttons.find((button) => button.value === value);
-      if (activeButton !== undefined) {
-        /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
-         */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
-        });
-      }
-    }
-  }
   setNextIndex(detail, isEnd = false) {
     const rtl = isRTL(this.el);
     const activated = this.activated;

package/dist/collection/components/segment/test/scrollable/segment.e2e.js

@@ -4,7 +4,7 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('segment: scrollable (rendering)'), () => {
+  test.describe(title('segment: scrollable'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(`
         <ion-segment scrollable="true" value="2">
@@ -42,55 +42,3 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('segment: scrollable (functionality)'), () => {
-    test('should scroll active button into view when value is already set', async ({ page }) => {
-      await page.setContent(`
-          <ion-segment scrollable="true" value="8">
-            <ion-segment-button value="1">
-              <ion-label>First</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="2">
-              <ion-label>Second</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="3">
-              <ion-label>Third</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="4">
-              <ion-label>Fourth</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="5">
-              <ion-label>Fifth</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="6">
-              <ion-label>Sixth</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="7">
-              <ion-label>Seventh</ion-label>
-            </ion-segment-button>
-            <ion-segment-button id="activeButton" value="8">
-              <ion-label>Eighth</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="9">
-              <ion-label>Ninth</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        `, config);
-      const activeButton = page.locator('#activeButton');
-      // wait for segment to scroll, which is done in a raf
-      await page.waitForTimeout(500);
-      /**
-       * We can't use toBeVisible() here because it returns true
-       * even if the element is outside the viewport.
-       */
-      const box = await activeButton.boundingBox();
-      const viewport = page.viewportSize();
-      let isInViewport = false;
-      if (box && viewport) {
-        isInViewport =
-          box.x >= 0 && box.y >= 0 && box.x + box.width <= viewport.width && box.y + box.height <= viewport.height;
-      }
-      expect(isInViewport).toBe(true);
-    });
-  });
-});