@ionic/core 7.6.6-nightly.20240118 → 7.6.6-nightly.20240119

package/components/ion-datetime.js

@@ -689,22 +689,41 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                this.animateToDate(targetValue);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            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 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,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {

package/components/picker-internal.js

@@ -222,6 +222,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
                 inputEl.focus();
             }
             else {
+                // TODO FW-5900 Use keydown instead
                 el.addEventListener('keypress', this.onKeyPress);
                 this.destroyKeypressListener = () => {
                     el.removeEventListener('keypress', this.onKeyPress);
@@ -472,7 +473,22 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
+        return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+                var _a;
+                /**
+                 * The "Enter" key represents
+                 * the user submitting their time
+                 * selection, so we should blur the
+                 * input (and therefore close the keyboard)
+                 *
+                 * Updating the picker's state to no longer
+                 * be in input mode is handled in the onBlur
+                 * callback below.
+                 */
+                if (ev.key === 'Enter') {
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
     }
     get el() { return this; }
     static get style() { return {

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

@@ -688,22 +688,41 @@ const Datetime = class {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                this.animateToDate(targetValue);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            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 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,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {

package/dist/cjs/ion-picker-internal.cjs.entry.js

@@ -224,6 +224,7 @@ const PickerInternal = class {
                 inputEl.focus();
             }
             else {
+                // TODO FW-5900 Use keydown instead
                 el.addEventListener('keypress', this.onKeyPress);
                 this.destroyKeypressListener = () => {
                     el.removeEventListener('keypress', this.onKeyPress);
@@ -474,7 +475,22 @@ const PickerInternal = class {
         this.emitInputModeChange();
     }
     render() {
-        return (index.h(index.Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { class: "picker-before" }), index.h("div", { class: "picker-after" }), index.h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", null)));
+        return (index.h(index.Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+                var _a;
+                /**
+                 * The "Enter" key represents
+                 * the user submitting their time
+                 * selection, so we should blur the
+                 * input (and therefore close the keyboard)
+                 *
+                 * Updating the picker's state to no longer
+                 * be in input mode is handled in the onBlur
+                 * callback below.
+                 */
+                if (ev.key === 'Enter') {
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { class: "picker-before" }), index.h("div", { class: "picker-after" }), index.h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", null)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/components/datetime/datetime.js

@@ -526,22 +526,41 @@ export class Datetime {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                this.animateToDate(targetValue);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            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 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,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {

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

@@ -5,7 +5,7 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 const SINGLE_DATE = '2022-06-01';
 const MULTIPLE_DATES = ['2022-06-01', '2022-06-02', '2022-06-03'];
-const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-04-01', '2022-05-01', '2022-06-01'];
+const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-03-01', '2022-04-01', '2022-05-01'];
 class DatetimeMultipleFixture {
     constructor(page) {
         this.page = page;
@@ -118,10 +118,27 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 value: ['2022-06-01', '2022-06-02'],
             });
         });
-        test('multiple default values across months should display at least one value', async () => {
+        test('should scroll to new month when value is updated with multiple dates in the same month', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28602',
+            });
             const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES_SEPARATE_MONTHS);
+            await datetime.evaluate((el, dates) => {
+                el.value = dates;
+            }, MULTIPLE_DATES);
+            await page.waitForChanges();
+            const monthYear = datetime.locator('.calendar-month-year');
+            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, dates) => {
+                el.value = dates;
+            }, MULTIPLE_DATES_SEPARATE_MONTHS);
+            await page.waitForChanges();
             const monthYear = datetime.locator('.calendar-month-year');
-            await expect(monthYear).toHaveText(/April 2022/);
+            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 });

package/dist/collection/components/picker-internal/picker-internal.js

@@ -217,6 +217,7 @@ export class PickerInternal {
                 inputEl.focus();
             }
             else {
+                // TODO FW-5900 Use keydown instead
                 el.addEventListener('keypress', this.onKeyPress);
                 this.destroyKeypressListener = () => {
                     el.removeEventListener('keypress', this.onKeyPress);
@@ -467,7 +468,22 @@ export class PickerInternal {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
+        return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+                var _a;
+                /**
+                 * The "Enter" key represents
+                 * the user submitting their time
+                 * selection, so we should blur the
+                 * input (and therefore close the keyboard)
+                 *
+                 * Updating the picker's state to no longer
+                 * be in input mode is handled in the onBlur
+                 * callback below.
+                 */
+                if (ev.key === 'Enter') {
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
     }
     static get is() { return "ion-picker-internal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-internal/test/keyboard-entry/picker-internal.e2e.js

@@ -110,5 +110,37 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 });
             await expect(column).toHaveJSProperty('value', 12);
         });
+        test('pressing Enter should dismiss the keyboard', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28325',
+            });
+            await page.setContent(`
+        <ion-picker-internal>
+          <ion-picker-column-internal></ion-picker-column-internal>
+        </ion-picker-internal>
+
+        <script>
+          const column = document.querySelector('ion-picker-column-internal');
+          column.items = [
+            { text: '00', value: 12 },
+            { text: '01', value: 1 },
+            { text: '02', value: 2 },
+            { text: '03', value: 3 },
+            { text: '04', value: 4 },
+            { text: '05', value: 5 }
+          ];
+          column.value = 5;
+          column.numericInput = true;
+        </script>
+      `, config);
+            const column = page.locator('ion-picker-column-internal');
+            await column.click();
+            const input = page.locator('ion-picker-internal input');
+            await expect(input).toBeFocused();
+            // pressing Enter should blur the input and therefore close the keyboard
+            await page.keyboard.press('Enter');
+            await expect(input).not.toBeFocused();
+        });
     });
 });

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-18T06:07:58",
+  "timestamp": "2024-01-19T06:07:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.10.0",

package/dist/esm/ion-datetime_3.entry.js

@@ -684,22 +684,41 @@ const Datetime = class {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                this.animateToDate(targetValue);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            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 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,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {

package/dist/esm/ion-picker-internal.entry.js

@@ -220,6 +220,7 @@ const PickerInternal = class {
                 inputEl.focus();
             }
             else {
+                // TODO FW-5900 Use keydown instead
                 el.addEventListener('keypress', this.onKeyPress);
                 this.destroyKeypressListener = () => {
                     el.removeEventListener('keypress', this.onKeyPress);
@@ -470,7 +471,22 @@ const PickerInternal = class {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
+        return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+                var _a;
+                /**
+                 * The "Enter" key represents
+                 * the user submitting their time
+                 * selection, so we should blur the
+                 * input (and therefore close the keyboard)
+                 *
+                 * Updating the picker's state to no longer
+                 * be in input mode is handled in the onBlur
+                 * callback below.
+                 */
+                if (ev.key === 'Enter') {
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
     }
     get el() { return getElement(this); }
 };