Nativescript: IOS: Applying class to secure TextField randomly change it's font-size

[konradkubiec]

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

Yes. I didn't find any discussion on this topic.

Which platform(s) does your issue occur on?

iOS

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

• CLI: 2.3.0
• Cross-platform modules: 2.3.0

  "nativescript": {
    "platforms": {
      "ios": "2.1.1",
      "android": "2.1.1"
    }
  },

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
  package.json file of your project)

    "tns-ios": {
      "version": "2.3.0"
    },
    "tns-android": {
      "version": "2.3.0"
    }

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

First, you need a secured TextField with some text. Add CSS class (or by [class.className]="condition", or by changing className in component code) to this TextField or it's parents. Font-size will unexpectedly change. You can prevent some of the changes by adding font-size in new-assigned CSS class definition. When you remove the class, font-size will change to some unexpected size. When you change TextField text, font-size changes again...

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

XML:

<StackLayout>
  <Switch class="switch" [(ngModel)]="pinFlag"></Switch>
  <TextField #pin class="input-rounded"

      [class.incorrect]="pinFlag"

      hint="Provide 6 digits PIN"
      keyboardType="number" secure="true"
      [(ngModel)]="pin" (ngModelChange)="onPinChange($event)"></TextField>
</StackLayout>

CSS:

.input-rounded{ font-size: 20; }
.incorrect {
    color: #f00;
    font-size: 20;
}

Use Switch and TextField text changes to see how font-size changes.

PS. Is there any method to remove this up-down move in iOS secure TextField content, that happens when a character changes to * or when you add a new character to ** ?

[NickIliev]

Hello @konradkubiec

I have tested your case but was not able to reproduce it at my side.
However, I've noticed that your versions of runtimes and modules are not the latest stable which of this moment is 2.4.0. Can you try to update your NativeScript CLI and your package.json , remove the platforms folder and rebuild your application.

If you are still hitting the issue afterward, perhaps you can send us a sample project that reproduces this behaviour.

[konradkubiec]

I've updated NativeScript CLI and rebuilt platforms.

I see a difference in app styling but there is the same bug with TextField. I'll prepare a repo tomorrow with a sample app so it will be easier to replicate my situation.

[konradkubiec]

Demo app: https://github.com/konradkubiec/input-demo

[konradkubiec]

@NickIliev Did you have time to take a look at my demo?

[NickIliev]

@konradkubiec I am on it - will write back when I have more information

Update: can confirm that I am reproducing this behavior at my side - logging this as a bug.

[NickIliev]

Code to reproduce here

• enter some value in the TextFiled (it should have secure="true" set)
• use the switch to change the CSS style for the TextField
  result: the font-size is changed and the real font-size is applied back only when the user starts typing in again.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.