joshwcomeau/react-flip-move

not rerendring divs - maybe because of inherit

ddfridley opened this issue · 3 comments

ddfridley commented

I am having a problem, where the background color of a div is changing, along with being moved in the list, but react-flip-move isn't changing the background color consistently, where a strait render of the list does. This has worked in the past, and I'm not sure when it stopped working (upgrated to react16 or to react-flip-move 3.03.

I have built a demo repo to reproduce it. I suspect that the problem is that the div that needs to change color is inheriting the color from it's parent, because demo.css says:

.demo div { background-color: inherit }

And then the list that I am rendering is of:
class FlipItem extends React.Component { render(){ const {bgColor, id, moveToTop } = this.props; return( <div key={ item-${id} }> <div style={{backgroundColor: bgColor, width: '250px', height: '50px', cursor: "pointer"}} onClick={moveToTop} > <div style={{ textAlign: 'center', height: "100%"}}> {id} </div> </div> </div> ); } }

The inner most div, doesn't have it's background color set, but should be inheriting it from it's parent. I suspect flip-move is optimizing it out.

Demo code at: https://github.com/ddfridley/flipmovebug
and demo is running at:
https://flipmovebug.herokuapp.com/demo.html

It's impacts a lot of code to move away from using inherit. But if you can think of some other work around, I'm game to try. Or, if you can point me to where to start looking in the source, I'm game to try.

Thanks.

ddfridley commented

Update: I rolled back to:
"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-flip-move": "^2.10.2"
And still have the problem, so not not as new as I thought.

joshwcomeau commented

Hey @ddfridley,

I may be misunderstanding, but playing with the demo, I think this behaviour is just a side-effect of how FLIP works.

When I click on an item, the DOM is immediately updated so that the item I click on is moved to the top of the list, and then the CSS animation kicks in to slide it to its normal position. Because of that, the background color is applied immediately, instead of at the end of the animation.

I don't really know of a fix for this... I think it's a fundamental problem of the FLIP technique. I suppose ideally you could add a transition to the background color to have it slowly shift from pink to aqua, but that's beyond the scope of FLIP move. I'd check out react-flip-toolkit, it might be able to handle arbitrary CSS properties.

ddfridley commented