add experimental infinite scroll fix

core/src/components.d.ts

@@ -160,7 +160,7 @@ export namespace Components {
         /**
           * Dismiss the action sheet overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -239,7 +239,7 @@ export namespace Components {
         /**
           * Dismiss the alert overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1527,7 +1527,7 @@ export namespace Components {
         /**
           * Dismiss the loading overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1720,7 +1720,7 @@ export namespace Components {
         /**
           * Dismiss the modal overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1948,9 +1948,6 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
     }
-    interface IonPasswordStrength {
-        "strength"?: 'weak' | 'medium' | 'strong';
-    }
     interface IonPicker {
         /**
           * If `true`, the picker will animate.
@@ -1976,7 +1973,7 @@ export namespace Components {
         /**
           * Dismiss the picker overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -2113,7 +2110,7 @@ export namespace Components {
           * Dismiss the popover overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
-          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
          */
         "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
         /**
@@ -3114,7 +3111,7 @@ export namespace Components {
         /**
           * Dismiss the toast overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -4038,12 +4035,6 @@ declare global {
         prototype: HTMLIonNoteElement;
         new (): HTMLIonNoteElement;
     };
-    interface HTMLIonPasswordStrengthElement extends Components.IonPasswordStrength, HTMLStencilElement {
-    }
-    var HTMLIonPasswordStrengthElement: {
-        prototype: HTMLIonPasswordStrengthElement;
-        new (): HTMLIonPasswordStrengthElement;
-    };
     interface HTMLIonPickerElementEventMap {
         "ionPickerDidPresent": void;
         "ionPickerWillPresent": void;
@@ -4681,7 +4672,6 @@ declare global {
         "ion-nav": HTMLIonNavElement;
         "ion-nav-link": HTMLIonNavLinkElement;
         "ion-note": HTMLIonNoteElement;
-        "ion-password-strength": HTMLIonPasswordStrengthElement;
         "ion-picker": HTMLIonPickerElement;
         "ion-picker-column": HTMLIonPickerColumnElement;
         "ion-picker-column-internal": HTMLIonPickerColumnInternalElement;
@@ -6616,9 +6606,6 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
     }
-    interface IonPasswordStrength {
-        "strength"?: 'weak' | 'medium' | 'strong';
-    }
     interface IonPicker {
         /**
           * If `true`, the picker will animate.
@@ -8140,7 +8127,6 @@ declare namespace LocalJSX {
         "ion-nav": IonNav;
         "ion-nav-link": IonNavLink;
         "ion-note": IonNote;
-        "ion-password-strength": IonPasswordStrength;
         "ion-picker": IonPicker;
         "ion-picker-column": IonPickerColumn;
         "ion-picker-column-internal": IonPickerColumnInternal;
@@ -8238,7 +8224,6 @@ declare module "@stencil/core" {
             "ion-nav": LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
             "ion-nav-link": LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
             "ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
-            "ion-password-strength": LocalJSX.IonPasswordStrength & JSXBase.HTMLAttributes<HTMLIonPasswordStrengthElement>;
             "ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
             "ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
             "ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes<HTMLIonPickerColumnInternalElement>;

core/src/components/action-sheet/action-sheet.tsx

@@ -216,10 +216,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the action sheet.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/alert/alert.tsx

@@ -411,10 +411,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the alert.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -84,6 +84,9 @@ export class InfiniteScroll implements ComponentInterface {
    */
   @Event() ionInfinite!: EventEmitter<void>;
 
+
+  private scrollHeight: number = 0;
+
   async connectedCallback() {
     const contentEl = findClosestIonContent(this.el);
     if (!contentEl) {
@@ -102,6 +105,33 @@ export class InfiniteScroll implements ComponentInterface {
     }
   }
 
+  async componentDidLoad() {
+    const contentEl = findClosestIonContent(this.el)!;
+    const scrollEl = await getScrollElement(contentEl);
+    const mo = new MutationObserver(async () => {
+      // wait for items to by hydrated so they have a dimension
+      const item = document.querySelectorAll('ion-item');
+      const lastItem = item[0];
+      await lastItem.componentOnReady();
+
+      // restore scroll position
+      const newScrollTop = scrollEl.scrollHeight - this.scrollHeight;
+
+      // TODO not sure why we need to set scrollTop twice
+      // TODO every once in a while the first ionInfinite callback
+      // still has a flicker
+      scrollEl.scrollTop = newScrollTop;
+      requestAnimationFrame(() => {
+        scrollEl.scrollTop = newScrollTop;
+      });
+
+      this.isBusy = false;
+      this.didFire = false;
+    });
+
+    mo.observe(findClosestIonContent(this.el)!, { subtree: true, characterData: true, childList: true });
+  }
+
   disconnectedCallback() {
     this.enableScrollEvents(false);
     this.scrollEl = undefined;
@@ -132,6 +162,10 @@ export class InfiniteScroll implements ComponentInterface {
       if (!this.didFire) {
         this.isLoading = true;
         this.didFire = true;
+
+        // cache the scroll position before the DOM updates
+        this.scrollHeight = scrollEl.scrollHeight;
+
         this.ionInfinite.emit();
         return 3;
       }
@@ -179,28 +213,6 @@ export class InfiniteScroll implements ComponentInterface {
        *    Done.
        */
       this.isBusy = true;
-      // ******** DOM READ ****************
-      // Save the current content dimensions before the UI updates
-      const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
-
-      // ******** DOM READ ****************
-      requestAnimationFrame(() => {
-        readTask(() => {
-          // UI has updated, save the new content dimensions
-          const scrollHeight = scrollEl.scrollHeight;
-          // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
-          const newScrollTop = scrollHeight - prev;
-
-          // ******** DOM WRITE ****************
-          requestAnimationFrame(() => {
-            writeTask(() => {
-              scrollEl.scrollTop = newScrollTop;
-              this.isBusy = false;
-              this.didFire = false;
-            });
-          });
-        });
-      });
     } else {
       this.didFire = false;
     }

core/src/components/infinite-scroll/test/basic/index.html

@@ -12,6 +12,7 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
   </head>
 
   <body>
@@ -19,42 +20,49 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Infinite Scroll - Basic</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="doScroll()">scroll to top</ion-button>
+          </ion-buttons>
         </ion-toolbar>
       </ion-header>
 
       <ion-content class="ion-padding" id="content">
-        <ion-button onclick="toggleInfiniteScroll()" expand="block"> Toggle InfiniteScroll </ion-button>
-
-        <ion-list id="list"></ion-list>
-
-        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+        <ion-infinite-scroll position="top" threshold="100px" id="infinite-scroll">
           <ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
           </ion-infinite-scroll-content>
         </ion-infinite-scroll>
+
+        <ion-list id="list"></ion-list>
       </ion-content>
     </ion-app>
 
     <script>
       const list = document.getElementById('list');
       const infiniteScroll = document.getElementById('infinite-scroll');
+      const content = document.querySelector('ion-content');
 
+      let count = 0;
       function toggleInfiniteScroll() {
         infiniteScroll.disabled = !infiniteScroll.disabled;
       }
 
       infiniteScroll.addEventListener('ionInfinite', async function () {
         await wait(500);
-        infiniteScroll.complete();
+
         appendItems();
+        infiniteScroll.complete();
+
         // Custom event consumed in the e2e tests
         window.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
       });
 
       function appendItems() {
-        for (var i = 0; i < 30; i++) {
+        const c = count;
+        for (var i = count; i < c + 30; i++) {
           const el = document.createElement('ion-item');
           el.textContent = `${1 + i}`;
-          list.appendChild(el);
+          list.prepend(el);
+          count += 1;
         }
       }
 
@@ -67,6 +75,25 @@
       }
 
       appendItems();
+
+    // this piece is only needed if items are Ionic components instead of divs
+      // wait for Angular to load items into the DOM
+      const observer = new MutationObserver(async () => {
+        const firstItem = document.querySelector('ion-item');
+
+        // wait for item component to be hydrated
+        await firstItem.componentOnReady();
+
+        observer.disconnect();
+
+        content.scrollToBottom();
+      });
+
+      observer.observe(list, { childList: true });
+
+      const doScroll = () => {
+        content.scrollToTop();
+      }
     </script>
   </body>
 </html>

core/src/components/loading/loading.tsx

@@ -268,10 +268,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the loading.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/modal/modal.tsx

@@ -662,10 +662,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
    *
    * @param data Any data to emit in the dismiss events.
    * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/password-strength/password-strength.tsx

@@ -1,34 +0,0 @@
-import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, Prop, h } from '@stencil/core';
-
-const progressBarValue: any = {
-  'weak': {
-    value: 0.2,
-  },
-  'medium': {
-    value: 0.6,
-  },
-  'strong': {
-    value: 1,
-  }
-}
-
-@Component({
-  tag: 'ion-password-strength',
-  shadow: true
-})
-export class PasswordStrength implements ComponentInterface {
-  @Prop() strength?: 'weak' | 'medium' | 'strong';
-
-  render() {
-    // TODO need a mode virtual prop
-    // TODO need to add colors
-    const data = this.strength !== undefined ? progressBarValue[this.strength] : undefined;
-    return (
-      <Host>
-        <ion-progress-bar value={data?.value || 0}></ion-progress-bar>
-        { this.strength !== undefined && <slot name={this.strength}></slot> }
-      </Host>
-    );
-  }
-}

core/src/components/password-strength/test/basic/index.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Password Strength - Basic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body class="ion-padding">
-    <ion-input label="Password" type="password" fill="outline"></ion-input>
-
-    <br />
-
-    <ion-password-strength>
-      <div slot="weak">Your password is weak</div>
-      <div slot="medium">Your password is medium</div>
-      <div slot="strong">Your password is strong</div>
-    </ion-password-strength>
-
-    <script>
-      const input = document.querySelector('ion-input');
-      const ps = document.querySelector('ion-password-strength');
-      input.addEventListener('ionInput', () => {
-        const val = input.value;
-
-        if (val.length === 0) {
-          ps.strength = undefined;
-        } else if (val.length < 4) {
-          ps.strength = 'weak';
-        } else if (val.length < 8) {
-          ps.strength = 'medium';
-        } else {
-          ps.strength = 'strong';
-        }
-      });
-    </script>
-  </body>
-</html>

core/src/components/picker/picker.tsx

@@ -248,10 +248,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the picker.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/popover/popover.tsx

@@ -525,10 +525,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
    * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
    * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
    * a parent popover if this popover is nested. Defaults to `true`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string, dismissParentPopover = true): Promise<boolean> {

core/src/components/toast/test/toast.spec.tsx

@@ -93,19 +93,6 @@ describe('toast: a11y smoke test', () => {
 });
 
 describe('toast: duration config', () => {
-  afterEach(() => {
-    /**
-     * Important: Reset the config
-     * after each test as it is not
-     * automatically reset.
-     * Otherwise, toasts in other tests
-     * will take on any toastDuration value
-     * set and timeouts will potentially run
-     * after tests are finished.
-     */
-    config.reset({});
-  });
-
   it('should have duration set to 0', async () => {
     const page = await newSpecPage({
       components: [Toast],

core/src/components/toast/toast.tsx

@@ -401,10 +401,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the toast.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {