Merge branch 'main' of github.com:ionic-team/ionic-framework into FW-6259

Author: thetaPC

CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.1](https://github.com/ionic-team/ionic-framework/compare/v8.5.0...v8.5.1) (2025-03-19)
+
+
+### Bug Fixes
+
+* **modal:** consider scrollable content while dragging when expandToScroll is false ([#30257](https://github.com/ionic-team/ionic-framework/issues/30257)) ([68be8e9](https://github.com/ionic-team/ionic-framework/commit/68be8e915ce5637b20591bb0acfb3653c2184ff6))
+* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([f4186c6](https://github.com/ionic-team/ionic-framework/commit/f4186c6761c46bf386f8effecf90d88831c34726)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254)
+
+
+### Performance Improvements
+
+* **modal:** fixing performance regression on modal sheets when expandToScroll is false ([#30267](https://github.com/ionic-team/ionic-framework/issues/30267)) ([c4b9212](https://github.com/ionic-team/ionic-framework/commit/c4b92126405ae5b7160ce03f40557563e755a8a5))
+
+
+
+
+
+## [8.4.6](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.4.6) (2025-03-19)
+
+
+### Bug Fixes
+
+* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([0eaee78](https://github.com/ionic-team/ionic-framework/commit/0eaee78fe1cae8f8a6cb04a01abad8c05dec0723)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254)
+
+
+
+
+
 # [8.5.0](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.5.0) (2025-03-13)
 
 

core/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.1](https://github.com/ionic-team/ionic-framework/compare/v8.5.0...v8.5.1) (2025-03-19)
+
+
+### Bug Fixes
+
+* **modal:** consider scrollable content while dragging when expandToScroll is false ([#30257](https://github.com/ionic-team/ionic-framework/issues/30257)) ([68be8e9](https://github.com/ionic-team/ionic-framework/commit/68be8e915ce5637b20591bb0acfb3653c2184ff6))
+* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([f4186c6](https://github.com/ionic-team/ionic-framework/commit/f4186c6761c46bf386f8effecf90d88831c34726)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254)
+
+
+### Performance Improvements
+
+* **modal:** fixing performance regression on modal sheets when expandToScroll is false ([#30267](https://github.com/ionic-team/ionic-framework/issues/30267)) ([c4b9212](https://github.com/ionic-team/ionic-framework/commit/c4b92126405ae5b7160ce03f40557563e755a8a5))
+
+
+
+
+
+## [8.4.6](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.4.6) (2025-03-19)
+
+
+### Bug Fixes
+
+* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([0eaee78](https://github.com/ionic-team/ionic-framework/commit/0eaee78fe1cae8f8a6cb04a01abad8c05dec0723)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254)
+
+
+
+
+
 # [8.5.0](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.5.0) (2025-03-13)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "@clack/prompts": "^0.10.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.51.0",
+    "@playwright/test": "^1.51.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",

core/package.json

@@ -1,6 +1,6 @@
-import { isIonContent, findClosestIonContent } from '@utils/content';
+import { findClosestIonContent, isIonContent } from '@utils/content';
 import { createGesture } from '@utils/gesture';
-import { clamp, raf, getElementRoot } from '@utils/helpers';
+import { clamp, getElementRoot, raf } from '@utils/helpers';
 import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
 
 import type { Animation } from '../../../interface';
@@ -83,6 +83,7 @@ export const createSheetGesture = (
   let currentBreakpoint = initialBreakpoint;
   let offset = 0;
   let canDismissBlocksGesture = false;
+  let cachedScrollEl: HTMLElement | null = null;
   const canDismissMaxStep = 0.95;
   const maxBreakpoint = breakpoints[breakpoints.length - 1];
   const minBreakpoint = breakpoints[0];
@@ -233,6 +234,17 @@ export const createSheetGesture = (
      */
     canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
 
+    /**
+     * Cache the scroll element reference when the gesture starts,
+     * this allows us to avoid querying the DOM for the target in onMove,
+     * which would impact performance significantly.
+     */
+    if (!expandToScroll) {
+      const targetEl = findClosestIonContent(detail.event.target! as HTMLElement);
+      cachedScrollEl =
+        targetEl && isIonContent(targetEl) ? getElementRoot(targetEl).querySelector('.inner-scroll') : targetEl;
+    }
+
     /**
      * If expandToScroll is disabled, we need to swap
      * the footer visibility to the original, so if the modal
@@ -267,13 +279,8 @@ export const createSheetGesture = (
      * If `expandToScroll` is disabled, and an upwards swipe gesture is done within
      * the scrollable content, we should not allow the swipe gesture to continue.
      */
-    if (!expandToScroll && detail.deltaY <= 0) {
-      const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
-      const scrollEl =
-        contentEl && isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-      if (scrollEl) {
-        return;
-      }
+    if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl) {
+      return;
     }
 
     /**
@@ -334,12 +341,8 @@ export const createSheetGesture = (
      * function to be called if the user is trying to swipe content upwards and the content
      * is not scrolled to the top.
      */
-    if (!expandToScroll && detail.deltaY <= 0 && findClosestIonContent(detail.event.target! as HTMLElement)) {
-      const contentEl = findClosestIonContent(detail.event.target! as HTMLElement)!;
-      const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-      if (scrollEl!.scrollTop > 0) {
-        return;
-      }
+    if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
+      return;
     }
 
     /**

core/src/components/modal/gestures/sheet.ts

@@ -213,12 +213,32 @@ export class Range implements ComponentInterface {
    */
   @Prop({ mutable: true }) value: RangeValue = 0;
   @Watch('value')
-  protected valueChanged() {
+  protected valueChanged(newValue: RangeValue, oldValue: RangeValue) {
+    const valuesChanged = this.compareValues(newValue, oldValue);
+    if (valuesChanged) {
+      this.ionInput.emit({ value: this.value });
+    }
+
     if (!this.noUpdate) {
       this.updateRatio();
     }
   }
 
+  /**
+   * Compares two RangeValue inputs to determine if they are different.
+   *
+   * @param newVal - The new value.
+   * @param oldVal - The old value.
+   * @returns `true` if the values are different, `false` otherwise.
+   */
+  private compareValues = (newVal: RangeValue, oldVal: RangeValue) => {
+    if (typeof newVal === 'object' && typeof oldVal === 'object') {
+      return newVal.lower !== oldVal.lower || newVal.upper !== oldVal.upper;
+    }
+
+    return newVal !== oldVal;
+  };
+
   private clampBounds = (value: any): number => {
     return clamp(this.min, value, this.max);
   };
@@ -591,8 +611,6 @@ export class Range implements ComponentInterface {
           upper: Math.max(valA, valB),
         };
 
-    this.ionInput.emit({ value: this.value });
-
     this.noUpdate = false;
   }
 

core/src/components/range/range.tsx

@@ -217,6 +217,42 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         expect(ionInputSpy).toHaveReceivedEvent();
       });
 
+      test('should not emit when the value does not change', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29619',
+        });
+
+        /**
+         * Requires padding to prevent the knob from being clipped.
+         * If it's clipped, then the value might be one off.
+         * For example, if the knob is clipped on the right, then the value
+         * will be 99 instead of 100.
+         */
+        await page.setContent(
+          `
+          <div style="padding: 0 20px">
+            <ion-range aria-label="range"></ion-range>
+          </div>
+        `,
+          config
+        );
+
+        const rangeHandle = page.locator('ion-range .range-knob-handle');
+        const ionInputSpy = await page.spyOnEvent('ionInput');
+
+        const rangeHandleBoundingBox = await rangeHandle.boundingBox();
+        const x = rangeHandleBoundingBox!.width / 2;
+        const y = rangeHandleBoundingBox!.height / 2;
+
+        // Click in the middle of the knob to prevent the knob from moving.
+        await rangeHandle.click({
+          position: { x, y },
+        });
+
+        expect(ionInputSpy).not.toHaveReceivedEvent();
+      });
+
       test('should emit when the knob is moved with the keyboard', async ({ page }) => {
         await page.setContent(`<ion-range aria-label="range" value="50"></ion-range>`, config);