CODEWITHSUNDEEP
iphoneionic-frameworkkeyboardionic3
user3561494
user3561494

Reputation: 2342

Ionic3 keyboard problems on ios

Cordova CLI: 6.5.0 Ionic Framework Version: 3.0.1 Ionic CLI Version: 2.2.3 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.0 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 7 Node Version: v6.10.2 Xcode version: Not installed

One of the screens of my ionic app has an ion-searchbar. When my ionic app is run on an ios device, when the user taps into the search field the keyboard comes up as expected, but there is no way for the user to ever close the keyboard without changing screens.

I have tried calling close() on the ionic-native Keyboard class, but that just shrinks the screen so that the tabs which are at the bottom of the screen appear on top of the keyboard, the keyboard remains up.

I have tried using onKeyboardShow() but that is never called.

I have tried putting the keyboard up with the accessory bar, but that does not work on a real device. (accessory bar does not appear)

If there is any way to add a close function to the keyboard or make the return button close the keyboard that would be great, otherwise if keyboard.close() could work the way it should that would be good too.

This is part of my page class to show I am calling the Keyboard class correctly:

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from "@angular/forms";
import { NavController, App, NavParams, AlertController,ModalController,LoadingController   } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';


import { PressDirective } from "../../components/longpress/longpress";

// Providers
import { ProjectDetailService } from '../../providers/project-detail-service';
import { Globals } from '../../providers/globals';
import { Filters } from '../../providers/filters';

// Pages
import { TabsPage } from '../tabs/tabs';
import { FormPage } from '../form/form';
import { ProjectDetail } from '../project-detail/project-detail';
import { AboutPage } from '../about/about';
import { FiltersPage } from '../filters/filters';

//http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/

@Component({
    selector: 'page-list',
    templateUrl: 'list.html'
})
export class ListPage {

    newListItem: FormGroup;
    masterList: any = [];
    list: any = [];
    showAdd:boolean = true;
    showDelete:boolean = true;
    showClear:boolean = true;
    searchQuery:string = "";
    doinglike:boolean = false;
    loading:boolean = true;
    keyboardUp:boolean = false;

    constructor ( public service: ProjectDetailService,
                    public globals: Globals,public filters: Filters,
                    public formBuilder: FormBuilder,
                    public app: App,
                    public navCtrl: NavController,
                    public alertCtrl: AlertController,
                    public modalCtrl: ModalController,
                    private keyboard: Keyboard
                    ,public loadingController: LoadingController ) {

        this.showAdd = this.globals.adminUser;
        this.showDelete = this.globals.adminUser;

console.log("ListPage constructor");

        this.keyboard.close();
        this.keyboard.hideKeyboardAccessoryBar(false);

        this.keyboard.onKeyboardShow().subscribe(data =>
        {
            console.log('keyboard is shown');
            this.keyboardUp = true;
        });

        this.keyboard.onKeyboardHide().subscribe(data =>
        {
            console.log('keyboard is hidden');
            this.keyboardUp = false;
        });
    }

Upvotes: 2

Views: 1094

Answers (1)

H S W
H S W

Reputation: 7119

Add event for keyup.enter in the field. For example

 <ion-input type="text" [(ngModel)]="data" (keyup.enter)="hideKeyboard()">

And:

 hideKeyboard() {
  // hide keyboard
  this.keyboard.close();
 }

Upvotes: 1

Related Questions