Children lose state on block and unblock

[blacktemplar]

I am not sure if I am doing something wrong (I am quite new to react), but when I use BlockUi with children which have a state (like a Form) they get recreated and lose their state on block.

I tracked down why this happens and it seams to be since BlockUi's render function has an if in which it decides how to render. Each case returns its own element with the children inside but then it seams that react doesn't know that the children inside this two Tag elements are the same and destroys the old one and recreates the new one everytime we block or unblock the component.

[TheSharpieOne]

From what I can tell, It's most likely something in your code. Children do not lose state when blocking and unblocking see http://www.webpackbin.com/4yGx1gcBf
Since the children are rendered both while blocking and not blocking (they are always rendered) the children components don't get unmounted and will keep their state.
If you are using the renderChildren={false} prop, then yes your children will lose state since they are not rendered. This is pretty much how this extra feature/prop works.
If you think this is still a problem with this lib can you provide your code or a webpackbin example showcasing this issue? If not, please feel free to close the issue.

[blacktemplar]

As I said I am quite new and it might be a problem of my code. But after I changed this part of your library (as in my pull request), it worked for me. Without the change the constructor of the Subcomponents was called whenever I blocked or unblocked (I tested that by logging something in the constructor), which clearly means the state gets reset. I also saw a short glitch between blocking and the loading symbol which is probably the time where all components rebuild (not only rerendered).

I try to figure out what exactly leads to the problem and give you a minimal example.

[blacktemplar]

Ok it seams to be connected with the fact that my BlockUi has more than one children.

I modified your example and added one more child component: http://www.webpackbin.com/4JRGQ8jrz

Now the state always gets reset on blocking...

If I wrap the two children in a component again, it works again: http://www.webpackbin.com/N1PoVUjrG

So either it should be stated in the documentation, that a BlockUi-Comonent should only have one child or we should change the render of BlockUi (as in my pull request).

[TheSharpieOne]

gotcha. Thanks for getting to the bottom on it.

[TheSharpieOne]

Fixed by #3 via d707fa4. I'll create a new release on tomorrow when I am on a computer. Thanks again.