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

[tsonevn]

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

[abhayastudios]

@tsonevn what about the cursor position on Android?

I have the setup below but I am encountering the same issue:

<TextField row="0" col="1" hint="Mobile Phone Number" [(ngModel)]="phoneNumber" 
  (textChange)="phoneNumber=handleLeadingZero($event)">
</TextField>

public handleLeadingZero(event) : string {
  return event.value.replace(/^0/,'(0)');
}

I also tried your example with getting a reference to the textfield through the id, but still the cursor ends up at the beginning of the textfield (even though the value is ok).

Thanks!

[abhayastudios]

I was able to solve the issue with the cursor with a little help of the forum

[eggplantPrince]

Is this issue still being worked on? I have to count the character length in two different boxes together and it really throws the user off...

[tsonevn]

Hi @icaruus,
Could you provide more info about what you are trying to achieve?
In case you would like to set max length of the TextField text, the workaround in this issue could help you.

[eggplantPrince]

Hi @tsonevn
Basically what's going on in my application:

User can only submit a 500 character string, but these 500 characters are combined from one text area and one text field. The onChange function gets called as expected for the text area but it always lags one character behind for the text field.

[tsonevn]

Hi @icaruus,
You could try to setup propertyChangeEvent to the TextField and to verify, whether you will have the same issue. For example

<TextField id="testfield" loaded="tfloded($event)" updateTextTrigger="focusLost"></TextField>

tfloded(args){
var textField = args.object;

textField.on("propertyChange", function(propertyChangeData){
  console.log(propertyChangeData.propertyName + " has been changed and the new value is: " + propertyChangeData.value);
});
}

[flodaniel]

Why was this issue closed @tsonevn ?
I am on Nativescript 6.1 and this is still an issue for my setup.
I am using a textfield that should set the text after the user has entered 4 characters. First of all, updating the text from my typescript only works with setting a timout, which is crazy as in an angular project (as mine) this triggers a whole change detection. Secondly the cursor still moves to the front.

Or was there a fix introduced that broke again? The workarounds are really dirty hacks that should not be needed.

[AppsByFen]

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