Inline border style not rendering correctly

[jsiwhitehead]

Do you want to request a feature or report a bug?
Reporting a bug. Certain changes to inline border styles aren't updated correctly in the DOM.

What is the current behavior?
Incorrect rendering.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

Changing the inline style of a div from
{ border: '30px solid green', borderRightColor: 'red' }
to
{ border: '30px solid green' }
results in the border-right-color being undefined (i.e. black), rather than green.

https://jsfiddle.net/jsiwhitehead/eu8ojfh3/4/

What is the expected behavior?
Rendering a div with inline style { border: '30px solid green' } should give it that border, regardless of what the border style was set to on a previous render.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Tested in 15.4.2 on the latest versions of Chrome, Firefox and Safari. Unaware of it working properly in previous versions of React but not sure.

[behnammodi]

this behavior is correctly because in borderStyles after 2000ms state change just removed borderRightColor: 'red' and change to inherit color

please see this example:

https://jsfiddle.net/itten/utdmyet6/2/

and this:

https://jsfiddle.net/itten/zjr0pwwa/

[jsiwhitehead]

What do you mean sorry?

In your second fiddle you're just making the right hand border go back to green by setting it explicitly, which shouldn't be necessary.

Setting the border of a div as

{ border: '30px solid green', borderRightColor: 'green' }

or

{ border: '30px solid green' }

should surely render as the same?

[behnammodi]

please see this:

https://jsfiddle.net/itten/utdmyet6/1/

[behnammodi]

in this state

{ border: '30px solid green', borderRightColor: 'red' }

with this state

{ border: '30px solid green' }

just "borderRightColor: 'red'" removed and reactjs just remove border-right-color and set to inherit

no update all style

[jsiwhitehead]

Are you trying to explain how the bug might be happening? If so, then sure I can follow you. Although doing inspect element on my initial fiddle shows that the final style of the div is:

width: 100px;
height: 100px;
border-width: 30px;
border-style: solid;
border-top-color: green;
border-bottom-color: green;
border-left-color: green;
border-image: initial;

rather than what you're implying:

width: 100px;
height: 100px;
border: 30px solid green;
border-right-color: inherit;

Either way, I'm pretty sure React isn't supposed to give different result depending on previous state, so if I ask for a div with style border: 30px solid green; then that's what I expect, regardless of what it was before. No?

[behnammodi]

your explanation is correctly. react not set border-right-color to inherit, just removed

[syranide]

Overlapping styles are not supported. #6348

[jsiwhitehead]

Ah ok, apologies for not spotting the existing issues, I'll close this. Thanks @syranide!