Nativescript/Angular textField blur event not working

Question

Good afternoon everyone,

I'm making a chat app in nativescript (angular/typescript) and i need to detect when the user presses the "keyboard down" button on an android device. However, when the user presses this button, the blur event attached to my textField is not called. Can anyone help me? Below are my code samples. (Please note that the keyboard down button is not the same as the back button!!)

chat.component.html:

<TextField #textInput backgroundColor="lightgray" width="100%" hint="Typ een bericht" secure="false" returnKeyType="done"
        (returnPress)="sendMsg($event)" autocorrect="false" maxLength="254" (focus)="raiseInput()" (tap)="raiseInput()"
        (blur)="lowerInput()">
    </TextField>

chat.component.ts:

    raiseInput() {
    console.log('focus');
    this.chatListHeight = "50"
}
lowerInput() {
    console.log('blur');
    this.chatListHeight = "92"
}

The console logs 'focus' when i click on the textField, but when i click the keyboard down button it doesn't log 'blur'

Thanks in advance, Jari

Answer 1

If the goal is to modify the height of the view when the keyboard is showing/hiding, you can use ViewTreeObserver.OnGlobalLayoutListener.

listenToKeyboardChanges(): void {
    const that = this;
    // if this is triggered to early, it would error out because of frame not being defined
    if (!Frame.topmost()) {
      setTimeout(() => this._listenToKeyboardChangesAndroid(), 100);
      return;
    }
    if (!Frame.topmost().currentPage) {
      setTimeout(() => this._listenToKeyboardChangesAndroid(), 100);
      return;
    }
    const currentView = Frame.topmost().currentPage.android;

    this.androidObserver = new android.view.ViewTreeObserver.OnGlobalLayoutListener(
      {
        onGlobalLayout(): void {
          const newKeyboardIsOpened = Utils.android
            .getInputMethodManager()
            .isAcceptingText();

          const rect = new android.graphics.Rect();
          currentView.getWindowVisibleDisplayFrame(rect);
          const rootView = Application.getRootView();
          if (rootView) {
            that._screenHeight = Application.getRootView().getMeasuredHeight();
          }
          const missingSize = that._screenHeight - (rect.bottom - rect.top);
          const isOpen = missingSize < -that._screenHeight * 0.15;

          // this runs outside of angular zone, we will need to
          // run inside so change detection can be called when a UI
          // update depends on this observable
          that.zone.run(() => {
              
             // isOpen will tell you if the keyboard is open or not

          });
        },
      }
    );
    currentView
      .getViewTreeObserver()
      .addOnGlobalLayoutListener(this.androidObserver);
}

A simpler alternative that might also work for your case is to add the following to your AndroidManifest.xml. That should let Android automatically resize the view depending on whether the keyboard is showing or not.

<activity
  ...
  android:windowSoftInputMode="adjustResize">