Ionic keyboard.isVisible property does not control element visibility properly

Question

After many years of reading your answers I have my first question.

SITUATION

In Ionic Angular (v5.3.1) mobile application I'm trying to do simple task - hide element when keyboard opens. Principle is simple:

• I click on text-box
• Event keyboardWillShow happens
• Phone keyboard shows up
• Element hides (*ngIf="keyboard.isVisible")

THE PROBLEM

When keyboard opens - element is still visible. Even if event keyboardWillShow was executed. but - when I click on text-box again - element become hidden, as I needed at the beginning.

SAMPLE CODE

tab1.page.html

<ion-content [fullscreen]="true">
  <ion-textarea placeholder="This is placeholder"></ion-textarea>
  <div *ngIf="keyboard.isVisible">
    Please click on tech area and keyboar will open
  </div>
</ion-content>

tab1.page..ts

import { Component } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard/ngx';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(
    public keyboard: Keyboard
  ) {}

}