Keyboard doesn't work correctly on ion footer ONLY IOS

juansobral commented 5 years ago

Video of issue:

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Thanks

hardikamutech commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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

keyz182 commented 5 years ago

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

wenjianli92 commented 5 years ago

add it in config.xml：

PriceFallin commented 5 years ago

@wenjianli92's suggestion worked for me

jcesarmobile commented 5 years ago

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

vvvzp commented 5 years ago

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

andyyudev commented 5 years ago

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 commented 5 years ago

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.

ionic-team / cordova-plugin-ionic-keyboard