Inconsistent behavior between style.bind="{}" and style.bind="{ property: undefined }" in newer Chrome
- Dominant language
- JavaScript
- Stars
- 110
- Forks
- 98
- PR merge metrics
- No merged PRs in 30d
Description
**I'm submitting a bug report**
* **Library Version:**
2.1.4
**Please tell us about your environment:**
* **Operating System:**
Linux (Ubuntu Bionic)
* **Node Version:**
Electron 3.0
* **NPM Version:**
6.4.1
* **JSPM OR Webpack AND Version**
JSPM 0.17.0-beta.48
* **Browser:**
Electron 3.0 (Chrome 66)
* **Language:**
Typescript 3.0
**Current behavior:**
Using style.bind="{ property: undefined }"
*does not* unset property if the previous binding had a value for that property.
Using style.bind="{ }"
*does* unset the property if the previous binding had a value for that property.
**Expected/desired behavior:**
It should unset the property the same as if binding to an object without the property key.
In Electron 2.0, this was the behavior. I assume there was a change to style.setProperty() in Chromium
where an undefined value no longer removes the style.
Can we call style.removeProperty (or replace undefined with null or "" when calling setProperty) instead to restore the previous behavior?
https://gist.run/?id=4044775d2efdb1733b55a0b9d92de378&sha=3acf777a662b49c4266c6449c2bf2d8413b250e6
* **What is the motivation / use case for changing the behavior?**
This is how it used to work in a previous browser version.
More importantly, as shown in the demo, the same object bound to style (initially, and on the second button click) results in two different styles applied based on the value bound on the first button click.
Contributor guide
Research direction
Start by running the linked gist.run reproduction in the reported Electron 3.0/Chrome 66 environment and compare style.bind="{}" with style.bind="{ property: undefined }". Trace the style binding path around the mentioned style.setProperty behavior, then verify that an undefined property removes the previous inline style and that the relevant regression is covered by a test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100