Textfield - changing the secure value changing font css

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!

<bountysource-plugin>

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[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

[A-Shleifman]