Keyboard doesn't work correctly on ion footer ONLY IOS

[juansobral]

Video of issue:

https://imgur.com/a/PRLPJYw

Description:

When opening the keyboard all the ion footer stuff disappears. Just tapping again on the field will make it appear again. Check video.
THIS DOES NOT HAPPEN ON ANDROID. Only on iOS simulator and real device
Also, if using safari development mode and inspecting elements, any css modification via safari will make the footer look good again. It seems it's the initial drawing that gets broken.

What I tried:

Adding in config.xml
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />
So ionic uses UIWebView instead of WKWebView. It works but app is very slow and other things don't work correctly as the app was built using WKWebView in mind.

Other thing that works is changing to old cordova ionic keyboard (deprecated) but when closing the keyboard all actions (button taps, navigation, etc) stops working on the app...

Tried forcing css/html rerender on keyboard opening, playing with field focus and changing between different plugin versions. Noone worked.

Code Setup:

<ion-footer *ngIf="chatSession && chatSession.IsComplete != 'True'" >
<ion-toolbar  color="white" style="border-top: 1px solid #4a87ee; min-height: 45px !important">
  <ion-grid no-padding>
    <ion-row>
        <ion-col col-1 style="margin:auto">
            <ion-icon style="padding: 5px;" name="menu" class="icon-chat" (click)="openCannedMessages()"></ion-icon>
          </ion-col>
          <ion-col col-9 style="margin:auto">
              <ion-textarea #inputRef [(ngModel)]="chatText" 
              name="chat" id="chattextarea" autocorrect="on" class="chat-area" style="padding: 0px; margin:0px" [placeholder]="this.placeholderText" ></ion-textarea>
            </ion-col>
          <ion-col col-2 style="margin:auto">
            <button ion-button outline class="btn-send" (click)="actionChat(inputRef)" style="margin: 0px; font-size: 16px;">
              <ion-label >Send</ion-label>
            </button>
          </ion-col>
    </ion-row>
  </ion-grid>
</ion-toolbar>
</ion-footer>

Ionic Info:

"@ionic-native/keyboard": "^4.15.0",
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.3" />

Ionic:

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

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 2.1.4, (and 10 other plugins)

System:

   ios-deploy : 1.9.2
   ios-sim    : 6.1.2
   NodeJS     : v8.5.0 (/usr/local/bin/node)
   npm        : 6.1.0
   OS         : macOS High Sierra
   Xcode      : Xcode 10.0 Build version 10A255

[klifa90]

Noone seems to answer here. Weird as it seems an obvious issue.

Also posted on Stackoverflow.
https://stackoverflow.com/questions/52744904/ionic-3-keyboard-doesnt-work-correctly-on-ion-footer-only-ios

[mhartington]

Thanks for the issue, we'll take a look. This was something we had fixed properly in the ionic proper with the older keyboard plugin, but this might be reintroduced with the new plugin. I would add that you should make sure you have this set in your config.xml

https://github.com/ionic-team/cordova-plugin-ionic-keyboard#keyboardresizemode

[klifa90]

Hey Mike, thanks for the quick reply, however this approach is something we already tested and it's still not working.

Thanks

[hardikamutech]

Hello @mhartington,

We are also having same issue here and tried your approach of using keyboardresizemode but no luck. we hope you will put it in priority and resolve as soon as possible.

Thanks,

[Scobee]

@juansobral @hardikamutech @klifa90 - did you guys manage to find a way to make this work ?
I am currently using a directive that adds padding to the footer, but this is not the solution I want to keep since it also looks bad (I would like the footer to grow with the keyboard).

[klifa90]

@Scobee We couldn't make it work. There are other issues with the footer as well on iphone X. We implemented some hacks and are moving forward with React Native.

[Scobee]

Got it @klifa90, sorry to hear that/ Hoping @mhartington will bring us some good news in the future!

[keyz182]

Has anyone found a solution to this issue? The old plugin causes lockups on iOS 12 for us, so isn't an option.

[wenjianli92]

add it in config.xml：

[PriceFallin]

@wenjianli92's suggestion worked for me

[jcesarmobile]

I can't reproduce on Ionic 4 with latest version of the keyboard plugin. Closing

[vvvzp]

may be help anyone this sollution for old version
add to config.xml
preference name="fullscreen" value="true" /

[andyyudev]

The issue still exists in ionic 3 with the keyboard (2.1.3) and webview (4.0.1). You can workaround the issue by using ion-footer WITHOUT ion-toolbar inside. However doing that it will screw up the slide animation on page back.

The only thing that is working for me is by adding the following css line

.toolbar-ios {
overflow: visible
}

[stib]

Any recommended solution for this for ionic-v1? I have tried the various suggestions in this thread but none seem to work for the same issue in v1.