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!

---

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