We're developing an app which is partially native and partially hybrid. We will open cordova activity when user clicks on an menu item and finish the activity when user clicks back. Problem with this approach is, it takes a while to render on the screen for first time. We are hosting all the resource files in the assets folder so caching doesn't make much sense. Is there any progressive way to load the application?

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/Users/myname/.nvm/versions/node/v9.4.0/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/myname/Library/Android/sdk/)
   NodeJS            : v9.4.0 (/Users/myname/.nvm/versions/node/v9.4.0/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra

Describe the Bug When I do ionic serve and open it in Android Lollipop's browser, Its giving below error. Uncaught SyntaxError: Use of const in strict mode. vendor.js:71605

Type: bug

Platform: android 4.4 webview

when switching between tabs ONLY on Android platform, the app show a white flash. This is in 1.0.0 stable. Not using crosswalk. Forum post http://forum.ionicframework.com/t/white-flash-appearing-when-switching-between-tabs-on-android-in-1-0-0-stable/24774

@robdmoore if you wanna test, here it is so far

Test in /test/html/list-fit.html

TODO:

• [x] unit tests
• [x] docs
• [x] grid
• [x] cleanup on $destroy
• [x] one more run of optimizations
• [x] errors on bad developer usage
• [x] allow user to input item size
• [x] fix visual bug while scrolling back up/left
• [x] fix transclusion bug while scrolling down

Right now, the way Ionic handles form input can be better. Ionic 1 had awesome defaults for form inputs with regards to keyboard handling, content scrolling, etc. Ionic 2 needs to be made consistent, and more importantly, work properly for form inputs consistently across all platforms (iOS, Android, Windows).

See this repo for the code example which should be run on devices: https://github.com/dylanvdmerwe/ionic2-formtest

Android:

• [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
• [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
• [x] 3. Touching an area that is not an input dismisses the keyboard.
• [ ] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
• [x] 5. ~~Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.~~ [unable to test as cannot get a keyboard with next and prev buttons]
• [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

iOS:

• [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
• [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
• [x] 3. Touching an area that is not an input dismisses the keyboard.
• [x] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
• [ ] 5. Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.
• [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

Note that this issue has nothing to do with forms or inputs in a slidescomponent. That would be a seperate consistency check to perform.

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 6.1.1 Ionic Framework Version: 2.0.0-beta.4-201604170622 Ionic CLI Version: 2.0.0-beta.24 Ionic App Lib Version: 2.0.0-beta.14 OS: Node Version: v5.7.0

Type: bug

Platform: ios 9 webview

I tried my app on iOS9 Beta and always receive this error, when i click something (e.g. a tab):

angularjs exception: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [] caused by "undefined js stack:

Type: bug

Ionic Version: 2.x

Platform: ios 9 webview

My code has a <ion-toolbar position="bottom"> with a text input inside of it. When I try to type something in there on iOS the whole page gets pushed upwards by the keyboard.

Short description of the problem:

I am developing an app with Ionic2. I have App.ts as the parent, Welcome.ts as a child page and Featured.ts as a child page as well. I have firebase integrated with the app. Rootpage is first set to Welcome.

this.rootPage = Welcome;

Step 1: I click a button on Welcome to authenicate with Google, once onAuth is called, I set this.nav.setRoot(Featured); All works fine up to now. I get to the Featured page which enables a sidemenu with different pages and i am able to navigate to all of them no problem.

Step 2: Featured enables a sidemenu from App.ts/html, in there I have a logout button that calls unauth. Unauth does some Firebase unauth and then:

this.menu.close();    
let nav = this.app.getComponent('nav');    
nav.setRoot(Welcome); 

Step 3: Login again same as in step 1. All is fine up to now.

Step 4: Open side menu, selects any of the pages from the sidemenu, navigation doesn't occur. sidemenu closes but page remain the same, navbar icon button disappear and no navigation occurs. openPage code:

  openPage(page) {
    //1. Loop through and set active attribute to False if it doesn't match.
    //   Set to True if it matches page title
    for(var i = 0; i < this.NavPages.length; i++) {
      if(this.NavPages[i].title == page.title) this.NavPages[i].active = true;
      else this.NavPages[i].active = false;
    }
    for(var i = 0; i < this.ActivityPages.length; i++) {
      if(this.ActivityPages[i].title == page.title) this.ActivityPages[i].active = true;
      else this.ActivityPages[i].active = false;
    }
    for(var i = 0; i < this.PreferencesPages.length; i++) {
      if(this.PreferencesPages[i].title == page.title) this.PreferencesPages[i].active = true;
      else this.PreferencesPages[i].active = false;
    }

    //2. close the menu when clicking a link from the menu
    this.menu.close();
    //3. navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }

What behavior are you expecting?

I am expecting navigation to continue to occur, similar to what happens in step 1.

Steps to reproduce: Steps to reproduce included above.

Code included above.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) No error is being thrown unfortunately. I don't see any erros in the console logs.

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.2 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.2.1 Build version 7C1002 

Thank you.

Ionic version: (check one with "x") [ ] 1.x [x] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Keyboards and input scrolling have long been a challenge for Ionic apps, even going all the way back to Ionic V1. We have recently put a focus on trying to knock out these keyboard issues. The issues we currently think are the highest priority when it comes to keyboards and inputs are the following:

• inputs in alerts are sometimes "wonky"
• Forms that have a lot of inputs sometimes have scrolling issues when focusing inputs lower down on the page
• Switching between inputs, textareas and more sometimes causes "bouncing" and other weird UI issues
• Having an input locked to the bottom of a view does not work correctly on iOS (the keyboard covers the input)

We are currently working on a two-pronged approach of modifying the logic in the framework that handles this stuff (mainly for Android) along with some modifications to the WKWebView plugin to fix these issues for iOS. We are at a point now where we have a branch of the WKWebView plugin that has the fixes for iOS and are ready for our community to start testing this and providing feedback. We have made a Google doc here that has instructions on how this can be tested. We would love to have feedback on these fixes! Feel free to provide feedback as a comment to this issue. Thanks for using Ionic everyone!

I'm updating my app to Ionic 2 rc0 and using import {Storage} from "@ionic/storage"; But it doesn't have query method. It was there in beta 11 to query SQLite. How to query SQLite in rc0?

It appears that changing state increases memory usage with every transition. Here's a simple example. Open your browser's memory profiler and click "Get Clicky".

http://codepen.io/perrygovier/pen/FJgBa

Pages with more stuff on it tend to increase the amount of memory that gets eaten with each transition. Note the number of nodes and listeners never decreases.

On my app that uses a few larger lists, the app can quickly get to 200mb after just a few mins of manual clicking back and forth. I have yet to crash the app due to memory pressure, but it seems more a matter of impatience than something that wouldn't happen with continued use.

I believe this is less an issue with Ionic and more to do with Angular's UI Router, but I thought I'd start here as it's where it popped up for me.

BountySource discussion that appears related

Pull request checklist

Please check if your PR fulfills the following requirements:

• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• [x] Build (npm run build) was run locally and any changes were pushed
• [x] Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• [x] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, renaming)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] Documentation content changes
• [ ] Other (please describe):

What is the current behavior?

Blurring the picker quickly in certain browsers, such as Firefox, can result in an error being thrown in the console:

Uncaught TypeError: activeElement is null

Issue URL: #26559

What is the new behavior?

• No exception is thrown when blurring the picker
• Fixes the type casting for elementFromPoint to include the potential null state

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When changing the time of the datetime, and quickly clicking outside (blur), it gives an error. It can be seen in the Firefox console.

Uncaught TypeError: activeElement is null

if (activeElement.disabled) {
  return;
}

Expected Behavior

expected no error

Steps to Reproduce

In the ionic example itself you can see:

https://ionicframework.com/docs/api/datetime#basic-usage

• Select an hour and quickly press outside.
• Observe the error in the firefox console.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.6 Ionic Framework : @ionic/angular 6.4.1 @angular-devkit/build-angular : 15.0.4 @angular-devkit/schematics : 15.0.4 @angular/cli : 15.0.4 @ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.1 @capacitor/android : 4.6.1 @capacitor/core : 4.6.1 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

NodeJS : v18.12.1 npm : 9.2.0 OS : Windows 10

Additional Information

No response

This converts a multiline comment (like /**...*/) above the RadioGroup component class to be a series of // comments instead. This is done to prevent the comment from being accidentally recognized as a JSDoc comment for the class when a Stencil version incorporating this change is installed: https://github.com/ionic-team/stencil/commit/2e4b1fcdc0b3fd41928d27cf9ee525a15b02d617

Pull request checklist

Please check if your PR fulfills the following requirements:

• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• [x] Build (npm run build) was run locally and any changes were pushed
• [x] Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• [ ] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, renaming)
• [x] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [x] Documentation content changes
• [ ] Other (please describe):

What is the current behavior?

If you build and install Stencil from main you'll see a change like this in components.d.ts:

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 396879d6e9..49758b6613 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2095,6 +2095,12 @@ export namespace Components {
          */
         "value"?: any | null;
     }
+    /**
+     * The Radio Group component mandates that only one radio button
+     * within the group can be selected at any given time. Since `ion-radio`
+     * is a shadow DOM component, it cannot natively perform this behavior
+     * using the `name` attribute.
+     */
     interface IonRadioGroup {
         /**
           * If `true`, the radios can be deselected.
@@ -3653,6 +3659,12 @@ declare global {
         prototype: HTMLIonRadioElement;
         new (): HTMLIonRadioElement;
     };
+    /**
+     * The Radio Group component mandates that only one radio button
+     * within the group can be selected at any given time. Since `ion-radio`
+     * is a shadow DOM component, it cannot natively perform this behavior
+     * using the `name` attribute.
+     */
     interface HTMLIonRadioGroupElement extends Components.IonRadioGroup, HTMLStencilElement {
     }
     var HTMLIonRadioGroupElement: {
@@ -6025,6 +6037,12 @@ declare namespace LocalJSX {
          */
         "value"?: any | null;
     }
+    /**
+     * The Radio Group component mandates that only one radio button
+     * within the group can be selected at any given time. Since `ion-radio`
+     * is a shadow DOM component, it cannot natively perform this behavior
+     * using the `name` attribute.
+     */
     interface IonRadioGroup {
         /**
           * If `true`, the radios can be deselected.
@@ -7283,6 +7301,12 @@ declare module "@stencil/core" {
             "ion-popover": LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
             "ion-progress-bar": LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
             "ion-radio": LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
+            /**
+             * The Radio Group component mandates that only one radio button
+             * within the group can be selected at any given time. Since `ion-radio`
+             * is a shadow DOM component, it cannot natively perform this behavior
+             * using the `name` attribute.
+             */
             "ion-radio-group": LocalJSX.IonRadioGroup & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
             "ion-range": LocalJSX.IonRange & JSXBase.HTMLAttributes<HTMLIonRangeElement>;
             "ion-refresher": LocalJSX.IonRefresher & JSXBase.HTMLAttributes<HTMLIonRefresherElement>;

This is no good! The comment:

https://github.com/ionic-team/ionic-framework/blob/a1580d89e2083ac94569db598e062d07f9083321/core/src/components/radio-group/radio-group.tsx#L7-L20

wasn't intended to be included that way.

What is the new behavior?

This just changes the type of comment used in a comment immediately preceding a component class, to prevent the comment from being inadvertently used as a JSDoc comment.

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

I'm using anchor-links inside my html templates. These Links are using angulars router like this: <a [routerLink]="['./']" [fragment]="'section-id'">go to section</a><section id="section-id">...</section>

My RouterModule configuration looks like this: RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' })

When clicking on the anchor link nothing happens. There is no reaction at all. But when the anchor-link points on an focusable element (like button, input, etc) everything works as expected. Setting tabindex=0 on the section fixes the issue also, but this should not be necessary.

Expected Behavior

Anchor scrolling should always work, regardless of which element is the target. I tested this on a plain Angular project without Ionic and it was scrolling as expected (see reproduction section).

Steps to Reproduce

I prepared two repositories. One with an Ionic starter app including one single page with some content and two anchor links for testing. The second repository includes an plain angular starter app with the same test page. In the Angular project, you can see that it scrolls to the desired element at any time without having to set a tabindex there. In the Ionic project, only the anchor link that points to the section with tabindex=0 works.

It's enough to run the apps via 'ng serve' or 'ionic serve', go to localhost:4200 or localhost:8100 and reduce your browser-window height, so that the page is scrollable. Now click on the anchor-links at top of the page. The Code can be found here: https://github.com/Floscho2402/angular-working-anchor-links https://github.com/Floscho2402/ionic-broken-anchor-links

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.4.1 @angular-devkit/build-angular : 15.0.4 @angular-devkit/schematics : 15.0.4 @angular/cli : 15.0.4 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : not installed @capacitor/core : 3.5.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.1

System:

NodeJS : v16.13.0 (/usr/local/bin/node) npm : 8.1.0 OS : macOS Monterey

Additional Information

No response

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When changing the page, with ionRouter.replace, my animation is not updated on its second call. If I make a custom animation during the replace, then I can't change the animation at the next replace.

Expected Behavior

I would like to swipe left and trigger a page change to the left. Once the page has changed, I would like to drag to the right and trigger an animation to the right.

Steps to Reproduce

My animations :

import { createAnimation } from '@ionic/vue';

export const animationOpacity0to1 = (element, duration) =>
  createAnimation().addElement(element).duration(duration).fromTo('opacity', '0', '1');

export const animationTranslateXOpacity = (element, duration, direction = 'right') =>
  createAnimation()
    .addElement(element)
    .duration(duration)
    .fromTo('opacity', '0', '1')
    .fromTo('transform', 'translateX(0px)', direction === 'right' ? 'translateX(100%)' : 'translateX(-100%)');

My animation builder :

const recupereAnimationBuilder = (direction) => (baseEl, opts) =>
  createAnimation().addAnimation([
    animationOpacity0to1(opts.enteringEl, 300),
    animationTranslateXOpacity(opts.leavingEl, 200, direction),
  ]);

My gesture (call from onIonViewWillEnter):

const activeChangementDePageSwipe = () => {
  createGesture({
    el: swiperZone.value,
    threshold: 150,
    gestureName: 'change-page',
    onMove: (ev) => onSwipePage(ev),
  }).enable();
};

onMove event :

const onSwipePage = (ev) => {
  const nouvelId = ev.deltaX < 0 ? 'id_1' : 'id_1';

  const animation =
    ev.deltaX > 0
      ? recupereAnimationBuilder('right')
      : recupereAnimationBuilder('left');

  router.replace({ name: 'Vetement', params: { id: nouvelId } }, animation);

  return true;
}

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.1.4

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : 4.1.0
   @capacitor/core    : 4.1.0
   @capacitor/ios     : 4.1.0

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.1) : 1.6.0

System:

   NodeJS : v16.17.1 (/opt/homebrew/Cellar/node@16/16.17.1/bin/node)
   npm    : 8.15.0
   OS     : macOS

Additional Information

No response

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

`# npm audit report

json5 <2.2.2 Severity: high Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h fix available via npm audit fix node_modules/tsconfig-paths/node_modules/json5 tsconfig-paths 3.5.0 - 3.9.0 || 3.11.0 - 3.14.1 Depends on vulnerable versions of json5 node_modules/tsconfig-paths

2 high severity vulnerabilities

To address all issues, run: npm audit fix`

Expected Behavior

Getting this error one i create ionic project, or when I try to install a new package, and npm audit fix doesn't make any change.

Steps to Reproduce

Getting this error one i create ionic project, or when I try to install a new package, and npm audit fix doesn't make any change.

Code Reproduction URL

No response

Ionic Info

Ionic info :

Ionic CLI : 6.20.6 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.4.1 @angular-devkit/build-angular : 15.0.4 @angular-devkit/schematics : 15.0.4 @angular/cli : 15.0.4 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.1 @capacitor/android : not installed @capacitor/core : 4.6.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.1

System:

NodeJS : v16.13.0 (/usr/local/bin/node) npm : 8.19.2 OS : macOS

Additional Information

No response