#601 Modal bugs on react ^16

[martindavid]

• Add ReactDOM.unstable_createPortal to support Fiber version.
• Keep ReactDOM.unstable_renderSubtreeIntoContainer as a fallback for < 16 version.

Issue: #601

[TheSharpieOne]

I thought I had commented on this earlier, but I apparently did not. The portal API is supposed to be used in the render AFAIK. This means that the logic would be similar, but separated. The render would return null for react <16 and would return the unstable_createPortal for react 16+. Similarly and separately, the opposite would happen in the renderIntoSubtree method; unstable_renderSubtreeIntoContainer would be called for react <15 and nothing would happen for react 16+.

[kinke]

Thanks @martindavid, I can confirm that this fixes the autoFocus issue for Modals with React 16 (e.g., escape key closing the modal etc.) and the fade-out animation as well. Oh btw, ReactDOM.createPortal() doesn't work with ReactDOM 16.1.1. Edit: Sorry, testing failure on my part, this does NOT work, just like ReactDOM.createPortal() isn't, at least not with React 16.1.1.

The portal API is supposed to be used in the render AFAIK.

@TheSharpieOne: The changes you propose would require more logic changes; renderIntoSubtree() is called in 3 places (show(), hide(), componentDidUpdate()).

[fantua]

@TheSharpieOne when this and #763 can be released? We have some troubles according to this issues.

[virgofx]

ReactDOM.createPortal required.

[virgofx]

It's no longer unstable_createPortal ... Should be ReactDOM.createPortal

https://reactjs.org/docs/portals.html

[geowarin]

I've been fiddling with the code for a couple of hours and I think @TheSharpieOne is correct, the createPortal call needs to happen in the render method, otherwise I cannot get it to work.

With a bit of effort, I made it work with React 16 and I can confirm that the focus problem is fixed.

Personnaly, I find it very difficult to make the two approaches (renderSubtreeIntoContainer vs createPortal) work together, it is a bit of work.