Keyboard overlays popover when using forms

[yannbf]

Ionic version: (check one with "x")
[ ] 1.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:
So I need to add a small form inside a popover. It's a "add to wishlist" popover. So the user either selects an existing wishlist or creates a new wishlist and add the item at the same time. When I tried that in the device, I got a weird result where the keyboard was overlaying the popover and the form couldn't be seen.

Image: http://imgur.com/a/payjQ

Expected behavior:
I'm not sure if that is somewhat achievable, but it would be nice if there was a scroll, just like in a normal page with input forms.

Steps to reproduce:
Create the popover component and try it out on a device

Related code:

.html

<ion-content>
	<ion-list>
		<ion-list-header>Wishlists</ion-list-header>
		<button ion-item *ngFor="let wishlist of wishlists" (click)="addToWishList(wishlist.id)">{{wishlist.name}}</button>
	</ion-list>
	<div *ngIf="!showInput">
		<button ion-item detail-none (click)="create()" class="pink add-button">Create <ion-icon name="add" class="right"></ion-icon></button>
	</div>
	<div *ngIf="showInput">
		<ion-item>
			<ion-input placeholder="Name.." [(ngModel)]="wishlistName" maxlength="25"></ion-input>
		</ion-item>
		<button ion-button clear (click)="createNewWishlist()" class="right">Add</button>
	</div>
</ion-content>

.ts

import { ViewController } from 'ionic-angular';
import { Component } from '@angular/core';
@Component({
  selector: 'wishlists-popover',
  templateUrl: 'wishlists-popover.html',
})
export class WishlistsPopover {
  showInput = false;
  wishlistName = "";
  wishlists = [
    {
      id: 1,
      name: "Dream's adventure"
    },
    {
      id: 2,
      name: "Weekend",
    },
    {
      id: 3,
      name: "Family Time"
    },
  ];

  constructor(public viewCtrl: ViewController) { }

  create() {
    this.showInput = true;
  }
  createNewWishlist() {
    this.wishlists.push({ id: 5, name: this.wishlistName });
    this.showInput = false;
    this.wishlistName = "";
  }

  addToWishList(id) {
    console.log("added to " + id);
  }

  close() {
    this.viewCtrl.dismiss();
  }
}

Cordova CLI: 6.3.1
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.1
Xcode version: Not installed

[jgw96]

Hello, thanks for opening an issue with us! Any reason you're using a popover for this instead of a modal or select?

[yannbf]

Hey Justin, Yes, the main reason is the feature was requested by the client.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.