TextView doesn't lose focus when the keyboard is dismissed

Question

This behavior occurs only on Android devices

<TextView [(ngModel)]="textData" updateTextTrigger="focusLost" (ngModelChange)="updateText()"></TextView>

Since I use the updateTextTrigger as focusLost, the model doesn't update since the TextView always stays focused unit we switch the focus to another element, which I can't do since that is the only input element at the page.

Is this an expected behavior on Android devices and how to handle this??

or

Is this an issue with the NativeScript and should be created as an issue??

@EddyVerbruggen I save the `textData` whenever the user finishes typing the content and AFAIK implementing a debounce would require me to write a wrapper around this component and it'll also hit the backend more frequently than this approach — Jai Krishnan, May 30 '17 at 05:50
The debounce could be a `pipe`, I've done that in the past. If you want I can paste the code here as the answer. — Eddy Verbruggen, May 30 '17 at 08:48
Using `pipe` for debounce is interesting and would love to look at the code. Here is a minimal sample code if you would like to know what exactly I'm expecting [TextViewBlur.zip](https://github.com/NativeScript/nativescript-angular/files/1037851/TextViewBlur.zip) — Jai Krishnan, May 30 '17 at 09:46

score 1 · Accepted Answer · answered May 30 '17 at 11:12

I'm using a slightly adjusted version of the debounce pipe shown here: https://github.com/numsu/angular2-debounce/blob/master/src/debounce.directive.ts

The code in the link above updates the model as well, which I didn't need. So pick your poison. My code is:

import { Input, Output } from "@angular/core";
import { EventEmitter, ElementRef, OnInit, Directive } from "@angular/core";
import { Observable } from "rxjs";

@Directive({
  selector: '[debounce]'
})
export class DebounceDirective implements OnInit {
  @Input() debounceDelay: number = 700;
  @Input() debounceFromEvent: string = "tap";
  @Output() debounceFunction: EventEmitter<any> = new EventEmitter();

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit(): void {
    const eventStream = Observable
        .fromEvent(this.elementRef.nativeElement, this.debounceFromEvent)
        .debounceTime(this.debounceDelay);

    eventStream.subscribe(input => this.debounceFunction.emit(input));
  }
}

And you can use it as this on a Label or whatever input you fancy:

<Label debounce debounceDelay="700" (debounceFunction)="saveChanges()" (tap)="updateStock(selectedArticle.article, 1)" text="Update"></Label>

Thank you I could use this for other scenarios as well but I wish we had something like `ngModelOptions` in `Angular2` that would make life easy — Jai Krishnan, May 30 '17 at 13:12
The `TextView` doesn't seem to fire `keyup` or `propertyChange` events. Which event should I use? — Jai Krishnan, May 30 '17 at 14:40
Using `textChange` works. But still the `TextView` thats always focused doesn't look so good. Should find a way to remove its focus when the keyboard closes. — Jai Krishnan, May 31 '17 at 08:37

TextView doesn't lose focus when the keyboard is dismissed

1 Answers1