Ionic-framework: Hide `ion-footer` when keyboard is shown

[plul]

Ionic version:
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
I wish for the keyboard to overlay the ion-footer when an input in ion-content is active. I can listen to keyboard events, so I did this: <ion-footer *ngIf="!isKeyboardOpen"> However, that seems to not work, because after the keyboard has been shown, certain UI elements within the ion-footer become somewhat unresponsive. As if they are no longer being updated as part of normal change detection. Specifically, having this within the ion-footer stops being responsive: <img [src]="someCondition ? path1 : path2">.

After the keyboard has been shown and hidden again and the footer has been removed and added again by the ngIf, the image will no longer switch when someCondition toggles between true and false.

Expected behavior:
The image would continue to behave normally.

Other information:
My motivation is essentially to hide the ion-footer when the keyboard is shown. If there is another, working way to do so, I will be satisfied.

Ionic info:

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : android 6.2.3 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.10.0
    OS         : Linux 4.11
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

[jgw96]

Hello, thanks for using Ionic! This is something that we are currently working on fixing. I will update this issue once i have tested the fixes.

[manucorporat]

not sure, this is the correct behaviour. what if the footer has a input, just like an chat?

this is something we can look, but hiding the footer unconditionally is not a good idea

[plul]

@manucorporat To clarify, I do not wish to hide the footer unconditionally. I want to choose when it should be hidden. It's just that, using ngIf to toggle whether the footer is shown or not seems to break elements in the footer.

There are definitely cases in our app where I would not want the footer to be hidden when the keyboard is active. Especially, as you point out, when there is an input in the footer.

Using ngIf to show or hide the footer is an ergonomic solution for me. It's just that it breaks what's inside it.

[manucorporat]

ok, gotcha. I think we could add an directive that actually could be applied to any component to hide it when the keyboard appears

[plul]

That sounds like a nice way to hide elements when the keyboard is shown.

It still leaves the issue of something potentially being wrong with the ion-footer implementation, seeing as elements within it start misbehaving once an ngIf applied to ion-footer destroys and re-creates the ion-footer. I suppose the condition in the ngIf need not be related to the keyboard at all, so it is perhaps, a separate issue.

[Cheng007]

What about the footer ion-tabs?

[plul]

@Cheng007 I do not know how ion-tabs behave in relation to the keyboard, I do not use it. I am not always using the ion-footer to display tabs. I am using the ion-footer as a general purpose way of pinning content to the bottom of the viewport.

[mmp7700]

@plul I am experiencing issues with ngIf on my ion-footer. The styling of elements inside such as ion-toolbar are not displaying correctly. Will search other threads to see if anyone else has this problem. I'll also add that the problem doesn't occur in the browser when running ionic serve. But when I view it on iOS it doesn't display properly.

[Lazarus9000]

Same here, *ngIf and [hidden] don't work properly on the footer (using 3.7)
Using [hidden] will hide it fine, but when it shows, only content is shown (in my case a button), not the footer background (in this case, the button 'floating' above the page content)

[bogomips]

Any news here? I'd like to have a footer in my login page with "create new account" on the left and "Forgot password?" on the right.
I guess that's a pretty common design.
If I use both ion-footer or a div position:absolute the keyboard pushes everything up.
So at the moment I just left these element under the last button which i don't like it.
Thanks

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!