Delay in updating TextField text on bounded property change (and wrong position of text cursor afterwards on Android)

From @konradkubiec on December 12, 2016 11:15

Did you verify this is a real problem by searching [Stack Overflow]

Yes. I didn’t find any information about this issue.

Which platform(s) does your issue occur on?

Both Android and iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.0
• Cross-platform modules: 2.3.0

"nativescript": {
    "platforms": {
      "ios": "2.1.1",
      "android": "2.1.1"
    }
  }

• Runtime(s):

"tns-ios": {
      "version": "2.4.0"
    },
    "tns-android": {
      "version": "2.4.1"
    }

Please tell us how to recreate the issue in as much detail as possible.

Use given example code. Function testValFunc called by ngModelChanage should:

• remove all non-digit characters from event string
• assign modified string to testVal component’s property

As a result, TextField should have a new text value (testVal).

Test case: Writing 1234abd cause testVal change (correct logs in console) but not TextField text property update. When you write an additional number (e.g. 3, so new text is 1234abd3) only then TextField text property is updated (new value: 12343). On Android, text cursor jumps to position 0 (beginning of the text). On iOS it stays at the end of a text. If I remind it right, in CLI 2.3.0, it was opposite. In my opinion, it should go to the text end as default for both platforms.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

XML (app.component.html):

<StackLayout>
   <TextField [ngModel]='testVal' (ngModelChange)='testValFunc($event)'></TextField>
</StackLayout>

TS:

import { Component } from "@angular/core";
import { View } from "ui/core/view";
import { TextField } from "ui/text-field";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
    styleUrls: ["app-common.css"]
})

export class EnterComponent {
  testVal: string;

  testValFunc(str:string){
        str = str.replace(/[^\d]/g, '');
        this.testVal = str;
        console.log(this.testVal);
  }
}

Copied from original issue: NativeScript/NativeScript#3282

[tsonevn]

Hi @konradkubiec, Thank you for reporting this issue. I was able to reproduce this behavior on my side and we will research this problem further. In the meantime as a temporary solution you could get the TextField by id and then to access its text property. In this case the value should be changed as expected. For further help, you could review the sample code below.

app.component.html

<StackLayout>
   <TextField id="testfield" updateTextTrigger="focusLost" [ngModel]='testVal' (ngModelChange)='testValFunc($event)'></TextField>
</StackLayout>

app.component.ts

import { Component } from "@angular/core";
import { EventData, PropertyChangeData } from 'data/observable';
import {Page} from "ui/page";
import {TextField} from "ui/text-field"

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    constructor(private page:Page){

    }
     testVal: string;
     exampleNumber="123"

    testValFunc(str:string){
        str = str.replace(/[^\d]/g, '');
        var that = this;
        console.log("new value");
        console.log(str);
        var tfield:TextField = <TextField> this.page.getViewById("testfield");
        setTimeout(function(){
            tfield.text=str;
        }, 100)
  }

}

Hope this will help

[FanniPutnoczki]

Please someone fix this, the cursor bug is really annoying, and if I manually move the cursor to the end, the textfield becomes very laggy