ionic-team/ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic

Ionic

Support for Ionic v2 and v3 ended in January 2019. We strongly recommend upgrading to the latest version of Ionic.

See the Migration from Ionic 3 Guide for migration information.

See Ionic Support Policy for the support status of each version of Ionic.

Visit https://ionicframework.com/docs for the latest Ionic documentation.

---

Ionic is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies.

Ionic is based on Angular and comes with many significant performance, usability, and feature improvements over the past versions.

See the Building Apps with Ionic slides for a quick overview or watch our Crash Course video for a quick walkthrough on how to get started using Ionic.

Getting Started

Start a new project by following our quick Getting Started guide. We would love to hear from you! If you have any feedback or run into issues using our framework, please file an issue on this repository.

Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.

ionic-v3's Issues

Text input initially disabled still show as disabled after being re-enabled via control.enable()

Ionic version:
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x

I'm submitting a ...
[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:
When a form text input is created and disabled, the HTML element receives the "disabled" attribute. If later on the input is re-enabled from the component side, through calling "control.enable()", the HTML element still contains the disabled attribute, making it effectively rendered as disabled (at least by browsers).
Because the form control considers the field to be enabled, but the input is disabled, the field will forever be invalid... If the field is also required, then the form can simply not be validated.

Expected behavior:
After calling enable(), the input be editable and should no longer show as disabled (i.e. it should no longer have the disabled attribute).

Steps to reproduce:

• create ion-input in model-driven way, make form control initially disabled
• check that the underlying input has attribute "disabled=''"
• call formControl.enable()
• check that the form control is indeed enabled, but that the underlying input still shows up as disabled and cannot be edited (it still has attribute "disabled=''")

This can also be tested with an input initially enabled, then disabled then re-enabled. Bug is the same.

Related code:
See http://plnkr.co/edit/C6RYK4?p=preview

Other information:
IMHO, the attribute "disabled" should be omitted/removed if the form control is enabled, because an input is considered disabled as soon as it has the "disabled" attribute, whatever the value of that attribute is. c.f. https://www.w3.org/TR/html5/forms.html#concept-fe-disabled

The problem probably also exists for all other boolean attributes (c.f. https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute ) on HTML input fields, such as "checked", "readOnly", "required", "multiple", "autofocus" etc. But as far as I know, only "required" and "disabled" might be set programmatically through the form control.

This does not seem to be a problem for ion-select (I only have ion-input and ion-select in my application and did not test other inputs), probably due to the fact that its rendering involves more divs than simply the ion-input tag wrapped around the native HTML input field.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : browser 4.1.0 windows 4.4.3
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v7.10.0
    OS         : Windows 8.1
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

Layout error with multiple slider in the same page

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
Layout error with multiple slider in the same page

Expected behavior:
I found an issue when i create two slider in the same page.
When i start the device in portrait mode the layout of two slides is ok while if i rotate the device in landscape mode the first slider doesn't fit properly.

Related code:

<ion-header>

  <ion-navbar>
    <ion-title>trymap</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-grid>
    <ion-slides>
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
  </ion-grid>

  <ion-grid>
    <ion-slides>
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
  </ion-grid>
</ion-content>

Other information:
PORTRAIT MODE IMAGE: https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/a/a/aad8dd7be24b3ed864782fdc079d0225ec4cd8db.png

LANDSCAPE MODE IMAGE:
https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/1/5/1538df5c7f819aa492e9e2569b26de41de401d52.png

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 3.4.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not Installed
OS: Windows 10
Node Version: v6.8.0
Xcode version: Not Installed

Keeping url parameters with deeplinking

Ionic version:
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ...
[ ] bug report
[x] feature request
[ ] support request

Current behavior:
Currently when I have a URL with parameters (e.g. ..?a=hello&b=world) they get cut off by Ionic routing.

http://localhost:8100/#/nav/n4/intro?a=hello&b=world gets changed to http://localhost:8100/#/nav/n4/intro.

These parameters are for FB tracking and such and are necessary on all pages.

Expected behavior:
http://localhost:8100/#/nav/n4/intro?a=hello&b=world should stay like that.

I would like to keep these parameters. Ideally it would be a settings parameter.

Steps to reproduce:
Add ?a=hello&b=world at the end of your URL and do a refresh. The added parameters will be removed.

Related code:

Other information:

Ionic info:

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 6.5.0 
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.1
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.7.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.0 
    ios-sim    : 5.0.8 
    npm        : 3.10.3 

ionic 3 slides unstablity issue

Whenever a new slide is added before current slide
this.slides.slideTo(current_slide_index, 0, false) is used to maintain the slide position

This doesn't work in following cases

1. on load no slide is appended after current slide (bypasses by adding 50 ms timeout)
2. if the view containing slides component is loaded from app.component.ts/notification tap
   this.slides.slideTo function doesn't work at on load

on ionSlideDidChange event prepend & append both work fine maintaining the slide position

Major issue here is Prepending slides works differently onload, onloadfrom app.component.ts, from deeplink & onevent

bug(): virtualscroll does not resize correctly when the platform has resized

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
Grid breaks after resizing

Manual WINDOW resizing: https://youtu.be/X1eoQjR3s34
Automatic BODY resizing: https://youtu.be/zElUNvA6pDY

Expected behavior:
Grid not to break. realistic scenario is screen rotation, iPad multitasking, windows pinning, etc (anything that changes window width)
Manual video is quite disturbing (many weird things), while automatic is better.

Steps to reproduce:
Open the conference app, go to speakers, then run:

let i = 1688;
function r() {
  if (i-- <= 320) return;
  document.body.style.width = i + "px";
  setTimeout(r, 10);
}
r();

Ion toggle button insid ion slides android bug

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
On android device.
When I'm using an ion-toggle inside ion-slides, and clicking on the toggle, then the slide event also fired.
So its just sliding to the next or the previous screen.

Expected behavior:
To stay at the current slide after clicking on ion slide.
Steps to reproduce:

<ion-slides>
			<ion-slide>
				<p>Page 1 </p>
			</ion-slide>
			<ion-slide>
				<ion-toggle [(ngModel)]="toggleMe"></ion-toggle>
				<p>Page 2</p>
			</ion-slide>
			<ion-slide>
				<p>Page 3</p>
			</ion-slide>
		</ion-slides>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

$event.target is unavailable from the (ionBlur) event

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
$event.target is undefined since i have changed the (blur) deprecated event by (ionBlur) event in my template
Expected behavior:
$event.target property should be available

Steps to reproduce:

Related code:

<ion-input (blur)="onBlur($event)"></ion-input>

ion-select: ngModel binding with the object can not work correctly in the promise.

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:

I know if I want to bind a object to the ngModel property of ion-select, I need to use a input property named "compareWith". It works fine if I place the process of the model list initialization in the ionViewDidLoad event. But commonly the data comes from the Web APIs, so I use promise like this:

  ionViewDidLoad() {
    this.http.get("http://xxxxxxx.com").toPromise()
      .then(result => {
        this.setSimpleUserList();
      });
  }

Here is the html code:

    <ion-select [(ngModel)]="simpleSelectedUserList" [compareWith]="compareSimpleUser" multiple="true">
        <ion-option *ngFor="let item of simpleUserList" [value]="item">{{item.Name}} {{item.City}}</ion-option>
    </ion-select>

and the compareWith method:

  compareSimpleUser(e1: UserInfo, e2: UserInfo): boolean {
    return e1 && e2 ? e1.Name === e2.Name : e1 === e2;
  }

The items of the ion-select are rendered correctly, but no item is selected.

Expected behavior:

I think the items in the combSelectedUserList should be correctly selected. But it works wrong. If I move the setCombUserList() method out of the promise, it works fine.

Steps to reproduce:

Here are my steps to reproduce this problem:

1. create a model:

export class UserInfo {
    public Name: string;
    public City: string;
    constructor(name: string, city: string) {
        this.Name = name;
        this.City = city;

    }
}

2. the code of home page:

import { UserInfo } from './../../models/UserInfo';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from "@angular/http";
import 'rxjs/add/operator/toPromise';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public simpleUserList: Array<UserInfo>;
  public simpleSelectedUserList: Array<UserInfo>;

  public
  constructor(public navCtrl: NavController, public http: Http) {
    this.simpleUserList = new Array<UserInfo>();
    this.simpleSelectedUserList = new Array<UserInfo>();
  }


  ionViewDidLoad() {
    this.http.get("http://xxxxx.com").toPromise()
      .then(result => {
        //If this method is moved out, the ion-select works.
        this.setSimpleUserList();
      });
  }

 

  setSimpleUserList() {
    // mock data from the Web APIs
    this.simpleUserList.push(new UserInfo("Jim", "Beijing"));
    this.simpleUserList.push(new UserInfo("Andy", "Qingdao"));
    this.simpleUserList.push(new UserInfo("Cindy", "Shanghai"));
    this.simpleUserList.push(new UserInfo("Jack", "Guangzhou"));
    this.simpleUserList.push(new UserInfo("Tom", "Shenzhen"));
    this.simpleUserList.push(new UserInfo("Lily", "Qingdao"));
    this.simpleUserList.push(new UserInfo("Anderson", "Beijing"));

    this.simpleSelectedUserList.push(new UserInfo("Andy", "Qingdao"));
    this.simpleSelectedUserList.push(new UserInfo("Cindy", "Shanghai"));
    this.simpleSelectedUserList.push(new UserInfo("Jack", "Guangzhou"));
    this.simpleSelectedUserList.push(new UserInfo("Tom", "Shenzhen"));

  }
  compareSimpleUser(e1: UserInfo, e2: UserInfo): boolean {
    return e1 && e2 ? e1.Name === e2.Name : e1 === e2;
  }

}

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v7.10.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.2.0

Thank you very much.

(input) event fired twice on ion-input

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
(input) event on ion-input is fired twice.

Expected behavior:
The event should only be fired once.

Steps to reproduce:
Just bind a method to the (input) event, console.log something in it and type something in the ion-input.

Other information:
I am quite sure it is a bug caused by the recent updates, it was working fine in 3.5.0 and only appeared when I updated Ionic to the current version (3.5.3)

Nested components with ion-checkbox inside ion-item-sliding are not showing

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

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
A nested component, containing ion-checkbox (or other form inputs) inside ion-item-sliding is not showing.

I've created a small repo to reproduce the bug, on the forum the advice was to add additional ion-item, so inside check-comp there it is, but there are 2 ion-reorder elements when I add it, inside check2-comp there is no additional ion-item and it doesn't show up.

Expected behavior:
It would be great to be able to use any nested components inside ion-item-sliding.

Steps to reproduce:
here it is deployed:

https://sergiob.github.io/IonicBugNestedComponent/

Related code:
And here is the repository:
https://github.com/SergioB/IonicBugNestedComponent

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages:

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : browser 4.1.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.0 
    ios-sim    : 5.0.13 
    Node       : v6.9.4
    npm        : 3.10.10 
    OS         : macOS Sierra
    Xcode      : Xcode 8.2.1 Build version 8C1002 

DeepLinker generated URL names with tabbed pages causes double /

Starting to use DeepLinker. Ran into this issue. Details simplified for brevity's sake:

I have a tab called 'users'. Here it is:

<ion-tabs class="tabs" [selectedIndex]="selectedTabIndex" tabsHighlight="true" tabsPlacement="top">
  <ion-tab [root]="UsersPageRoot" (ionSelect)="selectTab(0, UsersPageRoot)" tabUrlPath="" tabIcon="desktop"></ion-tab>
</ion-tabs>

I want the URL via DeepLinker to be localhost:8100/#/users

However, the DeepLinker will take that, inspect the tabUrlPath value, and add an extra /

The URL will be: localhost:8100/#//users

I can put a word in the tabUrlPath - let's try the word 'account'.

<ion-tabs class="tabs" [selectedIndex]="selectedTabIndex" tabsHighlight="true" tabsPlacement="top">
  <ion-tab [root]="UsersPageRoot" (ionSelect)="selectTab(0, UsersPageRoot)" tabUrlPath="account" tabIcon="desktop"></ion-tab>
</ion-tabs>

The URL will be: localhost:8100/#/account/users

So the problem is, if I put an empty string in tabUrlPath, the DeepLinker code should factor that in when generating the URL slug. The same problem happens when using the tabTitle attribute. A blank title yields an extra slash.

I hope someone can fix this. I'm pretty sure the code fix will be somewhere in here: https://github.com/driftyco/ionic/blob/504e6e0440032d5813566def22a57f0e410bc2c6/src/navigation/deep-linker.ts

Ion-Select does not trigger ng2-translate pipe when changing language after selection (With a bonus GIF example!)

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
A picture is worth a thousand words, a gif is worth more:
http://g.recordit.co/p7l0KyysW0.gif

But here's a summary: Using ion-select, when first selecting a value, then changing the language, the selectedValue requires a click on the ion-select component for the value to update in the background.

What can I do to make it update without having to manually set the selectedValue?

This is the template:

<ion-item>
     <ion-label>{{ inputArray['ethnicity_id'].label | translate }}</ion-label>
     <ion-select type="text" formControlName="ethnicity_id" (blur)="onInputChange(inputArray['ethnicity_id'])">
            <ion-option *ngFor="let ethnicity of local.ethnicities" [value]="ethnicity.id">{{ ethnicity.name | translate }}</ion-option>
     </ion-select>
</ion-item>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.8
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : none
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.9.1
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13
    npm        : 4.1.2

(input) event fired twice on ion-input

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
(input) event on ion-input is fired twice.

Expected behavior:
The event should only be fired once.

Steps to reproduce:
Just bind a method to the (input) event, console.log something in it and type something in the ion-input.

Other information:
I am quite sure it is a bug caused by the recent updates, it was working fine in 3.5.0 and only appeared when I updated Ionic to the current version (3.5.3)

iPhone X statusbar overlays header shared component

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

I am trying to use a shared header component for certain pages and when I use this, I get the overlaying problem.

See picture:
https://discourse-cdn-sjc1.com/ionicframework/uploads/default/original/3X/4/9/49c5fce6253b768661f78e0f2c8fce7aaf52539e.png

Expected behavior:

The status bar would not overlay the header and positioned correctly.

See picture:
https://discourse-cdn-sjc1.com/ionicframework/uploads/default/original/3X/a/8/a85eea81796c6cb668d4b17e8b66d1b871d40bb6.png

Steps to reproduce:

1. Create blank starter project "ionic start myApp tabs"

2. Create a shared header component

shared-header.component.html

<ion-navbar>
    <ion-title>{{title}}</ion-title>
</ion-navbar>

shared-header.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'shared-header',
    templateUrl: 'shared-header.component.html'
})

export class SharedHeaderComponent {

    @Input('title') title: string;
    constructor() { }
}

2. Include shared header component in one of the page headers:

home.page.html

<ion-header>
  <shared-header title="Home - shared header"></shared-header>
</ion-header>

3. Emulate app in Xcode running on iPhone X will result in:
   https://discourse-cdn-sjc1.com/ionicframework/uploads/default/original/3X/4/9/49c5fce6253b768661f78e0f2c8fce7aaf52539e.png

NOTE My index.html does have <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   ionic (Ionic CLI)  : 4.0.6 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 2.0.0
   NodeJS            : v8.11.3 (/usr/local/bin/node)
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

No statusbar padding-top on Android

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:

Ion Header on Android without padding-top for Status Bar when setting
StatusBarOverlaysWebView

Expected behavior:

20px padding-top on header bar

Steps to reproduce:

Related code:

<ion-header>

  <ion-navbar>
  	<button ion-button icon-only menuToggle>
		<ion-icon name="menu"></ion-icon>
	</button>
    <ion-title>Page Title</ion-title>
  </ion-navbar>

</ion-header>

Other information:

Tested on:
Tablet LG V400 Android 5.0.2
Phone Samsung SM A510M Android 6.0.1

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.5.0
    OS         : OS X El Capitan
    Xcode      : Xcode 8.1 Build version 8B62 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 3.10.3 

package.json

{
    "name": "app",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/animations": "4.1.3",
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/action-sheet": "^3.12.1",
        "@ionic-native/android-fingerprint-auth": "^3.12.1",
        "@ionic-native/badge": "^3.12.1",
        "@ionic-native/camera": "^3.12.1",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/device": "^3.12.1",
        "@ionic-native/file": "^3.12.1",
        "@ionic-native/keyboard": "^3.12.1",
        "@ionic-native/network": "^3.12.1",
        "@ionic-native/splash-screen": "^3.12.1",
        "@ionic-native/sqlite": "^3.12.1",
        "@ionic-native/sqlite-porter": "^3.12.1",
        "@ionic-native/status-bar": "^3.12.1",
        "@ionic-native/touch-id": "^3.12.1",
        "@ionic-native/transfer": "^3.12.1",
        "@ionic/storage": "2.0.1",
        "angular2-text-mask": "^8.0.2",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.3.1",
        "cordova-plugin-actionsheet": "^2.3.3",
        "cordova-plugin-android-fingerprint-auth": "^1.3.1",
        "cordova-plugin-app-event": "^1.2.0",
        "cordova-plugin-badge": "^0.8.1",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-file": "^4.3.3",
        "cordova-plugin-file-transfer": "^1.6.3",
        "cordova-plugin-keyboard": "^1.1.5",
        "cordova-plugin-network-information": "^1.3.3",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-touch-id": "^3.2.0",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-sqlite-storage": "^2.0.4",
        "font-awesome": "^4.7.0",
        "ionic-angular": "3.5.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "lodash": "^4.17.4",
        "moment": "^2.18.1",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "ts-md5": "^1.2.0",
        "uk.co.workingedge.cordova.plugin.sqliteporter": "^0.1.7",
        "web-animations-js": "^2.2.5",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.12",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "typescript": "2.3.4"
    },
    "description": "App Seguro: O seu restaurante seguro!",
    "config": {
        "ionic_copy": "./scripts/copy-custom-libs.js"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-actionsheet": {},
            "cordova-plugin-android-fingerprint-auth": {},
            "cordova-plugin-app-event": {},
            "cordova-plugin-badge": {},
            "cordova-plugin-camera": {},
            "cordova-plugin-compat": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-file": {},
            "cordova-plugin-file-transfer": {},
            "cordova-plugin-network-information": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-touch-id": {},
            "cordova-plugin-whitelist": {},
            "cordova-sqlite-storage": {},
            "cordova-plugin-keyboard": {},
            "uk.co.workingedge.cordova.plugin.sqliteporter": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

Slides not working in --prod build with Crosswalk webview

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 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:

Slides are not working as expected. Swiping to a slide for example does not work properly, the transition stops mid way when you take the finger off the screen. Also the sliding is not "limited", so you can swipe into infinity after you have swiped over all slides(it works as expected in non-prod build). Also the pager is not showing.

Expected behavior:

"Normal" slides

Steps to reproduce:

Create a new project ionic start crosswalk-test blank
Add platform ionic cordova platform add android

Add slides to home page <ion-slides pager="true" paginationType="bullets"> <ion-slide> <h1>Slide 1</h1> </ion-slide> <ion-slide> <h1>Slide 2</h1> </ion-slide> <ion-slide> <h1>Slide 3</h1> </ion-slide> </ion-slides>
Add crosswalk ionic cordova plugin add [email protected] --save

And finally build an apk ionic cordova build --prod

Other information:
Note that this happens only when using the --prod flag. If I run the build process without it, the slides work as expected.
Tested it with Android 4.3, 5.1 and 6.0 and happens on all of them

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.0.0
    Cordova CLI      : 7.0.0
    Ionic CLI        : 3.0.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.2.1
    @ionic/cli-plugin-ionic-angular : 1.2.0
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.10.2
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

Keyboard issues (round 2)

• setFocus programmatically make screen jump ionic-team/ionic-framework#10257
• add common test for textarea + improve test suite to cover ngModelChange
  ionic-team/ionic-framework#9434
• tabIndex duplicated ionic-team/ionic-framework#7178 (fix: ionic-team/ionic-framework#12043 )
• ion-input inside slider ionic-team/ionic-framework#10183
• alert padding when it has text-inputs ionic-team/ionic-framework#10187 (fix: new keyboard plugin)

The virtualScroll does not work when using the segments

This code doesn't work...the ion-item isn't showed by the ionic framework.

Code to reproduce :

<ion-content>
    <div [ngSwitch]="curSegment">
        <ion-list [virtualScroll]="items" [approxItemHeight]=" '100px' " *ngSwitchCase="'test'">
            <ion-item *virtualItem="let item" text-wrap>
                <ion-avatar item-left>
                       <ion-img [src]="item.avatar"></ion-img>
                </ion-avatar>
                <h2>{{item.name}}</h2>
            </ion-item>
        </ion-list>
        ...
</ion-content>

If the "ion-list" is before the <div [ngSwitch]>, then is showed.
Ionic 2b10 used.

Ionic DateTime Picker Display Issue

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
when we display full date time into ionic datetime picker, month names not show with full string and tt in time too.

Expected behavior:
show all strings

DateTime pickerFormat dynamic update issue

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:

Trying to change the displayFormat based on a different setting does not immediately update the view. Snippet:

                    <ion-toggle checked="false" [(ngModel)]="model.all_day" name="all_day" #allDay="ngModel"></ion-toggle>
                    <ion-datetime
                            [displayFormat]="'DD/MM/YYYY' + (model.all_day ? '' : ' HH:mm')" ...>

The display's format is only updated when you click on the element. I guess it is not watching the displayFormat for changes.

ion-tab navigation bar out of sync with page display when using deeplinks on mobile device

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
The tab navigation buttons do not correspond to the page being displayed when the app is opened through a deeplink. Opening the app through regular means (dashboard, xcode, terminal, etc) does not exhibit this behaviour and the tabs are working as expected.

But when using deeplinks to launch the app, if I open myapp://host/about or any other matched routes, the app will be opened to the foreground with the correct selected tab highlighted in the navigation bar(see screenshot below)

However as soon as I click on other tabs using the navigation bar, the highlighted navigation tab does not update to match the displaying tab page (see screenshot: Current selectedTab/displayed page = ContactPage. The navigation bar shows 'AboutPage' is selected instead)

When it does update, it seems the tab navigation is lagging behind 1 click (see screenshot: Current displayed page = HomePage. The navigation shows 'ContactPage' is selected instead)

After two clicks, the navigation tabs stop updating all together, and is stuck on whichever tab that it last updated to.

Expected behavior:
The navigation tab bar should highlight the selected tab aka the displayed page.

Steps to reproduce:

1. Clone bug demo repo here.
2. npm install
3. ionic build ios/android --debug (I'm using ionic CLI v. 2.2.3. Use corresponding CLI build command if using a different version of ionic CLI)
4. Open link: myapp://example.com/about and launch demo app.
5. Click on navigation buttons to push a different tab to view.

Related code:

• Related source code is located on Github:

1. app.component.ts
2. app.html
3. tabs.ts
4. tabs.html

Ionic info::

Cordova CLI: 6.5.0
Ionic Framework Version: 3.4.2
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.3 Build version 8E3004b

css for ion-tab does not work with i18n properly

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[x] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
i18n string is there in source:

<span class="tab-button-text">Hello</span>

But it is chew up by improper css definition.

Expected behavior:

Well, show it properly.

Steps to reproduce:

1. Get OOTB Tabs template
2. Do ionic i18n by following http://ionicframework.com/docs/developer-resources/ng2-translate/
3. Do def below:

  <ion-tab [root]="tab1Root" [tabTitle]="( 'HELLO' | translate )" tabIcon="home"></ion-tab>

3 run ionic-app-scripts serve

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

Refresher and lists with click events don't play well with each other

Ionic version:
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ...
[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:
I have a ion-list with buttons and (click) and an ion-refresher. Pulling down to refresh just a little and pulling back up results in the list item being tapped. Releasing the tap the click event is fired.

Expected behavior:
When pulling down the refresher there should be no tap event on the list item.

Steps to reproduce:
Create a list with items and (click), add a refresher to the ion-content.

Other information:
I made a short video: http://sharedby.manuel-heidrich.com/kjwTe/2SagyfWV

Ionic info:

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : not installed
    npm        : 5.0.3

cannot read property 'getattribute

Hello,
i am getting 'cannot read property 'getattribute' of null' error when i use zoom attribute in ion-slides.please help out this.

iOS bounce flicker glitch

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

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
When bouncing a page there's some strange flickering (see following video).
I haven't found out yet what exactly on this page causes the flickering. But my current guess is, that the input fields with placeholders may be the cause.

This glitch does not appear in a PC browser (Safari for Mac e.g.). This only can be observed when you run the app on an iPhone (in my case iPhone 6)

In case you can't see the gif, I've additionally uploaded video right here:
https://cl.ly/3K0X2T3X0z1l

Expected behavior:
Well, the view should bounce without the strange flickering.

Steps to reproduce:

1. Clone the following repo:
   https://github.com/tobiasmuecksch/ionic3-overflow-flicker-bug
2. npm install
3. ionic cordova build ios --prod
4. Run it on an iPhone
5. Bounce at will

PLEASE
do not give me advice like: "Just add the no-bounce parameter", because it does only suppress the bug and not fix it.

Alert control is not dismissing after opening from the action sheet button event in Ionic3.5

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
I have an action sheet into my project and opening an alert control by selecting the action sheet button. the alert box open but while clicking the alert button then alert control is not dismissing/closing itself. it always stays on the page.

Expected behavior:
The alert control should be dismissed/close after pressing the Agree/Disagree button.

Steps to reproduce:

1. add an action sheet into one of ionic page
2. add the alert control into that page.
3. open an alert control using action sheet button.
4. try to close the alert control using one of agree disagree button

Related code:

presentActionSheet() {
     let self = this;
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Modify your album',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
            self.showConfirm();
          }
        },{
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
            self.showConfirm();
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
showConfirm() {
  
    let confirm = this.alertCtrl.create({
      title: 'Use this lightsaber?',
      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
      buttons: [
        {
          text: 'Disagree',
          handler: () => {
            console.log('Disagree clicked');
            confirm.dismiss();
          }
        },
        {
          text: 'Agree',
          handler: () => {
            console.log('Agree clicked');
             confirm.dismiss();
          }
        }
      ]
    });
    confirm.present();
  }

https://drive.google.com/open?id=0B6aMbU1-vMowSVRvU0JQdk1SZ0U
https://drive.google.com/open?id=0B6aMbU1-vMowRjJQQ0M0R0JtUEU

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 6.5.0 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.12
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 browser 4.1.0 ios 4.1.1
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v7.0.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.1 Build version 8E1000a 
ios-deploy : 1.9.1 
ios-sim    : 5.0.10 
npm        : 4.6.1 

ionic 3 slides unstablity issue

Whenever a new slide is added before current slide
this.slides.slideTo(current_slide_index, 0, false) is used to maintain the slide position

This doesn't work in following cases

1. on load no slide is appended after current slide (bypasses by adding 50 ms timeout)
2. if the view containing slides component is loaded from app.component.ts/notification tap
   this.slides.slideTo function doesn't work at on load

on ionSlideDidChange event prepend & append both work fine maintaining the slide position

Major issue here is Prepending slides works differently onload, onloadfrom app.component.ts, from deeplink & onevent

Ion Footer with Ion Input not compatible

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

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

Need to be test it in iOS or Android phone.
If you have an input or ion input inside ion-footer and this input has a large text as value or ngModel when you tap it, the cursor won't go to the end of the input and if you are in an iOS device neither has scroll or navigation inside the input.

Expected behavior:

When tapping the input inside of an ion-footer the cursor will go to the end of the text and will also have scroll or navigation inside the input so I can edit any part of the text.

Steps to reproduce:

Here is a simple project to reproduce the bugs in a built project in an iOS device or Android:
GitHub Project (https://github.com/alexcarrasco93/ionFooterBug)

Virtual Scroll Scrolling Issue

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 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:
I am using virtualScroll with ion-infinite-scroll. After recent update. When I scroll the list and reach to the bottom, ion-infinite-scroll causes next items to be fetched from server and append to the list.

Previously appending of items was smooth, after recent update when new items are appended to the list, it gives a flickering effect due to unnecessary automatic scroll either upward or downward i.e. if I set approxItemHeight to 101px it scroll currently displayed item little downward and when I set it to 100px it takes currently displayed item upward by few pixels.

No DeepLinker config in documentation

Here is DeepLinker documentation for Ionic 2.0.0: https://ionicframework.com/docs/2.0.0/api/navigation/DeepLinker/

There is no DeepLinker configuration in Ionic latest documentation: https://ionicframework.com/docs/api/

DeepLinker works in Ionic latest version (3.9.2)

Text input initially disabled still show as disabled after being re-enabled via control.enable()

Ionic version:
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x

I'm submitting a ...
[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:
When a form text input is created and disabled, the HTML element receives the "disabled" attribute. If later on the input is re-enabled from the component side, through calling "control.enable()", the HTML element still contains the disabled attribute, making it effectively rendered as disabled (at least by browsers).
Because the form control considers the field to be enabled, but the input is disabled, the field will forever be invalid... If the field is also required, then the form can simply not be validated.

Expected behavior:
After calling enable(), the input be editable and should no longer show as disabled (i.e. it should no longer have the disabled attribute).

Steps to reproduce:

• create ion-input in model-driven way, make form control initially disabled
• check that the underlying input has attribute "disabled=''"
• call formControl.enable()
• check that the form control is indeed enabled, but that the underlying input still shows up as disabled and cannot be edited (it still has attribute "disabled=''")

This can also be tested with an input initially enabled, then disabled then re-enabled. Bug is the same.

Related code:
See http://plnkr.co/edit/C6RYK4?p=preview

Other information:
IMHO, the attribute "disabled" should be omitted/removed if the form control is enabled, because an input is considered disabled as soon as it has the "disabled" attribute, whatever the value of that attribute is. c.f. https://www.w3.org/TR/html5/forms.html#concept-fe-disabled

The problem probably also exists for all other boolean attributes (c.f. https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute ) on HTML input fields, such as "checked", "readOnly", "required", "multiple", "autofocus" etc. But as far as I know, only "required" and "disabled" might be set programmatically through the form control.

This does not seem to be a problem for ion-select (I only have ion-input and ion-select in my application and did not test other inputs), probably due to the fact that its rendering involves more divs than simply the ion-input tag wrapped around the native HTML input field.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : browser 4.1.0 windows 4.4.3
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v7.10.0
    OS         : Windows 8.1
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

RTL for item-sliding api component not supporting

Ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.4.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
OS: Windows 10
Node Version: v6.9.2

I was trying to implement RTL (Arabic language) in Ionic (v3.4.2),
I faced few issues in few pages, but I fixed with the help of CSS, But this API component is creating big trouble, what could be the fix for this ?
Link for the above mentioned ionic component.
https://ionicframework.com/docs/api/components/item/ItemSliding/

Tab [selectedIndex] with assigned variable has no effect

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request

Current behavior:

When using selectedIndex as described in the documentation with an assigned variable, the tabs do not change. For example, with a variable named index:

<ion-tabs [selectedIndex]="index" #mainTabs>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="list"></ion-tab>
</ion-tabs>

…when the index variable changes from 0 to 1, the tabs are not updated.

Expected behavior:

The second tab should be selected.

Steps to reproduce:
I’ve created an example repository using the Tabs template, using an observable for the index variable that selectedIndex is set to:

https://github.com/christopherstyles/ionic-tab-selected-index-example

When the app first starts (on the 1st tab, the Home screen), click on the FAB, then on “New Post”. The action on the button updates the index variable, which should in turn update the tabs. You can see that the index is set correctly because it is echoed out into a <ion-item>index: {{index}}</ion-item> element in the tabs view.

Other information:

N/A

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.1.1
    Ionic Framework                 : ionic-angular 3.4.1

System:

    Node       : v6.9.2
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.8.2
    ios-sim    : 5.0.3
    npm        : 3.10.9

@IonicPage Default histroy page having parameters

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ x] 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:

I want to set default history as 'ListPage' to my DetailPage. But the problem is that the List page is taking 'city' as parameter. so how could i set this page as defualt histroy page.

if I do this in ListPage

@IonicPage({
  name: 'List',
  segment: ':city/offers'
})

and do this in DetailPage

@IonicPage({
  segment: 'details/:offerId',
  defaultHistory: ['List']
})

when i reload (or open by the url) the detail page and click on the back button, the browser is showing url as
http://localhost:8100/#/nav/n4/:city/offers

Expected behavior:

http://localhost:8100/#/nav/n4/:city/offers
in above url, how can i pass the city value. i can not change the url structure as per SEO guidelines.

FYI i have the city value stored in my cookies for any alternate solution to set the city in above url.

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

  @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.0.0
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.5.0

System:

    Node : v6.10.1
    npm  : 3.10.10
    OS   : Windows 7

Ion-List 'underlapping' ion-tabs and ion-nav

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x
[] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

In my home page i have a ion-list, sometime(yes, not every time), when i select a object in this list or go to the register page, through the "this.app.getRootNav().push("ClienteCadastroPage")", and select a input in registerPage ou descriptionPage, and use "this.navCtrl.pop();" to comeback, my ion-list is under the Ion-Tab and Ion-nav

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

(input) event fired twice on ion-input

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
(input) event on ion-input is fired twice.

Expected behavior:
The event should only be fired once.

Steps to reproduce:
Just bind a method to the (input) event, console.log something in it and type something in the ion-input.

Other information:
I am quite sure it is a bug caused by the recent updates, it was working fine in 3.5.0 and only appeared when I updated Ionic to the current version (3.5.3)

bug(navbar): hides on ios when keyboard open

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:

There is a toolbar within an ion-header. When an ion-textarea is opened on an iOS device and simulator (using wkwebview plugin), the screen scrolls up as expected. However the ion-navbar scrolls out of view as well which is incorrect.

Expected behavior:
The ion-navbar should never be scrolled out of view!

Related code:

<ion-header>
  <ion-navbar>
    <ion-title>Waypoint Details</ion-title>
 <ion-buttons end showWhen="ios"><button color="primary" ion-button clear  (click)="save()">Done</button></ion-buttons>
  </ion-navbar>
  <ion-toolbar>
    <ion-input style="margin-bottom: 8px" readonly text-wrap [value]="waypointItem.address"></ion-input>
  </ion-toolbar>
</ion-header>

...

<ion-list>
    <ion-item>
      <ion-label stacked>Contact Name</ion-label>
      <ion-input type="text" placeholder="Enter the contact's name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>Contact Number</ion-label>
      <ion-input type="tel" placeholder="Enter the contact's number"></ion-input>
    </ion-item>
    <ion-item>
      <button><ion-icon name="help-circle"></ion-icon></button>
      <ion-label stacked tappable>Driver Instructions</ion-label>
      <ion-textarea autocapitalize="sentences" autocorrect="true" autocomplete='on' placeholder="Please enter some instructions for our driver. Press the help button for some examples."></ion-textarea>
    </ion-item>
  </ion-list>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.10.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 6.0.0
    npm        : 5.3.0

ion-slides with dir="rtl" misbehaves when lockSwipeToNext is called

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
RTL: http://plnkr.co/edit/Fg8xB3ThH36Dd0ReFdj9?p=preview

Expected behavior:
LTR: http://plnkr.co/edit/gro4Bmvx2uBo02fqgEVM?p=preview

Steps to reproduce:
When you swipe to the last slide (checked by slider.isEnd()), then you shouldn't be able to swipe further. This is accomplished by calling slider.lockSwipeToNext(true). This is working as expected in the left-to-right version. But when you set <ion-slides dir="rtl"> and slider.lockSwipeToNext(true) is called, the slider behaves like freeMode is set to true until you swipe back to the first slide.

Additional info: I also checked this with [email protected]

VirtualScroll component is not showing when use it inside a directive

Short description of the problem:

I have created a new component items-list, inside that component I use virtualScroll component,
when I pass an array to items-list component

<items-list [items]="items"></items-list>

it shows nothing on the page, but when I insert some characters before virtualScroll component - it works well...

some chars...
<ion-list [virtualScroll]="items">
  <button *virtualItem="let item" ion-item>
    {{item}}
  </button>
</ion-list>

What behavior are you expecting?

virtualScroll component must show up on the page

I use Ionic Framework Version: 2.0.0-beta.8

Steps to reproduce:

1. Create a new component
2. In the view of created component add virtualScroll
3. Use created component on a page and pass to it a list of data which will be shown by virtualScroll
4. see that there is nothing on the page
5. add some characters before virtualScroll component
6. see that the list appears on the page

This is Plunker that shows an example of the issue

http://plnkr.co/edit/ONionfMEuPb9tY8fAK5e?p=preview

Naming a tabs component different than "tabs" leads to issue in case of lazy-loaded roots

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When switching between two ion-tabs instances and the root pages are lazy loaded the root page of the tab at the selected index does not get set, the page from the previous tabs component stays on the nav-stack.
While putting the repo together I noticed that the underlying problem is the naming of the ts-class (and module) of the tabs component. Naming it tabs.ts works just fine but re-naming it to e.g. TabsContainer.ts creates the problem. I guess this is because the name is used for generating the DeepLink config/the URL.

With tabs.ts after switching the tabs for the first time the the URL is:
http://localhost:8100/#/tabs/contact/contact
which is correct.

With TabsContainer.ts after switching the tabs for the first time the URL is:
http://localhost:8100/#/TabsContainer/contact/about
which is incorrect.

Expected behavior:
Naming a tabs component differnt than "tabs" should not cause problems with lazy loading/deep link config.

Steps to reproduce:

• Clone the example repo
• Run npm install
• Run ionic serve
• Watch tabs/pages/url (tabs are switched ever 7.5 seconds)

Related code:
Example github repo here.

Other information:

• As suggested by @kensodemann here this can be worked around by explicitly naming the segment of the tabs component tabs in the @IonicPage decorator.
• It works with eagerly loaded tab roots
• The issue occurs since Ionic 3.6.0 (nav url refactoring)

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages:
    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:
    cordova (Cordova CLI) : 7.1.0

local packages:
    @ionic/app-scripts : 3.0.0-201710161925
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1-201710181432

System:
    Node : v6.11.0
    npm  : 5.1.0
    OS   : Windows 10

Misc:
    backend : pro

bug(): virtualscroll does not resize correctly when the platform has resized

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
Grid breaks after resizing

Manual WINDOW resizing: https://youtu.be/X1eoQjR3s34
Automatic BODY resizing: https://youtu.be/zElUNvA6pDY

Expected behavior:
Grid not to break. realistic scenario is screen rotation, iPad multitasking, windows pinning, etc (anything that changes window width)
Manual video is quite disturbing (many weird things), while automatic is better.

Steps to reproduce:
Open the conference app, go to speakers, then run:

let i = 1688;
function r() {
  if (i-- <= 320) return;
  document.body.style.width = i + "px";
  setTimeout(r, 10);
}
r();

ion-slides: click event not firing for the first slide

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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/

ion-slides with the following setup:

<ion-slides pager [autoplay]="2000" [loop]="true"> <ion-slide tappable (click)="handleClick()"> </ion-slide> </ion-slides>

Let it loop once. After that, try to click the first slide. The event handler won't execute. Once you stop the autoplay but swiping it manually, clicking the first slide works. The issue is only with the first slide, after the first loop.

Tested with Ionic 3.4.2 on Android and iOS.

Padding between tabs and content

Ionic version:
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ...
[x] bug report
[ ] feature request

Current behavior:
Platform: iOS
When using ion-tabs with tabsPlacement="top" excess padding-top appeares on "ion-content > .scroll-content"

Expected behavior:
There is no additional padding between tabs and content.

Steps to reproduce:

1. Start application using "ionic start myApp tabs"
2. Set tabsPlacement="top" for <ion-tabs> in myApp/src/pages/tabs/tabs.html
3. Remove <ion-header>...</ion-header> from tabs pages. For example in myApp/src/pages/home/home.html
4. ionic cordova platform add browser
5. ionic cordova run browser
6. You will see padding between tabs and content like on screenshoot which is placed above

Ionic info:

cli packages:
    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0
global packages:
    cordova (Cordova CLI) : 7.1.0
local packages:
    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2
System:
    Node : v6.11.4
    npm  : 3.10.10
    OS   : Windows 10

Text input initially disabled still show as disabled after being re-enabled via control.enable()

Ionic version:
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x

I'm submitting a ...
[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:
When a form text input is created and disabled, the HTML element receives the "disabled" attribute. If later on the input is re-enabled from the component side, through calling "control.enable()", the HTML element still contains the disabled attribute, making it effectively rendered as disabled (at least by browsers).
Because the form control considers the field to be enabled, but the input is disabled, the field will forever be invalid... If the field is also required, then the form can simply not be validated.

Expected behavior:
After calling enable(), the input be editable and should no longer show as disabled (i.e. it should no longer have the disabled attribute).

Steps to reproduce:

• create ion-input in model-driven way, make form control initially disabled
• check that the underlying input has attribute "disabled=''"
• call formControl.enable()
• check that the form control is indeed enabled, but that the underlying input still shows up as disabled and cannot be edited (it still has attribute "disabled=''")

This can also be tested with an input initially enabled, then disabled then re-enabled. Bug is the same.

Related code:
See http://plnkr.co/edit/C6RYK4?p=preview

Other information:
IMHO, the attribute "disabled" should be omitted/removed if the form control is enabled, because an input is considered disabled as soon as it has the "disabled" attribute, whatever the value of that attribute is. c.f. https://www.w3.org/TR/html5/forms.html#concept-fe-disabled

The problem probably also exists for all other boolean attributes (c.f. https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute ) on HTML input fields, such as "checked", "readOnly", "required", "multiple", "autofocus" etc. But as far as I know, only "required" and "disabled" might be set programmatically through the form control.

This does not seem to be a problem for ion-select (I only have ion-input and ion-select in my application and did not test other inputs), probably due to the fact that its rendering involves more divs than simply the ion-input tag wrapped around the native HTML input field.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : browser 4.1.0 windows 4.4.3
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v7.10.0
    OS         : Windows 8.1
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

NavGuards with ionoic-angular 3.5.0 has a breaking change

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
We are testing your nightly lazy loading implementation which by the way works much better, a big thx to Dan. 👍 On our IonPage's we use the ionViewCanEnter livecycle to check if user can access the Page, if not we will redirect them to a FORBIDDEN PAGE.

This is our simple example, nothing magically

@IonicPage({
    priority: 'off'
})
@Component({
    selector: 'pageForwardToPage4',
    templateUrl: 'pageForwardToPage4.html'
})
export class PageForwardToPage4 {


    constructor(public navCtrl: NavController) {
        console.log('PageForwardToPage4#constructor');
    }


    ionViewCanEnter(): Promise<any> {
        console.log('PageForwardToPage4#ionViewCanEnter');

        return new Promise((resolve, reject) => {
                this.navCtrl.setRoot('Page4');

                console.log('PageForwardToPage4#ionViewCanEnter DO NOT ENTER');
                
                
                // THIS DOES WORK page is redirct to Page4
                resolve();


                // THIS DOES NOT WORK, page is will NOT be redirect to Page4 and remain on the same page
                // reject()
        }); 
    }

}

Anytime we get into PageForwardToPage4 we will redirect user to Page4 which should be our ForbiddenPage (this are only dummy names) 😄

Expected behavior:
In older version we used before we reject the promise for the guard, and the redirection was always working. Now if we reject the promise the setRoot doesn't work, so we have to resolve the promise, so user theoretically can access page and will be redirect in the same moment to new page.

So IMO there are three possibilities:

1. this is a bug and should not by design.
2. there is a better way redirect user to forbidden page and also guarantee user can not access the page
3. this is by design, but IMO it's a little bit confusing and as wrote I think this behavior changed after refactoring lazy loading, but this would be a breaking change

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.8
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.4.2-201706271925

System:

    Node       : v6.11.0
    OS         : Linux 4.10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.4 

Ion-Slides Coverflow Warping

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
Using coverflow and infinite looping, the slides begin warping as it a nears the end of the set (see gif).

https://imgur.com/lYCQdej

Expected behavior:
Slides do not warp.

Related code:

<ion-slides #slider class="coming-soon-posters" >

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/star-trek-movie-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/seven-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/fight-club-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/silence-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/ghostbusters-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/deadpool-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/star-wars-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/the-martian-poster.jpg');"></div>
  </ion-slide>

</ion-slides>

.coming-soon-posters {
  .slide-zoom {
    height: 100%;
  }
}

.coming-soon-poster {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;

  background-size: cover;
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 5.2.2 ios 4.1.1
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v8.1.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

Keeping url parameters with deeplinking

Ionic version:
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ...
[ ] bug report
[x] feature request
[ ] support request

Current behavior:
Currently when I have a URL with parameters (e.g. ..?a=hello&b=world) they get cut off by Ionic routing.

http://localhost:8100/#/nav/n4/intro?a=hello&b=world gets changed to http://localhost:8100/#/nav/n4/intro.

These parameters are for FB tracking and such and are necessary on all pages.

Expected behavior:
http://localhost:8100/#/nav/n4/intro?a=hello&b=world should stay like that.

I would like to keep these parameters. Ideally it would be a settings parameter.

Steps to reproduce:
Add ?a=hello&b=world at the end of your URL and do a refresh. The added parameters will be removed.

Related code:

Other information:

Ionic info:

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 6.5.0 
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.1
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.7.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.0 
    ios-sim    : 5.0.8 
    npm        : 3.10.3 

Tabs select throws error

Bug Report

Ionic Info

cli packages: (/Users/ajitkumar/.nvm/versions/node/v8.11.1/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v8.11.1
    npm        : 6.1.0 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.4.1 Build version 9F2000 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Describe the Bug
I have a tab panel. The ionChange handler on ion-tabs creates a login modal. When the login modal is cancelled/dismissed, I am calling the following code to select the first tab:
if (this.appCtrl.getRootNav().getActiveChildNav()) {
this.appCtrl.getRootNav().getActiveChildNav().select(0);
}

When I keep switching between the tabs keep dismissing the login modal, randomly, switching to first tab throws an exception and the user cannot go to tab 1.

Steps to Reproduce
Currently, the behaviour is random so I do not have a way to reproduce.

Expected Behavior
Exception shall not come and tab switching shall work.

Additional Context
Follow is the stack trace that I see in the browser console:
ERROR TypeError: Cannot read property 'length' of null
at NavControllerBase.getActive (nav-controller-base.js:933)
at NavControllerBase.resize (nav-controller-base.js:996)
at ViewController.handleOrientationChange (view-controller.js:73)
at ViewController._willEnter (view-controller.js:376)
at Tabs.select (tabs.js:330)
at Object.eval [as handleEvent] (Tabs.html:1)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)

Virtual Scroll does not clear elements when items are cleared and throws error

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
Add some items to a list and render them in a virtual scroll component.
Clear the list or filter the items so that the list is zero length.
virtual scroll throws error:

VM2649 virtual-util.js:315 Uncaught TypeError: Cannot read property 'top' of undefined
    at Object.updateDimensions (VM2649 virtual-util.js:315)
    at eval (VM2607 virtual-scroll.js:485)

and virtual scroll does not remove previously rendered elements

Expected behavior:

When the list is empty, virtual scroll should remove all elements

Steps to reproduce:
http://plnkr.co/edit/Zwh2jLRj2AtKATohjuk5?p=preview
Searching for 5, 55 or 555 works. Searching for 5555 (which does not exist in the list) throws error.

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

bug(navbar): hides on ios when keyboard open

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:

There is a toolbar within an ion-header. When an ion-textarea is opened on an iOS device and simulator (using wkwebview plugin), the screen scrolls up as expected. However the ion-navbar scrolls out of view as well which is incorrect.

Expected behavior:
The ion-navbar should never be scrolled out of view!

Related code:

<ion-header>
  <ion-navbar>
    <ion-title>Waypoint Details</ion-title>
 <ion-buttons end showWhen="ios"><button color="primary" ion-button clear  (click)="save()">Done</button></ion-buttons>
  </ion-navbar>
  <ion-toolbar>
    <ion-input style="margin-bottom: 8px" readonly text-wrap [value]="waypointItem.address"></ion-input>
  </ion-toolbar>
</ion-header>

...

<ion-list>
    <ion-item>
      <ion-label stacked>Contact Name</ion-label>
      <ion-input type="text" placeholder="Enter the contact's name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>Contact Number</ion-label>
      <ion-input type="tel" placeholder="Enter the contact's number"></ion-input>
    </ion-item>
    <ion-item>
      <button><ion-icon name="help-circle"></ion-icon></button>
      <ion-label stacked tappable>Driver Instructions</ion-label>
      <ion-textarea autocapitalize="sentences" autocorrect="true" autocomplete='on' placeholder="Please enter some instructions for our driver. Press the help button for some examples."></ion-textarea>
    </ion-item>
  </ion-list>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.10.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 6.0.0
    npm        : 5.3.0