Ion-navbar back button and ion-title disappear after closing keyboard

Ionic Framework ionic-v3
1

In my app, I have a page as follows (abstracted):

<ion-header>
    <ion-navbar">
        <ion-title>Comments</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <card-comment-list
        [comments]="comments"
    ></comment-list>
</ion-content>

<ion-footer>
    <comment-input ></comment-input>
</ion-footer>

The comment input components is a form wrapped in a ion-toolbar. When I close the keyboard (native plugin keyboard) and there is a value in the textarea in the input, and there are comments, the back button and ion-title appear to disappear, though I can still click on the back button.

Submitting the form makes the back button and ion-title appear again.

Manually setting the styles and unsetting the styles again in Safari web inspector fixes the issue, so I suspect the DOM is not being updated. But I have no idea how to force it to update.

Screenshots

IMG_0360
IMG_0360.jpg750×1334 37.9 KB

Header shows up fine if there is a value in the textarea but are no comments after closing keyboard

IMG_0361
IMG_0361.jpg750×1334 32.1 KB

Header disappears if there is a value in the textarea and there are comments… I have no idea why, I’m displaying comments in an ion-list

EDIT: I’m using iOS.

2

Somehow managed to figure out a workaround… Don’t ask me how it works, lol…

Page code

<ion-header>
    <ion-navbar [navbar-fix]="content">
        <ion-title>Comments</ion-title>
    </ion-navbar>
</ion-header>

<ion-content #content>
    <card-comment-list
        [comments]="comments"
    ></comment-list>
</ion-content>

<ion-footer>
    <comment-input ></comment-input>
</ion-footer>

Navbar-fix directive

import { Directive, ElementRef, Input, NgZone } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Content, Platform } from 'ionic-angular';
import { Subscription } from 'rxjs/Subscription';

/**
 * @description
 * The 'navbar-fix' directive fixes the bug where back button and title disappears
 * when the keyboard is closed and there is an input that has a value
 */

@Directive({
  selector: '[navbar-fix]'
})
export class NavbarFix {
  @Input('navbar-fix') content: Content;

  private paddingTop:string = "0px";

  private onShowSubscription: Subscription;
  private onHideSubscription: Subscription;

  constructor (
    private elementRef: ElementRef,
    private keyboard: Keyboard,
    private platform: Platform,
    private zone: NgZone
  ) {}

    ngOnInit() {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow()
            .subscribe(e => this.onShow());

            this.onHideSubscription = this.keyboard.onKeyboardHide()
            .subscribe(() => this.onHide());
        }
    }

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

    private onShow() {
        this.elementRef.nativeElement.style.backgroundColor = "#fff";
    }

    private onHide() {
        this.elementRef.nativeElement.style.backgroundColor = "#000";
    }

}