Nativescript: FormattedString inside Button has wrong background color after animation

[doumr]

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, I did not found any.

Tell us about the problem

When using Button with FormattedString inside it and the background color of the Button is changed via animation, the background color of the FormattedString is not changed.

Which platform(s) does your issue occur on?

Android

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

• CLI: 3.2.1
• Cross-platform modules: 3.1.1
• Runtime(s): 3.2.0
• Plugin(s):

"dependencies": {
    "@angular/animations": "~4.2.0",
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/router": "~4.2.0",
    "nativescript-angular": "~4.2.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "~3.1.0",
    "zone.js": "~0.8.2"
  }

This problem was not occuring with the cross-platform modules 3.0.0 and android runtime 3.1.1.

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

Reproduced behavior in playground: https://play.nativescript.org/?id=8cArU2Fb8w0jPjDWXtvV0

1. Create new {N} application: tns create MyApp --ng
2. Add Button with FormattedString in it
3. Animate the background color of the button
4. The background color of the FormattedString is not changed

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

view:

<Button>
  <FormattedString>
    <Span text="button text"></Span>
  </FormattedString>
</Button>

css:

Button {
    background-color: green;
    animation-name: button-highligh;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes button-highligh {
    from { background-color: green; }
    to { background-color: blue; }
}

---

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

[tsonevn]

Hi @doumr,
Thank you for reporting this issue.
I tested this scenario and indeed the backgroundColor of the Span will not be changed properly while using FormattedString with animations. This issue could be reproduced also with non-Angular project while using modules 3.2.0 and @next. I am attaching a project, which could be used for debugging.

For further info, please keep track on the issue.
Archive.zip

[RadouaneRoufid]

Any solution or workaround for this ?

[tsonevn]

Hi @RadouaneRoufid,
At this time there is no available workaround, which could be used for this scenario. However, any PR, which provides a fix will be highly appreciated. For further info, you could also review our contributing guidelines.

[doumr]

@RadouaneRoufid Actually, I have found a workaround with the [email protected] and [email protected]. When you set the background-color property of the FormattedString to transparent (like so <FormattedString style="background-color: transparent;">) then it works as expected.
You can see the workaround in action here: https://play.nativescript.org/?template=play-ng&id=DypmBB&v=3

Therefore I guess this issue can be closed as there is a workaround for this. Do you agree @tsonevn ?

[tsonevn]

Hi @doumr,
I am glad to hear that you have found a workaround. However, I think that we should keep the issue open until it is fixed. Also, it would help the other user to find the suggested temporary solution.

[felixkrautschuk]

I also want to use this workaround, but I don't want to define the css in the xml with the style-property.

I tried to write <FormattedString className="formtattedstr-btn"> ... </FormattedString> but the styles are not applied to the Button. The className property is a valid property for FormattedString, so I wonder why this does not work...?

[rynop]

This same bug exists on iOS

[bundyo]

One possible workaround for all buttons in SCSS can be this:

Button {
    > *,
    > * > * {
        background-color: transparent;
    }
}

FormattedString and Span element selectors do not work, but child selectors still do.

@felix-idf Probably didn't work as the background is set on the Span, not the FormattedString. Setting a class on the Span and using it for the background-color works.

Nevertheless, it would be great if this is fixed.