Nativescript: Textfield - changing the secure value changing font css

[shabib3]

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

Yes, I found this -> Issue number 3221 - but it didn't help me.

Tell us about the problem

I created a "password" textfield and a button of "show-hide" that responsible for changing the "secure" value of the mentioned textfield.
The problem in when I press the "show-hide" button the font css properties change.

This is a video on the problem in my end -> Problem video
Notice that in the video the font style change is happens also on the hint text.

Which platform(s) does your issue occur on?

Android.
Didn't check on IOS.

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

• CLI: 3.1.2
• Cross-platform modules: 3.1.0
• Runtime(s): 3.1.1

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

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

html file.

<StackLayout>
    <StackLayout orientation="horizontal">
        <Label text="Password" class="field-label"></Label>
        <Label [text]="passwordSecureModeText" class="show-hide-text" (tap)="secureModeChange()"></Label>
    </StackLayout>
    <TextField class="field-text-area" [hint]="Password" [secure]="passwordSecureMode" [(ngModel)]="password"></TextField>
</StackLayout>

ts file

export class SignUpComponent {
    public password: string;
    public passwordSecureMode: boolean = true;
    public passwordSecureModeText: string = "Show";

    private secureModeChange() {
        this.passwordSecureMode = !this.passwordSecureMode;
        this.passwordSecureModeText = this.passwordSecureMode ? "Show" : "Hide";
    }
}

css file

.field-label {
    color: #f2f2f2;
    font-family: 'Product Sans',Arial,sans-serif;
    font-size: 22px;
    font-weight: 300;
}

.show-hide-text {
    color: #f2f2f2;
    font-family: 'Product Sans',Arial,sans-serif;
    font-size: 14px;
    font-weight: 100;
    vertical-align: center;
    margin-left: 50px;
    margin-right: 50px;
}

.field-text-area {
    color: #f2f2f2;
    border-bottom-color: #f2f2f2;
    font-family: 'Product Sans',Arial,sans-serif;
    font-size: 18px;
    font-weight: 100;
    placeholder-color:#f2f2f2;
}

Hope that is enough information. :)

Thank you!

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @shabib3,
Thank you for reporting this behavior,
I tested this case on my side and have to confirm that this is a real issue for Android.
For your convenience, I am attaching sample project, where this problem could be reproduced.
For further info and possible workaround, keep track on the issue
Archive.zip

[shabib3]

@tsonevn Thanks!
I will follow this issue :)

[CristianHCol]

The issue still persist??
I reproduce this issue today.
Thanks

[volodyakurpita]

And there is still a problem now. Also I can reproduce this today.

[surdu]

In this Playground example I noticed that when I set the font-size for the TextView wrapper element (comented out in app.css) the font difference is fixed, but this fix doesn't seem to always work.

[sulymkaa]

is there any updates for this issue?

[tsonevn]

Hi @sulymkaa,
The issue is still under review. Meanwhile, you can check if the suggestion provided by @surdu will work for you.

[A-Shleifman]

[mpht]

Here is a workaround for this (tested on android only - but should be compatible with ios)

This helped me for finding the workaround: https://github.com/chrisjenx/Calligraphy/issues/186

Wait until TextField is loaded (tfLoaded)

<TextField (loaded)="tfLoaded($event) autocorrect="false" 
      hint="password" [(ngModel)]="text">
</TextField>

The loaded function:

  public tfLoaded(args) {
    this.textField = args.object;
    if (isAndroid) {
      this.typeface = args.object.android.getTypeface();
      this.updateVisibility();
    }
  }

updateVisibility() looks like this:

  private updateVisibility() {
    // secure or plain text
    this.textField.android.setInputType(this.showPassword ? 16385 : 129)
    // make sure to use the initial typeface
    this.textField.android.setTypeface(this.typeface);
    // move cursor back to the end
    this.textField.android.setSelection(this.textField.android.length());
  }

and somewhere there is the toggle button (in my case the eye symbol):

public toggleVisibility(): void {
    this.showPassword = !this.showPassword;
    // for iOS let nativescript do the work 
    if(isIOS) {
        this.textField.secure = this.showPassword;
    }
    // for android we do it like this
    else if (isAndroid && this.typeface) {
      this.updateVisibility();
    }
  }

so for iOs nativescript should do all the work [ios:secure]="!showPassword"
For android we do all the work in updateVisibility()

Edit: Fixed formatting
Edit2: changed [ios:secure]="!showPassword" to ios:secure="{{!showPassword}}"
Edit3: I realized that ios:secure="{{!showPassword}}"/[ios:secure]="!showPassword" on TextField was not a good solution. It was also affecting the android Textfield style. Therefore I change the _secure_ value for iOS only via code. I updated the post to show the changes

[Firetrip]

When is this issue going to be fixed? Is it even planned to be fixed? Seems like a basic behaviour a product with version 6+ should not have.

[NickIliev]

@Firetrip @Arystosedes the product is open-source and we are accepting PR. If you are interested in contributing then please follow the contributing guidelines (here and here)