feat(input): defaultValue

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Some of the tests for `item-sliding` were being skipped due to
flakiness.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated the tests to use the stable function, `dragElementBy` to
handle gestures, removing the gesture flakiness.
- Separated the basic test to lessen the gesture complexity else it
becomes flaky since it can't handle opening and closing and opening in
the same test.
- Tests are now checking all modes and all directions.
- Updated a utils function with a warning regarding an open issue with
RTL.


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/api.txt

@@ -556,6 +556,7 @@ ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-input,prop,counter,boolean,false,false,false
 ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-input,prop,debounce,number | undefined,undefined,false,false
+ion-input,prop,defaultValue,null | number | string | undefined,this.getValue(),false,false
 ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-input,prop,errorText,string | undefined,undefined,false,false

core/src/components.d.ts

@@ -17,7 +17,7 @@ import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interf
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
-import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+import { InputChangeEventDetail, InputInputEventDetail, InputValue } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
 import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
@@ -53,7 +53,7 @@ export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interf
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
-export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+export { InputChangeEventDetail, InputInputEventDetail, InputValue } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
 export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
@@ -1189,6 +1189,7 @@ export namespace Components {
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
         "debounce"?: number;
+        "defaultValue"?: InputValue;
         /**
           * If `true`, the user cannot interact with the input.
          */
@@ -1297,7 +1298,7 @@ export namespace Components {
         /**
           * The value of the input.
          */
-        "value"?: string | number | null;
+        "value"?: InputValue;
     }
     interface IonItem {
         /**
@@ -5248,6 +5249,7 @@ declare namespace LocalJSX {
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
         "debounce"?: number;
+        "defaultValue"?: InputValue;
         /**
           * If `true`, the user cannot interact with the input.
          */
@@ -5368,7 +5370,7 @@ declare namespace LocalJSX {
         /**
           * The value of the input.
          */
-        "value"?: string | number | null;
+        "value"?: InputValue;
     }
     interface IonItem {
         /**

core/src/components/input/input-interface.ts

@@ -19,3 +19,5 @@ export interface InputCustomEvent<T = InputChangeEventDetail> extends CustomEven
   detail: T;
   target: HTMLIonInputElement;
 }
+
+export type InputValue = string | number | null | undefined;

core/src/components/input/input.tsx

@@ -13,7 +13,7 @@ import { closeCircle, closeSharp } from 'ionicons/icons';
 import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, StyleEventDetail, TextFieldTypes } from '../../interface';
 
-import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
+import type { InputChangeEventDetail, InputInputEventDetail, InputValue } from './input-interface';
 import { getCounterText } from './input.utils';
 
 /**
@@ -53,7 +53,7 @@ export class Input implements ComponentInterface {
   /**
    * The value of the input when the input is focused.
    */
-  private focusedValue?: string | number | null;
+  private focusedValue?: InputValue;
 
   @State() hasFocus = false;
 
@@ -279,7 +279,9 @@ export class Input implements ComponentInterface {
   /**
    * The value of the input.
    */
-  @Prop({ mutable: true }) value?: string | number | null = '';
+  @Prop({ mutable: true }) value?: InputValue = '';
+
+  @Prop({ mutable: true }) defaultValue?: InputValue = this.getValue();
 
   /**
    * The `ionInput` event is fired each time the user modifies the input's value.
@@ -352,6 +354,11 @@ export class Input implements ComponentInterface {
     this.emitStyle();
   }
 
+  @Watch('defaultValue')
+  protected defaultValueChanged(newValue: InputValue) {
+    this.value = this.defaultValue = this.getValue(newValue);
+  }
+
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
@@ -383,6 +390,12 @@ export class Input implements ComponentInterface {
 
   componentDidLoad() {
     this.originalIonInput = this.ionInput;
+
+    if (this.value === '' || this.value == null) {
+      if (this.defaultValue !== '') {
+        this.value = this.getValue(this.defaultValue);
+      }
+    }
   }
 
   componentDidRender() {
@@ -466,8 +479,8 @@ export class Input implements ComponentInterface {
     return clearOnEdit === undefined ? type === 'password' : clearOnEdit;
   }
 
-  private getValue(): string {
-    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+  private getValue(value = this.value): string {
+    return typeof value === 'number' ? value.toString() : (value || '').toString();
   }
 
   private emitStyle() {
@@ -685,6 +698,7 @@ export class Input implements ComponentInterface {
     const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
+    const defaultValue = this.getValue(this.defaultValue);
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
 
@@ -732,6 +746,7 @@ export class Input implements ComponentInterface {
               size={this.size}
               type={this.type}
               value={value}
+              defaultValue={defaultValue}
               onInput={this.onInput}
               onChange={this.onChange}
               onBlur={this.onBlur}
@@ -796,6 +811,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
 
     const mode = getIonMode(this);
     const value = this.getValue();
+    const defaultValue = this.getValue(this.defaultValue);
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
     if (label) {
@@ -840,6 +856,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
           size={this.size}
           type={this.type}
           value={value}
+          defaultValue={defaultValue}
           onInput={this.onInput}
           onChange={this.onChange}
           onBlur={this.onBlur}

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -1,18 +1,53 @@
 import { expect } from '@playwright/test';
 import { configs, dragElementBy, test } from '@utils/test/playwright';
 
-import { testSlidingItem } from '../test.utils';
-
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    test.fixme('should not have visual regressions', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
+    });
+    test.describe('start options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
 
-      await testSlidingItem(page, 'item2', 'start', screenshot, true);
-      await testSlidingItem(page, 'item2', 'end', screenshot);
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? -150 : 150;
+
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
+      });
+    });
+
+    test.describe('end options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
+
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? 150 : -150;
+
+        await dragElementBy(item, page, dragByX);
+
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+      });
     });
   });
 });

core/src/components/item-sliding/test/icons/item-sliding.e2e.ts

@@ -1,19 +1,36 @@
-import { configs, test } from '@utils/test/playwright';
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-import { testSlidingItem } from '../test.utils';
-
-// TODO FW-3006
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
-  test.describe.skip(title('item-sliding: icons'), () => {
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: icons'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);
 
       const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
       for (const itemID of itemIDs) {
-        await testSlidingItem(page, itemID, itemID, screenshot);
+        const item = page.locator(`#${itemID}`);
+
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? 150 : -150;
+
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        // Convert camelCase ids to kebab-case for screenshot file names
+        const itemIDKebab = itemID.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemIDKebab}`));
       }
     });
   });

core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts

@@ -1,12 +1,11 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
 /**
  * This behavior does not vary across modes/directions
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('item-sliding: scroll-target'), () => {
-    // TODO FW-3006
-    test.skip('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
+    test('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
       skip.browser('webkit', 'mouse.wheel is not available in WebKit');
 
       await page.goto(`/src/components/item-sliding/test/scroll-target`, config);
@@ -16,13 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
 
-      const box = (await itemSlidingEl.boundingBox())!;
-      const centerX = box.x + box.width / 2;
-      const centerY = box.y + box.height / 2;
-
-      await page.mouse.move(centerX, centerY);
-      await page.mouse.down();
-      await page.mouse.move(centerX - 30, centerY);
+      await dragElementBy(itemSlidingEl, page, -150, 0, undefined, undefined, false);
 
       /**
        * Do not use scrollToBottom() or other scrolling methods

core/src/components/item-sliding/test/test.utils.ts

@@ -1,6 +1,11 @@
 import { expect } from '@playwright/test';
 import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 
+/**
+ * Warning: This function will fail when in RTL mode.
+ * TODO(FW-3711): Remove the `directions` config when this issue preventing
+ * tests from passing in RTL mode is resolved.
+ */
 export const testSlidingItem = async (
   page: E2EPage,
   itemID: string,
@@ -23,6 +28,9 @@ export const testSlidingItem = async (
   }
 
   // opening animation takes longer than waitForChanges accounts for
+  // especially if another item sliding is already open,
+  // so we wait to ensure the opened item is closed before
+  // opening another
   await page.waitForTimeout(500);
 
   await expect(item).toHaveScreenshot(screenshot(`item-sliding-${screenshotNameSuffix}`));

packages/angular-server/package-lock.json

@@ -1060,19 +1060,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "dependencies": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -7342,19 +7342,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "requires": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-          "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+          "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
         }
       }
     },

packages/angular/package-lock.json

@@ -1227,19 +1227,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "dependencies": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8104,19 +8104,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "requires": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-          "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+          "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
         }
       }
     },

packages/angular/src/directives/proxies.ts

@@ -977,7 +977,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
 
 
 @ProxyCmp({
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'defaultValue', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
@@ -985,7 +985,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'defaultValue', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
 })
 export class IonInput {
   protected el: HTMLElement;

packages/react-router/package-lock.json

@@ -205,11 +205,11 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "dependencies": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
@@ -401,11 +401,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.0.tgz",
-      "integrity": "sha512-BUytiAPasBuGkHT/rc43+KpmVDoJB2lsCXWUhmyzWIVtd8dPnbYy7y3QIV85U0bpEyc21VMI8Jin9pL/U0OOog==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.1.tgz",
+      "integrity": "sha512-9ByyybeNJfchPCk7tz8/beKarjzF1yG7KZS1s2DMyUSFt7x2y3F3v6WrwG0xQgoYLNJYJIPmR+CKc/4eQeMbXA==",
       "dependencies": {
-        "@ionic/core": "7.4.0",
+        "@ionic/core": "7.4.1",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -486,9 +486,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3663,11 +3663,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "requires": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
@@ -3786,11 +3786,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.0.tgz",
-      "integrity": "sha512-BUytiAPasBuGkHT/rc43+KpmVDoJB2lsCXWUhmyzWIVtd8dPnbYy7y3QIV85U0bpEyc21VMI8Jin9pL/U0OOog==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.1.tgz",
+      "integrity": "sha512-9ByyybeNJfchPCk7tz8/beKarjzF1yG7KZS1s2DMyUSFt7x2y3F3v6WrwG0xQgoYLNJYJIPmR+CKc/4eQeMbXA==",
       "requires": {
-        "@ionic/core": "7.4.0",
+        "@ionic/core": "7.4.1",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -3844,9 +3844,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
     },
     "@types/estree": {
       "version": "0.0.39",

packages/react/package-lock.json

@@ -697,19 +697,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "dependencies": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -11778,19 +11778,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "requires": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-          "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+          "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
         }
       }
     },

packages/react/src/framework-delegate.tsx

@@ -1,6 +1,8 @@
 import type { FrameworkDelegate } from '@ionic/core/components';
 import { createPortal } from 'react-dom';
 
+import { generateId } from './utils/generateId';
+
 // TODO(FW-2959): types
 
 type ReactComponent = (props?: any) => JSX.Element;
@@ -10,6 +12,9 @@ export const ReactDelegate = (
   removeView: (view: React.ReactElement) => void
 ): FrameworkDelegate => {
   const refMap = new WeakMap<HTMLElement, React.ReactElement>();
+  const reactDelegateId = `react-delegate-${generateId()}`;
+  // Incrementing counter to generate unique keys for each view
+  let id = 0;
 
   const attachViewToDom = async (
     parentElement: HTMLElement,
@@ -22,7 +27,8 @@ export const ReactDelegate = (
     parentElement.appendChild(div);
 
     const componentWithProps = component(propsOrDataObj);
-    const hostComponent = createPortal(componentWithProps, div);
+    const key = `${reactDelegateId}-${id++}`;
+    const hostComponent = createPortal(componentWithProps, div, key);
 
     refMap.set(div, hostComponent);
 

packages/react/test/base/src/pages/navigation/NavComponent.tsx

@@ -11,7 +11,7 @@ import {
   IonBackButton,
   IonPage,
 } from '@ionic/react';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 const PageOne = ({
   nav,
@@ -39,7 +39,10 @@ const PageOne = ({
         <IonNavLink
           routerDirection="forward"
           component={PageTwo}
-          componentProps={{ someValue: 'Hello' }}
+          componentProps={{
+            someValue: 'Hello',
+            nav: nav,
+          }}
         >
           <IonButton>Go to Page Two</IonButton>
         </IonNavLink>
@@ -48,7 +51,7 @@ const PageOne = ({
   );
 };
 
-const PageTwo = (props?: { someValue: string }) => {
+const PageTwo = ({ nav, ...rest }: { someValue: string; nav: React.MutableRefObject<HTMLIonNavElement> }) => {
   return (
     <>
       <IonHeader>
@@ -61,8 +64,8 @@ const PageTwo = (props?: { someValue: string }) => {
       </IonHeader>
       <IonContent id="pageTwoContent">
         <IonLabel>Page two content</IonLabel>
-        <div id="pageTwoProps">{JSON.stringify(props)}</div>
-        <IonNavLink routerDirection="forward" component={PageThree}>
+        <div id="pageTwoProps">{JSON.stringify(rest)}</div>
+        <IonNavLink routerDirection="forward" component={() => <PageThree nav={nav} />}>
           <IonButton>Go to Page Three</IonButton>
         </IonNavLink>
       </IonContent>
@@ -70,7 +73,12 @@ const PageTwo = (props?: { someValue: string }) => {
   );
 };
 
-const PageThree = () => {
+const PageThree = ({ nav }: { nav: React.MutableRefObject<HTMLIonNavElement> }) => {
+  useEffect(() => {
+    return () => {
+      window.dispatchEvent(new CustomEvent('pageThreeUnmounted'));
+    };
+  });
   return (
     <>
       <IonHeader>
@@ -81,8 +89,9 @@ const PageThree = () => {
           </IonButtons>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent id="pageThreeContent">
         <IonLabel>Page three content</IonLabel>
+        <IonButton onClick={() => nav.current.popToRoot()}>popToRoot</IonButton>
       </IonContent>
     </>
   );

packages/react/test/base/tests/e2e/specs/navigation/IonNav.cy.ts

@@ -47,4 +47,23 @@ describe('IonNav', () => {
     cy.get('#pageTwoProps').should('have.text', '{"someValue":"Hello"}');
   });
 
+  it('should unmount pages when popping to root', () => {
+    // Issue: https://github.com/ionic-team/ionic-framework/issues/27798
+
+    cy.contains('Go to Page Two').click();
+    cy.get('#pageTwoContent').should('be.visible');
+
+    cy.contains('Go to Page Three').click();
+    cy.get('#pageThreeContent').should('be.visible');
+
+    cy.window().then((window) => {
+      window.addEventListener('pageThreeUnmounted', cy.stub().as('pageThreeUnmounted'));
+    });
+
+    cy.get('ion-button').contains('popToRoot').click();
+    cy.get('#pageThreeContent').should('not.exist');
+
+    cy.get('@pageThreeUnmounted').should('have.been.calledOnce');
+  });
+
 });

packages/vue-router/package-lock.json

@@ -660,11 +660,11 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "dependencies": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
@@ -871,11 +871,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.0.tgz",
-      "integrity": "sha512-ItNI4sn9uKVEXdzpcywAz93Pia7z0zF7+G65mTiAYz5IIzqrzynnGWEZwXLfQL7bo/PApN3JvxBnJFRomriW+Q==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.1.tgz",
+      "integrity": "sha512-yHmpBG69j+CCE7vpa6zyQ38vCMx68U/UZ90MAUPRYSvpCXGx0714YbSZ68S1JDU5bwz8h0Gv/zOfm/JWcYwzOA==",
       "dependencies": {
-        "@ionic/core": "7.4.0",
+        "@ionic/core": "7.4.1",
         "ionicons": "^7.0.0"
       }
     },
@@ -1323,9 +1323,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -7697,11 +7697,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "requires": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
@@ -7829,11 +7829,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.0.tgz",
-      "integrity": "sha512-ItNI4sn9uKVEXdzpcywAz93Pia7z0zF7+G65mTiAYz5IIzqrzynnGWEZwXLfQL7bo/PApN3JvxBnJFRomriW+Q==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.1.tgz",
+      "integrity": "sha512-yHmpBG69j+CCE7vpa6zyQ38vCMx68U/UZ90MAUPRYSvpCXGx0714YbSZ68S1JDU5bwz8h0Gv/zOfm/JWcYwzOA==",
       "requires": {
-        "@ionic/core": "7.4.0",
+        "@ionic/core": "7.4.1",
         "ionicons": "^7.0.0"
       }
     },
@@ -8192,9 +8192,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",

packages/vue/package-lock.json

@@ -207,11 +207,11 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "dependencies": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
@@ -423,9 +423,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3746,11 +3746,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-Kuu04UljgmKz2Umcm77QCP+4O1rV67EEUtK/Kx0eIp+h+eoSkJJK4/p3EpkvrlKRDOfv4xlUnqKw7+yqhBg36w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
+      "integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
       "requires": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
@@ -3885,9 +3885,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
     },
     "@types/json-schema": {
       "version": "7.0.11",