Ionic-framework: Keyboard Issues

Created on 3 May 2017  ·  98Comments  ·  Source: ionic-team/ionic-framework

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!

help wanted v3

Most helpful comment

In my case AppModule adding below import produces relatively better user experience than the defaults.

IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true, 
            autoFocusAssist: false
        }),

All 98 comments

In my case AppModule adding below import produces relatively better user experience than the defaults.

IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true, 
            autoFocusAssist: false
        }),

thank god finally prayers are answered

  1. Search bar within tab pushes tabbar up.

How to Test on Android?
We are happy to help always for Android or Desktop. :)

Hey @mburger81 , good question! There is not an updated nightly version of ionic-angular out yet, but when we release one I will update this issue with the instructions on how you can install it for testing on android.

Okay thx, we are working on a login page where we have some input scroll issues.
So I think we can check it.

FYI before we can test it and release it to our tester, we need to have resolved the INVALID VIEWS bug (happy for the milestone) , because this is a breaking issue to us

Got ya! So on the input scroll issue, can you try placing the input in an area of your view that the keyboard does not cover when its opened?

This is a good idea. It is necessary to make sure that the cursor does not go behind the bar, when scrolling

It is necessary to make, that the cursor did not block ion-header, at a scrolling

Some iOS feedback from one of our team members @danbucholtz :

On individual controls that are not typically used within a form (for example a search input), can we investigate closing the keyboard on "submit" or "enter"?

When performing a navigation action, the keyboard is automatically closed if it's open. We should revisit this behavior with regard to overlays. For example, I cannot imagine there are many use cases when opening a modal and keeping the keyboard open. ActionSheet, Alert, Loading, Modal, Popover, Picker, and Toast all imply the start of a new action (Picking a time for example) or feedback on a completed action (submitting or validating a form or something). I think it makes sense to close the keyboard in the case of opening an overlay.

chats.html

<ion-footer *ngIf="send.load_spinner==false" class="backgound_send_message">
<ion-toolbar>

<textarea *ngIf="Record.StartRecordGo==false" [(ngModel)]="you_comment" (keydown)="handleKeyDown($event)" (focus)="scrollTobottom()" placeholder="{{'chats.message' | translate }}"  id="my-textarea0" class="my-textarea" rows="1" autosize></textarea>

    <button ion-button clear large color="primary" *ngIf="send.you_comment.length>0" (click)="SendMessageServer(items)"><ion-icon class="SendMess" ios="ios-send-outline" md="md-send"></ion-icon></button>


</ion-toolbar>
</ion-footer>

chats.ts

SendMessageServer(items) {
    this.text_message_me.push(this.you_comment);
   document.getElementById('my-textarea0').focus(); // The keyboard remains open
}

This code it's work (OPEN KYEBOARD)

<ion-footer>
<ion-toolbar>
<textarea></textarea>
</ion-footer>
</ion-toolbar>

It changes the height well, but it's better to make the animation when the size changes

https://forum.ionicframework.com/t/no-documentation-for-scrollassist-autofocusassist-inputblurring-config-settings/88450?u=rohinmohandas

It could be useful having the documentation for these configs if* they can help deal with these keyboard and input related issues, maybe till 3.2.0 is made available to public.

Any solution related to the case when keyboard hides the input?

The following code in app.component.ts produced the desired effects of footer inputs staying above keyboard in both iOS and android. For some reason, statusbar overlay behavior in android affects the way keyboard hides input elements positioned below keyboard height.

import {Platform} from "ionic-angular";
import {Keyboard} from "@ionic-native/keyboard";
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";

constructor(platform: Platform,public statusBar: StatusBar, public splashScreen: SplashScreen,
                public keyboard: Keyboard) {

        platform.ready().then(() => {
            if (platform.is("ios")) {
                statusBar.overlaysWebView(true);
                statusBar.styleBlackTranslucent();
            }
            splashScreen.hide();
            keyboard.hideKeyboardAccessoryBar(false); // use only on a need basis if accessory bar is needed.
            .
            .
            .

            }

It is necessary to make, that the cursor did not block ion-header, at a scrolling
key2
key1

There's any chance that #7047 will be fixed too?

How does this work in browsers actually ? Is ionic adding any extra functionality that break the inputs, or is this just a challenging problem with input fields on mobile?

This my solution, it' work fine.

  1. set hideKeyboardAccessoryBar to true
this.keyboard.hideKeyboardAccessoryBar(true)
  1. create KeyboardAttachDirective.ts file
import { Directive, ElementRef, Input } from '@angular/core';
import { Content, Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs/rx';


/**
 * @name KeyboardAttachDirective
 * @description
 * The `keyboardAttach` directive will cause an element to float above the
 * keyboard when the keyboard shows. Currently only supports the `ion-footer` element.
 *
 * ### Notes
 * - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native)
 * and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard).
 * - Currently only tested to work on iOS.
 * - If there is an input in your footer, you will need to set
 *   `Keyboard.disableScroll(true)`.
 *
 * @usage
 *
 * ```html
 * <ion-content #content>
 * </ion-content>
 *
 * <ion-footer [keyboardAttach]="content">
 *   <ion-toolbar>
 *     <ion-item>
 *       <ion-input></ion-input>
 *     </ion-item>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 */

@Directive({
    selector: '[keyboardAttach]'
})
export class KeyboardAttachDirective {
    @Input('keyboardAttach') content: Content;

    private onShowSubscription: Subscription;
    private onHideSubscription: Subscription;

    private attachTime = 0;

    constructor(
        private elementRef: ElementRef,
        private platform: Platform,
        private keyboard: Keyboard
    ) {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e));
            this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide());
        }
    }

    ngOnDestroy() {
        if (this.onShowSubscription) {
            this.onShowSubscription.unsubscribe();
        }
        if (this.onHideSubscription) {
            this.onHideSubscription.unsubscribe();
        }
    }

    private onShow(e) {
        let keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight);

        if(this.attachTime > 1){
            if(
            keyboardHeight == 313 ||
            keyboardHeight == 258 ||
            keyboardHeight == 216 ||
            keyboardHeight == 253 ||
            keyboardHeight == 226 ||
            keyboardHeight == 271 ||
            keyboardHeight == 216 ||
            keyboardHeight == 264){
                this.setElementPosition(0)
            }else{
                if(this.attachTime > 2){
                    this.setElementPosition(0)
                }else{
                    this.setElementPosition(keyboardHeight);
                }
            }
        }else{
            this.setElementPosition(keyboardHeight);
        }
        this.attachTime ++
    };

    private onHide() {
        this.setElementPosition(0);
        this.attachTime = 0
    };

    private setElementPosition(pixels: number) {
        this.elementRef.nativeElement.style.paddingBottom = pixels + 'px';
        this.content.getScrollElement().style.marginBottom = (pixels + 44) + 'px';
        this.content.scrollToBottom()
    }
}
  1. use
<ion-header (touchstart)="closeKeyboard()"></ion-header>

...

<ion-content #content (touchstart)="closeKeyboard()"></ion-content>

...

<ion-footer [keyboardAttach]="content" class="messagebar">
    <ion-toolbar no-border>
        <div class="toolbar-inner">
            <div #inputer style="-webkit-user-select: auto;padding:5px;font-size:16px; min-height:1.5em; width:100%;border:1px solid #ccc;background-color:#fff;" contenteditable="plaintext-only" (keyup)="keyup($event)" (focus)="onFocus($event)" (blur)="onBlur($event)"></div>
            <button ion-button small (tap)="send()" [disabled]="!msgContent.length">发送</button>
        </div>
    </ion-toolbar>
</ion-footer>
  1. add some methods to XXXPage.ts
    onBlur(event) {
        if (this.keyboardOpen) {
            event.target.focus()
        }
    }

    keyup(event){
        this.msgContent = event.target.innerText
    }

    onFocus(event) {
        this.keyboardOpen = true
    }

    closeKeyboard() {
        this.keyboardOpen = false
        this.keyboard.close()
    }

perview.gif link

preview.mov link

@lh4111 Great! But have you tested in android? It seems not work.

We have the same problem as @aspidvip
@lh4111 can I ask you, for what's your solution for? Does it resolve the problem with the input under the header?

@kitkimwong I did't test on android ,but I think the principles should be similar.

@mburger81

  1. use the method this.keyboard.hideKeyboardAccessoryBar(true) provided by the ion-native/keyboard to
    set keyboard cover Page
  2. when cursor focus on input, keyboard will open. then set theion-content padding-bottom to show the ion-footer

My English is not very good, I hope you can understand

Is anyway here using the WKWebView plugin that was mentioned in the first thread? Or are all of these comments in regards to UIWebView?

@jgw96 I just tested out the WKWebView on my iOS device. Vastly improved for me. It looks like the input field doesn't stay on top of the keyboard nicely like you would expect and is delayed, it sort of shows up at the end. Is that a known issue?

Is this iOS only? I have not tested on Android but does it work there?

Recording:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

Cordova CLI: 6.4.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.3.2 Build version 8E2002

Hey @manucorporat FYI from my testing. See post above and recording. Our app is essentially a chat app so it would be great to know if you think that issue can be resolved.

@jgw96 @manucorporat can you please comment on the status of this testing and when the fixes brnach will hit production? Or what is left to do? Would really appreciate it.

@jgw96 Possible that you update this issue? It seems to have missed the 3.3.0 milestone.

Is there ever coming a official fix for the keyboard issues? It has been a pain to work with since Ionic 1 and still no official fix for something as important as the keyboard.

@nuvoPoint LoL, the keyboard issue has been last for almost 1.5 years :

  1. https://github.com/ionic-team/ionic/issues/6228
  2. https://github.com/ionic-team/ionic/issues/5432

And they just only lock the issue.. LOL...
So.. I gave up ionic because of the keyboard issue one years ago, And now, I return back here to see whether the keyboard has been fixed, but as you see, they have no any progress in this one year. :)

It seems that they don't want to have a official fix even if this is a basic component for a simple app!! It will lost all the developers who want to build a chat app. Input Box is a basic component that Interact with user, with this damn issue we ONLY Can Use IONIC To Build Some Simple Information APPS. And Maybe this is the positioning of ionic...? LOL. I don't know.

And if you see the discussion in the forum, many developer have the same issue and answer:
Use Ionic to build a simple native like chat app is not possible:

https://forum.ionicframework.com/t/about-to-give-up-with-ionic-3-simple-native-like-chat-page-not-possible/87548

Guys, keyboard is being worked on, and there is a branch for it in the cordova plugin for wk if you want to test it.

cordova plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes --save

These are the current fixes: https://github.com/ionic-team/cordova-plugin-wkwebview-engine/pull/131

Try installing it, and see if it is better or not. The team are looking for feedback

Edited:

@AmitMY how would you like me to post feedback? In this thread?

Tested out the WKWebView on my iOS device. Vastly improved for me.

Current Issue:
It looks like the input field doesn't stay on top of the keyboard nicely like you would expect and is delayed, it sort of shows up at the end. Is that a known issue?

Recording:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

global packages:
@ionic/cli-utils : 1.2.0
Cordova CLI : 7.0.1
Ionic CLI : 3.2.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 : ios 4.4.0
Ionic Framework : ionic-angular 3.0.1

System:
Node : v7.4.0
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.1
ios-sim : 5.0.12

@jrmcdona I think you should post feed back here. @manucorporat will look at it when he can
Try to keep it as professional as possible, like - it's great that you have a video, but also explain what in the video is wrong (so we can keep track of issues without watching the recordings each time)

Any hopes on fixing the tabs and keyboard open issue?

@Floyd1256 Link it here, with all the information you have. This entire thread will probably be reviewed in the end of next week, and fixes will be made according to the feedback

I need a chat feature in my ionic app.
I tested cordova-plugin-wkwebview-engine.git#keyboard-fixes in my project, great improvements have been made.
Yet there is still something we can't do compared to native keyboard management.
My reference is the messaging feature on my phone but it is the same thing for the biggest well-known chat apps :
When we click to write a new message, keyboard shows up and pushes the bottom fixed input text AND the last messages BUT not the top fixed header.
The push animation is smooth and we can see the last messages even when we type a new message.
To have an example, simply write and send a SMS with any phone.

I would like to have the same behaviour with the ionic keyboard on android, ios and windows devices.
On present ionic keyboard, push animation is jerky and keyboard pushes the bottom fixed input but covers the last messages (on all devices).
For testing just add a text-input in a ionic footer and type text.
The challenge is big but end-users can't accept a keyboard as is, the gap with a native one is blatant.
Otherwise, thanks for great ionic framework.

Left to create an animation when resizing and the ability to disable resizing when the keyboard appears to up tabs did not appear! Or make it possible to disable the appearance of tabs when the keyboard is displayed

Recently disappears scroll sideways

I have an interesting design for this problem, by adding nesting webview on top of the main webview. so the developer have the option to separate the UI into 2 layers, one for the main content, and the second for any UI that needed to be synced with the keyboard.

@Khalid-Nowaf your main view isn't pushing up in this design as the keyboard rises up. So in a chat scenario or SMS you are covering up all your messages. In iOS SMS for example, the messages get pushed up along with the text box in a very smooth way - so that you can always see the last message sent. Then the keyboard does not drop after entering text it stays there until you keep typing and leave. I personally feel the ionic design should mimic iOS and Android (although I cannot speak for Android as I have never used one). I also do not know anything about the complexities to make it happen from a development standpoint but hoping it gets closer. Vastly improved for me with WKWebView.

@jrmcdona, the main problem with the keyboard now, is how to make the footer scroll smoothly with the keyboard. the current keyboard plugin and web view trying to send each other events, so they can manage the animation and the resize ..etc, and it's hard to make them sync with each other. Sometimes the keyboard faster than the webview animation. so what I'm trying to address here is to interduce a second webview on top of the main view. and natively the keyboard will push it up, while the main web view can have the option to be scrolled or not "depend on what the developer wants" and scrolling the main view is not a problem now I think. the chat app like is what make most of the problem, because of everything in one one layer.

Some one in the forum says there is a excellent plugin fixed the keyboard issue perfectly.
Https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard
A bad news is that this plugin is paid.

Also, just testing the "fixed keyboard branch" of ionic , there is still a big problem and a bad user experience.

@kitkimwong Wow that looks good, except for the fact that it is pretty expensive (especially for the fact that ionic is free). @manucorporat you should definitely take a look at that

That plugin is listed in the ionic docs. I will be trying it out today and see how it goes. $200 isn't all that expensive for some companies I guess. Two hours of a developers time will pay for that and I am guessing you could spend hours on messing around with the keyboard without the plugin.
http://ionicframework.com/docs/native/native-keyboard/ Don't get me wrong, would rather not pay but I might!

I have created a repo to test the keyboard, with this repo you can test

  • chat app like
  • forms and lots of inputs "form ionic E2E test"
  • wkwebview for ios **new
  • RTL

here is some of my demo



repo link: https://github.com/Khalid-Nowaf/ionic-keyboard

all you have to do after cloning the repo
sh ionic cordova run ios --prod ionic cordova run android --prod

7047

Could it be an idea to include the actual input field natively as an option for the keyboard? Then we wouldn't be dependent on DOM rendering not being fast enough, and having the input stick to the keyboard would be easier to implement.

The old saying "when you have a hammer, everything looks like a nail" comes to mind; so maybe we need to approach the whole thing differently.

@larssn that is what the paid keyboard plugin does. So it seems like a good option.

@jrmcdona Might be ok yes. Though would rather have an in-house solution that works 100%. In the past, I've become dependent on several plugins that fell into disrepair, and maintaining them was a small nightmare.

@larssn wasn't suggesting to use the plugin. Was suggesting your idea for ionic to do that design sounds good and it is also what the plugin does.

Until we get some feedback from the ionic team about the current keyboard issues, - If anyone wants to test the paid plugin I created a repo here. However, I am unable to get the keyboard to show up initially for some reason. I have to click Toggle in the upper right for it to appear. Cannot figure out why it will not show up on as the page is loaded. Like the demo.

https://github.com/jrmcdona/keyboard-test

A solution that worked for me:

  • Use input instead ion-input

@SoldierCorp you mean in the WkWebView test branch ionic provided? Or UIWebView?

@jrmcdona In the template of the component, the html element itself.

Considering all the comments and expectations about this topic, why not think to provide
a dedicated chat component including keyboard and input text ? It's too difficult to create one by common developpers and it would be frustrating to use a third party plugin even if it seems to be really great

Agree with that 100%. If it is not achievable due to certain complexities they have faced then that would also be really helpful for us all to know.

@AmitMY @manucorporat Regarding the WKWebView test branch. Believe the keyboard should not close after you hit send.
Just like you would see during SMS conversation in iOS. If the developer doesn't want that behavior they can call the keyboard close method but by default it should stay open so people can rattle of messages during a chat scenario without keyboard bouncing up and down.

What is the status with this branch? Would it be possible to make visible the latest news about the keyboard? @AmitMY @manucorporat @jgw96

@jrmcdona it was merged in master.Feel free to give it a try:
[email protected]

Ok!👍🏼

@manucorporat Do I simply npm install [email protected] to get that build?
I tried that but it was invalid. Not sure how to get that except build you want me to test.

@jrmcdona run npm v ionic-angular versions --json to see which versions are published

@jrmcdona

npm install ionic-angular@nightly

Ok thanks @manucorporat . I removed the WKWebView test branch and added it back with the latest.
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.3" />

Then I updated Angular to 4.1.3 so that I can could install nightly.

Looks like it is not quite ready yet for prime time. The WKWebView test branch behaved better than what we have now. With this version the input box does not rise up at all. Only the keyboard with no input. In the test branch the keyboard would rise up but just a little delayed. Not ideal but workwithable.

Does anyone have a working repo of the keyboard working well?

Is this a known issue, is there a list of known issues?
Should I be logging new issues?

Here is a video.
https://1drv.ms/v/s!AnyXOztVClZYbfswP-UEtaHEU0I

Here is code:

<div class="chat-window-container" style="padding-top:20px">
  <div class="chat-window">
    <div class="message-list">

      <chat-message *ngFor="let message of messages | async" [message]="message">
      </chat-message>

    </div>

    <message-input>

      <div style="flex:1;padding-left:5px;">
        <ion-input [(ngModel)]="draftMessage.text" (keydown.enter)="onEnter($event)" autofocus="" placeholder="Type to chat..." maxlength="2000"></ion-input>
      </div>
      <div (click)="onEnter($event)" style="display:table;width:50px;height:100%">
        <ion-icon name="send" color="primary" class="message-send-icon"></ion-icon>
      </div>
    </message-input>
  </div>
</div>

Thanks all

@jrmcdona yes, still not release, we are preparing a new keyboard plugin:

  1. Update the CLI:
    ```
    npm install -g ionic

2. Make sure you are using ionic-framework nightly or 3.4

3. Make sure you are using the latest WK plugin

4. Remove ionic-keyboard-plugin: **SUPER IMPORTANT STEP!!!!**

5. Install the new keyboard plugin: 
 ```
ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-keyboard --save

PLEASEE! let me know how it works for you

@manucorporat
Version 3.4 is not published yet.

Nightly and the other recently published versions are failing for me as invalid. See screenshot

screen shot 2017-06-14 at 7 27 24 pm

@jrmcdona have you tried removing node_module and running npm install again? make sure you use --save in ionic-angular@nightly.

However, 3.4 is going to be released today.

@manucorporat UI is looking pretty good here! The input box is staying on top of the keyboard. Maybe a very mild separation of the input and the keyboard so you can slightly tell they are not one nice unit. But vast improved!

I wasn't sure how to import the Keyboard into the app to play with the Show/Hide methods.
(i.e. import { Keyboard } from '@ionic-native/keyboard'; )

It looks like if you click the send button the keyboard automatically closes ( I am not closing it in code since I don't have the Keyboard imported into the app to use the methods Keyboard.Show etc.) Will it be possible to keep the keyboard open like how iOS SMS works?

Here is a recording.
https://1drv.ms/v/s!AnyXOztVClZYcY3vYXiXYaAZNdE

Wonder if you have ever played with including the input with the keyboard plugin itself and have it styled according to the device type?

Nice job Manu!

@manucorporat indeed great improvements, could you add an option to push the content (header excepted) so that we can see the last messages when keyboard is open and input text is bottom fixed ?

What plug-ins do I need to install in order for the keyboard to work?

@aspidvip Manu mentions it a few posts back. I'll copy it here.

Update the CLI:
npm install -g ionic
Make sure you are using ionic-framework nightly or 3.4

Make sure you are using the latest WK plugin

Remove ionic-keyboard-plugin: SUPER IMPORTANT STEP!!!!

Install the new keyboard plugin:

ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-keyboard --save

And How to access a new plugin keyboard?

It's good if the keyboard is added as a child in the div: ~

~ For example, the work of the plugin google maps

How is the progress in working with the keyboard?

Fantastic work @manucorporat . I just upgraded from 3.2 to 3.5 nightly (@3.5.3-201707261447) and it seems to work as intended in most of the forms I have across my app.

Now we just need to publish an app-demo showing all of this working. If there is interest I can try and contribute over the weekend.

Thanks for all the work put into this @manucorporat! (And all who've tested it too).

@Peege151 I'm definitely interested in an app demo of this. Am just coming up to the point of incorporating a keyboard in my app for chat, so will be able to give it a thorough testing when ready, and report back here.

@Peege151 I'd love to see an app-demo !

Okay, this may come as a shock but I am still on Ionic 2.2.1 and I cannot currently upgrade to the latest because I think it will introduce new bugs which I can't afford to have at the moment.
This https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes seems to work but I am afraid it will still crash the App on iOS with the error "More tasks executed then were scheduled".

Can I use https://github.com/driftyco/cordova-plugin-wkwebview-engine.git with still the Ionic 2.2.1? Any chance?

So I tried the latest release of this plugin 1.1.3 with Ionic 2.2.1, followed instructions in the github repo, added the code below and removed ionic-plugin-keyboard (I assumed this is what @manucorporat meant in his comment) - did the npm install for the plugin, built the App and tried it.
On iOS simulator with iOS version 10+ and it worked well as expected with no problems and no crashing. I still have to try it on a real phone (previously my app crashed when using the solution here https://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above-the-keyboard-when-the-keyboard-shows/36804830#36804830 )
A tip for the keyboard disappearing, add this to the button
(mousedown)="$event.preventDefault()"

The config.xml included

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.3"/>
<plugin name="cordova-plugin-keyboard" spec="https://github.com/ionic-team/cordova-plugin-keyboard"/>
<allow-navigation href="http://localhost:8080/*"/>

I have three questions, if anyone can help:
1- Will things continue to work normally on Android after removing the ionic-plugin-keyboard?
2- Is this <allow-navigation href="http://localhost:8080/*"/> correct? with localhost:8080 ?
3- Should I remove this code below from the config.xml

<feature name="Keyboard">
  <param name="ios-package" onload="true" value="IonicKeyboard"/>
</feature>

If your problem is on android, thiw will help you. In the ionic config.xml, add the following lines in the platform name="android" tag.

<platform name="android"> 
  <edit-config file="AndroidManifest.xml" mode="merge"    target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /></edit-config>
  ...the rest of the android configs...
</platform>

This will prevent the keyboard to push up everything and simple overlay the keyboard on the content. So the behaviour will be the same or similar to the ios keyboard

@Jatapiaro It doesn't work quite well when you have an input at the bottom of the view, the keyboard will hide it and you won't be able to see what you're typing.

I don't really think Ionic is the best place to be for a chat application. I never could get it right and believe it has been a struggle for a few years from all the posts and comments. Just my personal opinion. If there was a sample working chat app for ionic across ios and android that might really help people out.

Yes, actually, we did pay for that and it was pretty good! That would be the best route to go for people that can afford it. In my experience anyway.

Somewhere in the EddyVerbruggen keyboard plugin Max Lynch had mentoned making that plugin part of the Ionic chat package. I asked in about it in that thread and also tweeted him. Didn't get a response I am not sure what the chat package was all about. Been a while since I have paid attention so maybe there is an update out about that...

If I remember correctly I saw somewhere on twitter like a week ago that Ionic is working on an update/new keyboard plugin...if I'm not wrong, keep it chill, wait & see

hello I have a IONIC project v1,and i discover The return button is sometimes invalid.It bothered me for a long time, i need help thanks

@miaozhenkun this repo is for Ionic v3+, for v1 use https://github.com/ionic-team/ionic-v1

@astec Are you Chinese?thank you very much

keyboard has issue with ion-textbar

<ion-card class="cards " > <div class="relative"> <div class="image_container"> <img class="imageFull" src="http://via.placeholder.com/200x200" /> </div> <ion-row class=" absolute bottom0 "> <ion-item> <ion-textarea placeholder="Message..." > </ion-textarea> </ion-item> </ion-row> </div> </ion-card>

i'm using list of above card with below css
.relative{
position:relative !important;
}
.absolute{
position:absolute !important;
}
.bottom0{
bottom:0;
}

when i click textarea it opens keyboard but doesn't scroll into the element, but when i type something it scroll into the textarea.

i has observed that problem only exists if we use positon relative for any parent of ion-textarea.

any workaroud solutions with position relative ?

Hey guys!
anyone have found a solution for this.
your help is appreciated.

`cli packages: (/usr/local/Cellar/node@6/6.12.2/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.12.2
npm               : 5.5.1 
OS                : macOS Sierra
Xcode             : Xcode 9.2 Build version 9C40b

Environment Variables:

ANDROID_HOME : /Users/santhoshgl/Library/Android/sdk

Misc:

backend : legacy`

add to your click button (mousedown)="$event.preventDefault(); yourFunction()"

Any news?

I think you are going to want to wait and use Avocado @mladilav

We have been having an issue with our iOS keyboard in ion-inputs, in short, the input will not have a caret being rendered after the keyboard comes up, the user can type correctly into the field. I tried a variety of different ionic versions, webview versioning, etc all to no avail. I do believe it is an issue where if the ion-input needs to be scrolled to, it will have problems, if the ion-input was at the very top of the page, it doesn't seem to have the issue.

I did however find one thing that completely fixed our problem: I built that app in Xcode 8.3.3. All previous builds I was trying were using Xcode 9.0 to the latest Xcode 9.3 release that came out a couple days ago. The problem with this fix is, I believe Apple might drop apps form being submitted from Xcode 8 in the near future. Anyone have any other ideas?

For scrolling pb, i wrote a hack here : https://github.com/ionic-team/ionic/issues/10629#issuecomment-395084125

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

Was this page helpful?
0 / 5 - 0 ratings