Keyboard Issues #11501

jgw96 · 2017-05-03T20:56:13Z

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!

naveedahmed1 · 2017-05-03T22:32:00Z

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

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

comfortme · 2017-05-04T06:12:39Z

thank god finally prayers are answered

kabus202 · 2017-05-04T14:37:15Z

Search bar within tab pushes tabbar up.

mburger81 · 2017-05-05T15:31:13Z

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

jgw96 · 2017-05-05T15:32:37Z

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.

mburger81 · 2017-05-05T15:38:25Z

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

jgw96 · 2017-05-05T18:06:53Z

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?

aspidvip · 2017-05-07T01:05:03Z

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

aspidvip · 2017-05-07T01:06:13Z

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

jgw96 · 2017-05-09T18:07:08Z

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.

aspidvip · 2017-05-10T06:15:15Z

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)

aspidvip · 2017-05-10T07:27:48Z

<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

RohinMohanadas · 2017-05-10T14:44:57Z

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.

lpsantana · 2017-05-10T18:16:40Z

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

RohinMohanadas · 2017-05-10T19:38:54Z

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.
			.
			.
			.
			
			}

aspidvip · 2017-05-11T00:50:45Z

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

LiadIdan · 2017-05-19T08:31:03Z

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

abdel-ships-it · 2017-05-19T09:47:02Z

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?

lh4111 · 2017-05-19T11:54:56Z

This my solution， it' work fine.

set hideKeyboardAccessoryBar to true

this.keyboard.hideKeyboardAccessoryBar(true)

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()
    }
}

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>

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

kitkimwong · 2017-05-23T05:43:48Z

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

mburger81 · 2017-05-23T05:49:12Z

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?

lh4111 · 2017-05-23T08:35:44Z

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

lh4111 · 2017-05-23T09:02:00Z

@mburger81

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

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

jrmcdona · 2017-05-23T11:19:44Z

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

jrmcdona · 2017-05-23T13:15:37Z

@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

bhavincb · 2017-12-23T10:56:01Z

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 ?

santhoshgl · 2018-01-09T13:07:22Z

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`

ghost · 2018-01-13T09:21:33Z

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

mladilav · 2018-02-16T13:20:04Z

Any news?

jrmcdona · 2018-02-20T01:56:28Z

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

matthuston · 2018-04-01T23:24:01Z

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?

Stephane84 · 2018-06-06T14:19:27Z

For scrolling pb, i wrote a hack here : #10629 (comment)

ionitron-bot · 2018-12-07T14:00:15Z

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!

ionitron-bot · 2018-12-07T14:00:17Z

Issue moved to: ionic-team/ionic-v3#827

jgw96 added v3 help wanted a good issue for the community labels May 3, 2017

jgw96 added this to the 3.2.0 milestone May 5, 2017

jgw96 mentioned this issue May 12, 2017

A single ion-input triggers unnecessary form field jump arrows and has weird behaviour #6480

Closed

kensodemann added this to the 4.x milestone Nov 30, 2017

jeffminsungkim mentioned this issue Dec 22, 2017

Keyboard covers focused input element on iOS 11 jeffminsungkim/Ashy#17

Closed

ghost mentioned this issue Aug 30, 2018

Keyboard Scrolling Issue on iOS devices with 11.4.1 and above version #15359

Closed

adamdbradley added the ionitron: v3 moves the issue to the ionic-v3 repository label Nov 1, 2018

imhoffd removed ionitron: v3 moves the issue to the ionic-v3 repository labels Nov 28, 2018

Ionitron added the ionitron: v3 moves the issue to the ionic-v3 repository label Nov 28, 2018

ionitron-bot bot mentioned this issue Nov 28, 2018

Keyboard Issues ionic-team/ionic-v3#269

Closed

ionitron-bot bot closed this as completed Nov 28, 2018

ionitron-bot bot locked and limited conversation to collaborators Nov 28, 2018

imhoffd removed ionitron: v3 moves the issue to the ionic-v3 repository v3 labels Nov 28, 2018

ionic-team deleted a comment from ionitron-bot bot Nov 28, 2018

ionic-team unlocked this conversation Nov 28, 2018

imhoffd reopened this Nov 28, 2018

brandyscarney removed the keyboard label Nov 29, 2018

paulstelzer added the ionitron: v3 moves the issue to the ionic-v3 repository label Dec 7, 2018

ionitron-bot bot mentioned this issue Dec 7, 2018

Keyboard Issues ionic-team/ionic-v3#827

Open

ionitron-bot bot closed this as completed Dec 7, 2018

ionitron-bot bot locked and limited conversation to collaborators Dec 7, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Keyboard Issues #11501

Keyboard Issues #11501

jgw96 commented May 3, 2017

naveedahmed1 commented May 3, 2017

comfortme commented May 4, 2017

kabus202 commented May 4, 2017

mburger81 commented May 5, 2017

jgw96 commented May 5, 2017

mburger81 commented May 5, 2017

jgw96 commented May 5, 2017

aspidvip commented May 7, 2017

aspidvip commented May 7, 2017

jgw96 commented May 9, 2017

aspidvip commented May 10, 2017

aspidvip commented May 10, 2017

RohinMohanadas commented May 10, 2017

lpsantana commented May 10, 2017

RohinMohanadas commented May 10, 2017

aspidvip commented May 11, 2017

LiadIdan commented May 19, 2017

abdel-ships-it commented May 19, 2017

lh4111 commented May 19, 2017 •

edited

kitkimwong commented May 23, 2017 •

edited

mburger81 commented May 23, 2017

lh4111 commented May 23, 2017

lh4111 commented May 23, 2017

jrmcdona commented May 23, 2017

jrmcdona commented May 23, 2017 •

edited

bhavincb commented Dec 23, 2017 •

edited

santhoshgl commented Jan 9, 2018 •

edited

ghost commented Jan 13, 2018 •

edited by ghost

mladilav commented Feb 16, 2018

jrmcdona commented Feb 20, 2018

matthuston commented Apr 1, 2018

Stephane84 commented Jun 6, 2018

ionitron-bot bot commented Dec 7, 2018

ionitron-bot bot commented Dec 7, 2018

Keyboard Issues #11501

Keyboard Issues #11501

Comments

jgw96 commented May 3, 2017

naveedahmed1 commented May 3, 2017

comfortme commented May 4, 2017

kabus202 commented May 4, 2017

mburger81 commented May 5, 2017

jgw96 commented May 5, 2017

mburger81 commented May 5, 2017

jgw96 commented May 5, 2017

aspidvip commented May 7, 2017

aspidvip commented May 7, 2017

jgw96 commented May 9, 2017

aspidvip commented May 10, 2017

aspidvip commented May 10, 2017

RohinMohanadas commented May 10, 2017

lpsantana commented May 10, 2017

RohinMohanadas commented May 10, 2017

aspidvip commented May 11, 2017

LiadIdan commented May 19, 2017

abdel-ships-it commented May 19, 2017

lh4111 commented May 19, 2017 • edited

kitkimwong commented May 23, 2017 • edited

mburger81 commented May 23, 2017

lh4111 commented May 23, 2017

lh4111 commented May 23, 2017

jrmcdona commented May 23, 2017

jrmcdona commented May 23, 2017 • edited

bhavincb commented Dec 23, 2017 • edited

santhoshgl commented Jan 9, 2018 • edited

ghost commented Jan 13, 2018 • edited by ghost

mladilav commented Feb 16, 2018

jrmcdona commented Feb 20, 2018

matthuston commented Apr 1, 2018

Stephane84 commented Jun 6, 2018

ionitron-bot bot commented Dec 7, 2018

ionitron-bot bot commented Dec 7, 2018

lh4111 commented May 19, 2017 •

edited

kitkimwong commented May 23, 2017 •

edited

jrmcdona commented May 23, 2017 •

edited

bhavincb commented Dec 23, 2017 •

edited

santhoshgl commented Jan 9, 2018 •

edited

ghost commented Jan 13, 2018 •

edited by ghost