0

Screenshot of how the TextField appears when secure is set to true Screenshot of when I change secure to false. Cursor too far from text.

And here's a Playground sample of the issue - make sure the cursor is in the textfield while hitting the show/hide button to see the problem.

I have a simple TextField for user to input a password in my NS+Angular app. I am trying to implement show/hide functionality. Here's what I tried:

    <GridLayout rows="auto, auto" class="field" row="0">
        <Label text="Password" class="field-label" *ngIf="focused" textWrap="true" row="0"></Label>
        <TextField hint="Password" [ngClass]="{'field-text': true, 'inactive': !focused}" [secure]="pwdSecure" 
            formControlName="password" [(ngModel)]="password" 
            (ngModelChange)="focused = password.length ? true : false" 
            (blur)="focused = password.length ? true : false" returnKeyType="next" (returnPress)="focusConfirmPwd()" row="1">
        </TextField>
        <Label *ngIf="focused" [text]="pwdSecure ? 'show' : 'hide'" (tap)="pwdSecure = !pwdSecure" class="secure pull-right" textWrap="true" row="1"></Label>
    </GridLayout>

In the .ts file, I am initializing the relevant variables as follows:

    pwdSecure = true;
    confirmPwdSecure = true;

When I hit 'hide' all is well, the password mask shows nicely. When I hit 'show' though, the password text shows but there is too much space between the text and the cursor. The cursor remains where it should be when there is a mask.

Any idea what I need to do to fix this?

Thanks!

Basya Rosemann
  • 180
  • 2
  • 14

1 Answers1

2

I have tested your case in looks like it's bug on android, this works fine on ios. So solution to your problem is to set the cursor at the end of text whenever user taps on hide/show Label.

  1. Add a focus event for your textfiled and assign textfield to a variable for further usagae.
  <TextField [ngClass]="{'field-text': true, 'inactive': !focused}" (focus)="onFocus($event)" hint="Password" [secure]="pwdSecure" [(ngModel)]="textFieldValue" (ngModelChange)="focused = password.length ? true : false"
            row="1" (blur)="focused = password.length ? true : false"></TextField>

    <Label *ngIf="focused" [text]="pwdSecure ? 'show' : 'hide'" (tap)="chandPwdtype()" class="secure pull-right" textWrap="true" row="1"></Label>
  1. Add code to your .ts file

import { TextField } from 'tns-core-modules/ui/text-field/text-field';

import { isAndroid } from 'tns-core-modules/platform/platform';

onFocus(e) { this.textfield = e.object; }

chandPwdtype() {
    this.pwdSecure = !this.pwdSecure
    if (isAndroid) {
        setTimeout(() => {
            alert(this.textfield);
            this.textfield.android.setSelection(this.textFieldValue.length);
        }, 0);
    }else{
        let newPosition = this.textfield.ios.endOfDocument;
        //alert(this.textfield.ios.beginningOfDocument);
        //alert(this.textfield.ios.endOfDocument);
        this.textfield.ios.selectedTextRange = 
        this.textfield.ios.textRangeFromPositionToPosition(newPosition, newPosition);
}

If you want further clarification, please a look at playground, it's working fine on both platforms.

Narendra
  • 4,514
  • 2
  • 21
  • 38
  • I'm actually experiencing this on iOS, didn't test on Android. I'm using a custom font and font size, I don't know if that might be related. I would like to try implementing your suggestion for iOS - do you know what the syntax for that would be? Thanks for your help here! – Basya Rosemann Nov 16 '18 at 06:59
  • Perhaps something like this: `this.pwdField.nativeElement.position(from: this.pwdField.nativeElement.selectedRange.start, to: this.pwdField.nativeElement.selectedRange.start);` however 'from' and 'to' are causing errors in NS...? – Basya Rosemann Nov 16 '18 at 07:00
  • https://stackoverflow.com/questions/34922331/getting-and-setting-cursor-position-of-uitextfield-and-uitextview-in-swift/34922332 – Narendra Nov 17 '18 at 02:18
  • if it is ios get the access of Native properties like this this.textfield.ios.endOfDocument – Narendra Nov 17 '18 at 02:20
  • 1
    Thank you - I'm getting the following error: `CONSOLE ERROR [native code]: ERROR TypeError: this.textfield.ios.textRange is not a function. (In 'this.textfield.ios.textRange(newPosition, newPosition)', 'this.textfield.ios.textRange' is undefined)` – Basya Rosemann Nov 18 '18 at 18:51
  • use textRangeFromPositionToPosition – Narendra Nov 19 '18 at 03:20
  • It's not helping the issue. I found this post (https://stackoverflow.com/questions/14220187/uitextfield-has-trailing-whitespace-after-securetextentry-toggle) that deals with the issue, but that solution is not working for me either... I tried `this.pwdSecure = !this.pwdSecure; const savedValue = this.form.get('password').value; this.form.get('password').setValue('temp'); this.form.get('password').setValue(savedValue);`. – Basya Rosemann Nov 19 '18 at 08:40
  • I have added a playground sample to show the issue. – Basya Rosemann Nov 19 '18 at 09:16
  • which version of ios are you testing? It is working fine for ios 12.1 – Narendra Nov 19 '18 at 22:48