merge release-8.8.7

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
+
+
+### Bug Fixes
+
+* **alert:** switch to vertical layout when two buttons wrap ([#31130](https://github.com/ionic-team/ionic-framework/issues/31130)) ([07675f9](https://github.com/ionic-team/ionic-framework/commit/07675f9ed976867827301808dc7d9e857f8a33ae))
+* **input:** scroll assist no longer fires duplicate click events ([#31124](https://github.com/ionic-team/ionic-framework/issues/31124)) ([4670996](https://github.com/ionic-team/ionic-framework/commit/4670996a41e406cc831f0982923d3bde7572eb88)), closes [#30412](https://github.com/ionic-team/ionic-framework/issues/30412)
+
+
+
+
+
 ## [8.8.6](https://github.com/ionic-team/ionic-framework/compare/v8.8.5...v8.8.6) (2026-05-06)
 
 

core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
+
+
+### Bug Fixes
+
+* **alert:** switch to vertical layout when two buttons wrap ([#31130](https://github.com/ionic-team/ionic-framework/issues/31130)) ([07675f9](https://github.com/ionic-team/ionic-framework/commit/07675f9ed976867827301808dc7d9e857f8a33ae))
+* **input:** scroll assist no longer fires duplicate click events ([#31124](https://github.com/ionic-team/ionic-framework/issues/31124)) ([4670996](https://github.com/ionic-team/ionic-framework/commit/4670996a41e406cc831f0982923d3bde7572eb88)), closes [#30412](https://github.com/ionic-team/ionic-framework/issues/30412)
+
+
+
+
+
 ## [8.8.6](https://github.com/ionic-team/ionic-framework/compare/v8.8.5...v8.8.6) (2026-05-06)
 
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.58.2
+FROM mcr.microsoft.com/playwright:v1.59.1
 
 # Set the working directory
 WORKDIR /ionic

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.6",
+  "version": "8.8.7",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -39,14 +39,14 @@
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.1",
+    "@axe-core/playwright": "^4.11.3",
     "@capacitor/core": "^8.0.0",
     "@capacitor/haptics": "^8.0.0",
     "@capacitor/keyboard": "^8.0.0",
     "@capacitor/status-bar": "^8.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.59.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
@@ -67,7 +67,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "playwright-core": "^1.58.2",
+    "playwright-core": "^1.59.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/scripts/docker.mjs

@@ -1,7 +1,7 @@
+import chalk from 'chalk';
 import { execa } from 'execa';
 import * as fs from 'fs';
 import { resolve } from 'path';
-import chalk from 'chalk';
 
 const removeNewline = (string) => {
   return string.replace(/(\r\n|\n|\r)/gm, "");
@@ -29,11 +29,12 @@ const pwd = resolve('./');
  * --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
  * --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
  */
-const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
+const extraArgs = process.argv.slice(2);
+const args = ['run', '--rm', '--init', '-e', `DISPLAY=${display}`, ...(displayVolume ? ['-v', displayVolume] : []), '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm', 'run', 'test.e2e', '--', ...extraArgs];
 
 // Set the CI env variable so Playwright uses the CI config
 if (process.env.CI) {
-  args.splice(1, 0, '-e CI=true');
+  args.splice(1, 0, '-e', 'CI=true');
 /**
  * Otherwise, we should let the session be interactive locally. This will
  * not work on CI which is why we do not apply it there.
@@ -53,7 +54,7 @@ if (requestHeaded && !hasHeadedConfigFiles) {
   console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
 }
 
-const res = await execa('docker', args, { shell: true, stdio: 'inherit' });
+const res = await execa('docker', args, { stdio: 'inherit' });
 
 // If underlying scripts failed this whole process should fail too
 process.exit(res.exitCode);

core/src/components/alert/alert.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
+import { Component, Element, Event, Host, Listen, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
 import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
@@ -56,8 +56,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private processedInputs: AlertInput[] = [];
   private processedButtons: AlertButton[] = [];
   private wrapperEl?: HTMLElement;
+  private buttonGroupEl?: HTMLElement;
+  private buttonGroupResizeObserver?: ResizeObserver;
   private gesture?: Gesture;
 
+  @State() private isButtonGroupWrapped = false;
+
   presented = false;
   lastFocus?: HTMLElement;
 
@@ -301,6 +305,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
     this.processedButtons = buttons.map((btn) => {
       return typeof btn === 'string' ? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined } : btn;
     });
+    /**
+     * Reset wrap state so the new button set can be re-evaluated. Without this,
+     * a previously-latched vertical layout would persist even if the new buttons
+     * fit horizontally.
+     */
+    this.isButtonGroupWrapped = false;
+    this.checkButtonGroupWrap();
   }
 
   @Watch('inputs')
@@ -351,6 +362,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
   connectedCallback() {
     prepareOverlay(this.el);
     this.triggerChanged();
+    /**
+     * If the alert was previously connected and is being reattached, the
+     * ResizeObserver was disconnected. componentDidLoad only fires once per
+     * instance, so re-establish the observer here on reconnect.
+     */
+    this.setupButtonGroupResizeObserver();
   }
 
   componentWillLoad() {
@@ -368,6 +385,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
       this.gesture.destroy();
       this.gesture = undefined;
     }
+
+    this.buttonGroupResizeObserver?.disconnect();
+    this.buttonGroupResizeObserver = undefined;
   }
 
   componentDidLoad() {
@@ -384,6 +404,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
       this.gesture.enable(true);
     }
 
+    this.setupButtonGroupResizeObserver();
+
     /**
      * If alert was rendered with isOpen="true"
      * then we should open alert immediately.
@@ -706,15 +728,60 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }
   };
 
+  private setupButtonGroupResizeObserver() {
+    /**
+     * Re-evaluate vertical layout when the button group resizes so a 2-button
+     * group with long text wraps cleanly instead of leaving a stray right-edge
+     * border on the first button.
+     */
+    if (!this.buttonGroupEl || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    this.buttonGroupResizeObserver?.disconnect();
+    this.buttonGroupResizeObserver = new ResizeObserver(() => this.checkButtonGroupWrap());
+    this.buttonGroupResizeObserver.observe(this.buttonGroupEl);
+    this.checkButtonGroupWrap();
+  }
+
+  private checkButtonGroupWrap() {
+    /**
+     * Defer the layout read out of the ResizeObserver callback so we don't
+     * force synchronous layout and avoid "ResizeObserver loop" warnings when
+     * applying the vertical-layout class itself triggers another resize.
+     */
+    raf(() => {
+      /**
+       * Bail if the alert was disconnected after this raf was queued.
+       * `buttonGroupEl` persists across disconnect so the observer can be
+       * re-attached on reconnect; the observer reference is the disconnect
+       * sentinel.
+       */
+      if (!this.buttonGroupResizeObserver) {
+        return;
+      }
+      const groupEl = this.buttonGroupEl;
+      if (!groupEl) {
+        return;
+      }
+      const buttons = Array.from(groupEl.querySelectorAll<HTMLElement>('.alert-button'));
+      if (buttons.length < 2) {
+        this.isButtonGroupWrapped = false;
+        return;
+      }
+      const firstTop = buttons[0].offsetTop;
+      this.isButtonGroupWrapped = buttons.some((btn) => btn.offsetTop !== firstTop);
+    });
+  }
+
   private renderAlertButtons() {
     const buttons = this.processedButtons;
     const mode = getIonMode(this);
     const alertButtonGroupClass = {
       'alert-button-group': true,
-      'alert-button-group-vertical': buttons.length > 2,
+      'alert-button-group-vertical': buttons.length > 2 || this.isButtonGroupWrapped,
     };
     return (
-      <div class={alertButtonGroupClass}>
+      <div class={alertButtonGroupClass} ref={(el) => (this.buttonGroupEl = el)}>
         {buttons.map((button) => (
           <button
             {...button.htmlAttributes}