ngStyle not removing values

[lmartorella]

I'm submitting a ...

• regression from 1.6.x to 1.7.8
• security issue
• issue caused by a new browser version
• other

Current behavior:
In AngularJS 1.6 (and even in 1.7.0) the ngStyle directive was able to add/remove single properties when the expression for the single property was evaluated as false.
For example:
ng-style="{'float': isRight && 'right' }"
was dynamically adding/removing the 'float: right' style when the isRight scope expression changed.
In Angular 1.7.8 this only happens when isRight switches from false to true. Switching back to false will leave the 'float: right' style set.

As a workaround, this expression instead works in both 1.6.x and 1.7.8:
ng-style="isRight && {'float': 'right' }"

Expected / new behavior:
Expressions like
ng-style="{'float': isRight && 'right' }"
should be still supported for backward compatibility. Or at least the change (if intentional) should be documented in the changelog documentation.
Regards

Minimal reproduction of the problem with instructions:
Here a plunkr to replicate the issue:
https://plnkr.co/edit/FsWbrVvfAYvuJCoGszi2?p=preview

AngularJS version: 1.7.8

Browser: [all]

[lmartorella]

Seems to be introduced in 1.7.6

[gkalpak]

Yes, this was indeed introduced in d6098ee. The reason it happens is that browsers seem to ignore invalid values for styles.

Previously, ngStyle would always remove the old styles (by means of .css(someStyleProp, '')) and then apply the new style. After d6098ee, if the style property is included in the new styles object, we assume that it will be overwritten when setting the new styles, so we don't clear the old style first.

But, when the property value is invalid (in this case, when isRight is false, we will try to set element.style.color = false, which is invalid), it is just ignored by the browser, thus the old style remains.

Not sure how to address this. It is not possible to detect whether a value is valid or not (OK, it might be possible, but it would be prohibitively costly), so we need to either:

1. Revert d6098ee and keep the old behavior (which fixes this regression, but re-introduces the issue fixed by that commit).
2. Bite the bullet, call it a breaking change and just document it as such (which is not idealmgiven that there should be no breaking changes in patch releases - even more so in LTS period 😁)

[lmartorella]

Correct, the 'false' value is the culprit.
Rewriting the expression as:
ng-style="{'float': (isRight && 'right') || null }"
triggers the correct behavior.

BTW, how many DOM style properties support boolean values instead of strings? Most probably in the majority of the cases the 'false' value can safely remove the property.

Thanks, L