@ionic/core 7.5.8-dev.11701791090.18ebbea8 → 7.5.8-dev.11701806358.1ca1b519

package/dist/collection/components/textarea/test/clear-on-edit/textarea.e2e.js

@@ -3,7 +3,6 @@
  */
 import { expect } from "@playwright/test";
 import { test, configs } from "../../../../utils/test/playwright/index";
-const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('textarea: clearOnEdit'), () => {
         test('should clear when typed into', async ({ page }) => {
@@ -22,32 +21,5 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.waitForChanges();
             await expect(textarea).toHaveJSProperty('value', 'abc');
         });
-        IGNORED_KEYS.forEach((ignoredKey) => {
-            test(`should not clear when ${ignoredKey} is pressed`, async ({ page }) => {
-                await page.setContent(`<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`, config);
-                const textarea = page.locator('ion-textarea');
-                await textarea.locator('textarea').focus();
-                await page.keyboard.press(ignoredKey);
-                await page.waitForChanges();
-                await expect(textarea).toHaveJSProperty('value', 'abc');
-            });
-        });
-        test('should clear after when pressing valid key after pressing ignored key', async ({ page }) => {
-            test.info().annotations.push({
-                type: 'issue',
-                description: 'https://github.com/ionic-team/ionic-framework/issues/28633',
-            });
-            await page.setContent(`<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`, config);
-            const textarea = page.locator('ion-textarea');
-            await textarea.locator('textarea').focus();
-            // ignored
-            await page.keyboard.press('Shift');
-            await page.waitForChanges();
-            await expect(textarea).toHaveJSProperty('value', 'abc');
-            // allowed
-            await page.keyboard.press('a');
-            await page.waitForChanges();
-            await expect(textarea).toHaveJSProperty('value', 'a');
-        });
     });
 });

package/dist/collection/components/textarea/textarea.js

@@ -234,38 +234,15 @@ export class Textarea {
         if (!this.clearOnEdit) {
             return;
         }
-        /**
-         * The following keys do not modify the
-         * contents of the input. As a result, pressing
-         * them should not edit the textarea.
-         *
-         * We can't check to see if the value of the textarea
-         * was changed because we call checkClearOnEdit
-         * in a keydown listener, and the key has not yet
-         * been added to the textarea.
-         *
-         * Unlike ion-input, the "Enter" key does modify the
-         * textarea by adding a new line, so "Enter" is not
-         * included in the IGNORED_KEYS array.
-         */
-        const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
-        const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
         /**
          * Clear the textarea if the control has not been previously cleared
          * during focus.
          */
-        if (!this.didTextareaClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
+        if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') {
             this.value = '';
             this.emitInputChange(ev);
         }
-        /**
-         * Pressing an IGNORED_KEYS first and
-         * then an allowed key will cause the input to not
-         * be cleared.
-         */
-        if (!pressedIgnoredKey) {
-            this.didTextareaClearOnEdit = true;
-        }
+        this.didTextareaClearOnEdit = true;
     }
     focusChange() {
         this.emitStyle();

package/dist/collection/utils/gesture/gesture-controller.js

@@ -189,5 +189,5 @@ class BlockerDelegate {
         this.ctrl = undefined;
     }
 }
-const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/overlays.js

@@ -5,6 +5,7 @@ import { doc } from "./browser/index";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
+import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -28,7 +29,10 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-export const pickerController = /*@__PURE__*/ createController('ion-picker');
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -138,7 +142,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -323,7 +327,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -389,6 +393,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         return;
     }
     setRootAriaHidden(true);
+    document.body.classList.add(BACKDROP_NO_SCROLL);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -451,12 +456,14 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     if (!overlay.presented) {
         return false;
     }
+    const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
     /**
      * If this is the last visible overlay then
      * we want to re-add the root to the accessibility tree.
      */
-    if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+    if (lastOverlay) {
         setRootAriaHidden(false);
+        document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {

package/dist/collection/utils/test/overlays/overlays-scroll-blocking.spec.js

@@ -0,0 +1,65 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../../../components/modal/modal";
+describe('overlays: scroll blocking', () => {
+    it('should not block scroll when the overlay is created', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const body = page.doc.querySelector('body');
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should block scroll when the overlay is presented', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not block scroll when the overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not enable scroll until last overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal id="one"></ion-modal>
+        <ion-modal id="two"></ion-modal>
+      `,
+        });
+        const modalOne = page.body.querySelector('#one');
+        const modalTwo = page.body.querySelector('#two');
+        const body = page.doc.querySelector('body');
+        await modalOne.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalOne.dismiss();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+});