merge release-8.5.9 (#30453)

v8.5.9

Author: brandyscarney

.github/ionic-issue-bot.yml

@@ -93,6 +93,7 @@ stale:
     - "triage"
     - "type: bug"
     - "type: feature request"
+    - "needs: investigation"
   exemptAssigned: true
   exemptProjects: true
   exemptMilestones: true

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.5.9](https://github.com/ionic-team/ionic-framework/compare/v8.5.8...v8.5.9) (2025-06-04)
+
+
+### Bug Fixes
+
+* **datetime:** display the correct month when multiple values are set ([#29610](https://github.com/ionic-team/ionic-framework/issues/29610)) ([14f32f8](https://github.com/ionic-team/ionic-framework/commit/14f32f8feea7b3880367868ff0a2134b0c28cc07)), closes [#29094](https://github.com/ionic-team/ionic-framework/issues/29094)
+* **modal:** move sheet footers instead of cloning while dragging ([#30433](https://github.com/ionic-team/ionic-framework/issues/30433)) ([4cbbbb0](https://github.com/ionic-team/ionic-framework/commit/4cbbbb053ad36d176f1d79ad09777f94ca8076d2)), closes [#30315](https://github.com/ionic-team/ionic-framework/issues/30315) [#30341](https://github.com/ionic-team/ionic-framework/issues/30341) [#30312](https://github.com/ionic-team/ionic-framework/issues/30312)
+
+
+
+
+
 ## [8.5.8](https://github.com/ionic-team/ionic-framework/compare/v8.5.7...v8.5.8) (2025-05-28)
 
 

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.5.9](https://github.com/ionic-team/ionic-framework/compare/v8.5.8...v8.5.9) (2025-06-04)
+
+
+### Bug Fixes
+
+* **datetime:** display the correct month when multiple values are set ([#29610](https://github.com/ionic-team/ionic-framework/issues/29610)) ([14f32f8](https://github.com/ionic-team/ionic-framework/commit/14f32f8feea7b3880367868ff0a2134b0c28cc07)), closes [#29094](https://github.com/ionic-team/ionic-framework/issues/29094)
+* **modal:** move sheet footers instead of cloning while dragging ([#30433](https://github.com/ionic-team/ionic-framework/issues/30433)) ([4cbbbb0](https://github.com/ionic-team/ionic-framework/commit/4cbbbb053ad36d176f1d79ad09777f94ca8076d2)), closes [#30315](https://github.com/ionic-team/ionic-framework/issues/30315) [#30341](https://github.com/ionic-team/ionic-framework/issues/30341) [#30312](https://github.com/ionic-team/ionic-framework/issues/30312)
+
+
+
+
+
 ## [8.5.8](https://github.com/ionic-team/ionic-framework/compare/v8.5.7...v8.5.8) (2025-05-28)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.5.8",
+  "version": "8.5.9",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/package.json

@@ -1263,21 +1263,20 @@ export class Datetime implements ComponentInterface {
     }
 
     /**
-     * If there are multiple values, pick an arbitrary one to clamp to. This way,
-     * if the values are across months, we always show at least one of them. Note
-     * that the values don't necessarily have to be in order.
+     * If there are multiple values, clamp to the last one.
+     * This is because the last value is the one that the user
+     * has most recently interacted with.
      */
-    const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
+    const singleValue = Array.isArray(valueToProcess) ? valueToProcess[valueToProcess.length - 1] : valueToProcess;
     const targetValue = clampDate(singleValue, minParts, maxParts);
 
     const { month, day, year, hour, minute } = targetValue;
     const ampm = parseAmPm(hour!);
 
     /**
-     * Since `activeParts` indicates a value that
-     * been explicitly selected either by the
-     * user or the app, only update `activeParts`
-     * if the `value` property is set.
+     * Since `activeParts` indicates a value that been explicitly selected
+     * either by the user or the app, only update `activeParts` if the
+     * `value` property is set.
      */
     if (hasValue) {
       if (Array.isArray(valueToProcess)) {
@@ -1301,53 +1300,29 @@ export class Datetime implements ComponentInterface {
       this.activeParts = [];
     }
 
-    /**
-     * Only animate if:
-     * 1. We're using grid style (wheel style pickers should just jump to new value)
-     * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
-     * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
-     * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
-     */
     const didChangeMonth =
       (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
     const bodyIsVisible = el.classList.contains('datetime-ready');
     const { isGridStyle, showMonthAndYear } = this;
 
-    let areAllSelectedDatesInSameMonth = true;
-    if (Array.isArray(valueToProcess)) {
-      const firstMonth = valueToProcess[0].month;
-      for (const date of valueToProcess) {
-        if (date.month !== firstMonth) {
-          areAllSelectedDatesInSameMonth = false;
-          break;
-        }
-      }
-    }
-
-    /**
-     * If there is more than one date selected
-     * and the dates aren't all in the same month,
-     * then we should neither animate to the date
-     * nor update the working parts because we do
-     * not know which date the user wants to view.
-     */
-    if (areAllSelectedDatesInSameMonth) {
-      if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-        this.animateToDate(targetValue);
-      } else {
-        /**
-         * We only need to do this if we didn't just animate to a new month,
-         * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-         */
-        this.setWorkingParts({
-          month,
-          day,
-          year,
-          hour,
-          minute,
-          ampm,
-        });
-      }
+    if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+      /**
+       * Only animate if:
+       * 1. We're using grid style (wheel style pickers should just jump to new value)
+       * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
+       * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
+       * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+       */
+      this.animateToDate(targetValue);
+    } else {
+      this.setWorkingParts({
+        month,
+        day,
+        year,
+        hour,
+        minute,
+        ampm,
+      });
     }
   };
 

core/src/components/datetime/datetime.tsx

@@ -174,18 +174,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await expect(monthYear).toHaveText(/June 2022/);
     });
 
-    test('should not scroll to new month when value is updated with dates in different months', async ({ page }) => {
-      const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES);
-      await datetime.evaluate((el: HTMLIonDatetimeElement, dates: string[]) => {
-        el.value = dates;
-      }, MULTIPLE_DATES_SEPARATE_MONTHS);
-
-      await page.waitForChanges();
-
-      const monthYear = datetime.locator('.calendar-month-year');
-      await expect(monthYear).toHaveText(/June 2022/);
-    });
-
     test('with buttons, should only update value when confirm is called', async ({ page }) => {
       const datetime = await datetimeFixture.goto(config, SINGLE_DATE, { showDefaultButtons: true });
       const june2Button = datetime.locator('[data-month="6"][data-day="2"]');
@@ -311,4 +299,41 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await expect(header).toHaveText('Mon, Oct 10');
     });
   });
+
+  test.describe('with selected days in different months', () => {
+    test(`set the active month view to the latest value's month`, async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29094',
+      });
+
+      const datetime = await new DatetimeMultipleFixture(page).goto(config, MULTIPLE_DATES_SEPARATE_MONTHS);
+      const calendarMonthYear = datetime.locator('.calendar-month-year');
+
+      await expect(calendarMonthYear).toHaveText(/May 2022/);
+    });
+
+    test('does not change the active month view when selecting a day in a different month', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29094',
+      });
+
+      const datetime = await new DatetimeMultipleFixture(page).goto(config, MULTIPLE_DATES_SEPARATE_MONTHS);
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+      const calendarMonthYear = datetime.locator('.calendar-month-year');
+
+      await nextButton.click();
+
+      await expect(calendarMonthYear).toHaveText(/June 2022/);
+
+      const june8Button = datetime.locator('[data-month="6"][data-day="8"]');
+
+      await june8Button.click();
+
+      await expect(calendarMonthYear).toHaveText(/June 2022/);
+    });
+  });
 });

core/src/components/datetime/test/multiple/datetime.e2e.ts

@@ -41,50 +41,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(500)
-    .addAnimation([wrapperAnimation])
-    .beforeAddWrite(() => {
-      if (expandToScroll) {
-        // Scroll can only be done when the modal is fully expanded.
-        return;
-      }
-
-      /**
-       * There are some browsers that causes flickering when
-       * dragging the content when scroll is enabled at every
-       * breakpoint. This is due to the wrapper element being
-       * transformed off the screen and having a snap animation.
-       *
-       * A workaround is to clone the footer element and append
-       * it outside of the wrapper element. This way, the footer
-       * is still visible and the drag can be done without
-       * flickering. The original footer is hidden until the modal
-       * is dismissed. This maintains the animation of the footer
-       * when the modal is dismissed.
-       *
-       * The workaround needs to be done before the animation starts
-       * so there are no flickering issues.
-       */
-      const ionFooter = baseEl.querySelector('ion-footer');
-      /**
-       * This check is needed to prevent more than one footer
-       * from being appended to the shadow root.
-       * Otherwise, iOS and MD enter animations would append
-       * the footer twice.
-       */
-      const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
-      if (ionFooter && !ionFooterAlreadyAppended) {
-        const footerHeight = ionFooter.clientHeight;
-        const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
-
-        baseEl.shadowRoot!.appendChild(clonedFooter);
-        ionFooter.style.setProperty('display', 'none');
-        ionFooter.setAttribute('aria-hidden', 'true');
-
-        // Padding is added to prevent some content from being hidden.
-        const page = baseEl.querySelector('.ion-page') as HTMLElement;
-        page.style.setProperty('padding-bottom', `${footerHeight}px`);
-      }
-    });
+    .addAnimation([wrapperAnimation]);
 
   if (contentAnimation) {
     baseAnimation.addAnimation(contentAnimation);

core/src/components/modal/animations/ios.enter.ts

@@ -19,7 +19,7 @@ const createLeaveAnimation = () => {
  * iOS Modal Leave Animation
  */
 export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions, duration = 500): Animation => {
-  const { presentingEl, currentBreakpoint, expandToScroll } = opts;
+  const { presentingEl, currentBreakpoint } = opts;
   const root = getElementRoot(baseEl);
   const { wrapperAnimation, backdropAnimation } =
     currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
@@ -32,33 +32,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(duration)
-    .addAnimation(wrapperAnimation)
-    .beforeAddWrite(() => {
-      if (expandToScroll) {
-        // Scroll can only be done when the modal is fully expanded.
-        return;
-      }
-
-      /**
-       * If expandToScroll is disabled, we need to swap
-       * the visibility to the original, so the footer
-       * dismisses with the modal and doesn't stay
-       * until the modal is removed from the DOM.
-       */
-      const ionFooter = baseEl.querySelector('ion-footer');
-      if (ionFooter) {
-        const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
-
-        ionFooter.style.removeProperty('display');
-        ionFooter.removeAttribute('aria-hidden');
-
-        clonedFooter.style.setProperty('display', 'none');
-        clonedFooter.setAttribute('aria-hidden', 'true');
-
-        const page = baseEl.querySelector('.ion-page') as HTMLElement;
-        page.style.removeProperty('padding-bottom');
-      }
-    });
+    .addAnimation(wrapperAnimation);
 
   if (presentingEl) {
     const isMobile = window.innerWidth < 768;

core/src/components/modal/animations/ios.leave.ts

@@ -37,56 +37,13 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOption
 
   // The content animation is only added if scrolling is enabled for
   // all the breakpoints.
-  expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+  !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
 
   const baseAnimation = createAnimation()
     .addElement(baseEl)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(280)
-    .addAnimation([backdropAnimation, wrapperAnimation])
-    .beforeAddWrite(() => {
-      if (expandToScroll) {
-        // Scroll can only be done when the modal is fully expanded.
-        return;
-      }
-
-      /**
-       * There are some browsers that causes flickering when
-       * dragging the content when scroll is enabled at every
-       * breakpoint. This is due to the wrapper element being
-       * transformed off the screen and having a snap animation.
-       *
-       * A workaround is to clone the footer element and append
-       * it outside of the wrapper element. This way, the footer
-       * is still visible and the drag can be done without
-       * flickering. The original footer is hidden until the modal
-       * is dismissed. This maintains the animation of the footer
-       * when the modal is dismissed.
-       *
-       * The workaround needs to be done before the animation starts
-       * so there are no flickering issues.
-       */
-      const ionFooter = baseEl.querySelector('ion-footer');
-      /**
-       * This check is needed to prevent more than one footer
-       * from being appended to the shadow root.
-       * Otherwise, iOS and MD enter animations would append
-       * the footer twice.
-       */
-      const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
-      if (ionFooter && !ionFooterAlreadyAppended) {
-        const footerHeight = ionFooter.clientHeight;
-        const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
-
-        baseEl.shadowRoot!.appendChild(clonedFooter);
-        ionFooter.style.setProperty('display', 'none');
-        ionFooter.setAttribute('aria-hidden', 'true');
-
-        // Padding is added to prevent some content from being hidden.
-        const page = baseEl.querySelector('.ion-page') as HTMLElement;
-        page.style.setProperty('padding-bottom', `${footerHeight}px`);
-      }
-    });
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (contentAnimation) {
     baseAnimation.addAnimation(contentAnimation);