switch to ReactDOM.createPortal #201

jochenberger · 2017-09-15T08:57:28Z

Modal stops working in React 16 (#188). I thought this might fix it but it doesn't. It might be a good idea to do the switch anyway.

jochenberger · 2017-09-15T09:08:50Z

Just switching to ReactDOM.createPortal doen't help, it produces the same error.

jochenberger · 2017-09-15T09:12:57Z

src/Portal.js

 * The children of `<Portal/>` component will be appended to the `container` specified.
 */
+
+const useCreatePortal = ReactDOM.createPortal !== undefined;


Should we also support the deprecated ReactDOM.unstable_ createPortal? IIRC, it's only present in React 16 pre-releases.

i'd go with "no"; just support the releases i think

jquense · 2017-09-15T12:36:06Z

Thanks for the help, you might want to looks at the tests in Rea t for how the new API works. It's not the same as the old one you actually call it during render()

jochenberger · 2017-09-15T14:05:02Z

I ran the tests with React 15 and 16 and they passed. But I can have another look.

jquense · 2017-09-15T16:50:51Z

I mean look at React's tests for createPortal, not ours, for proper usage of the api :)

jochenberger · 2017-09-18T07:24:37Z

Getting closer. The tests that require React.Children.only to throw stop working, but since that also affects PositionSpec, I think it's an unrelated issue.
There are still two other tests failing in PortalSpec though.

jochenberger · 2017-09-18T08:17:19Z

I'm struggling with when to call _mountOverlayTarget. _mountOverlayTarget needs to find the DOM node for the container. It uses ReactDOM.findDOMNode via utils/getContainer, which means that it must not be called during render.

taion

Why the change to lifecycle around creating the portal in cWM rather than cDM?

taion · 2017-09-22T14:55:28Z

src/Portal.js

 * The children of `<Portal/>` component will be appended to the `container` specified.
 */
+
+const useCreatePortal = ReactDOM.createPortal !== undefined;


i'd go with "no"; just support the releases i think

jochenberger · 2017-09-25T05:48:40Z

cDM is too late because the overlay target needs to be initialized when we call createPortal from render.

jquense · 2017-09-25T13:25:16Z

src/Portal.js

  };

+  componentWillMount(){
+    if (useCreatePortal){


this also needs a canUseDOM guard here, for serverside rendering. dom-helpers exports that constant for eas of use

jquense · 2017-09-25T13:26:03Z

src/Portal.js


  render() {
-    return null;
+    if (useCreatePortal && this.props.children) {


paired with my comment above, this needs to confirm this._overlayTarget exists for the SSR case

jquense · 2017-09-25T13:27:11Z

test/ModalSpec.js

  });

-  it('Should throw with multiple children', function () {
+  xit('Should throw with multiple children', function () {


why are these failing now?

I have no idea. But the failure is not caused by my changes (PositionSpec fails too). I suspect, there are some changes around how errors are handled and/or reported in React 16.

I opened #207 to track that down.

taion · 2017-09-25T15:17:01Z

Given that this needs to mount its own extra portal element, I don't think you can use the cWM-based flow.

I think you need to create the element in cDM, then e.g. check this.state in render to see if we have a portal element.

jquense · 2017-09-25T15:25:41Z

So the new Portal API is awkward. We want to render the portal element on the first render if possible to avoid missing updates or bubbling issues that the older api has. But yeah, it doesn't work if the mount container is isn't just a DOM node, or in the SSR case. I'm not sure what the best option forward is...I'm leaning towards just requiring a DOM node as a container vs a component instance but that might dramatically reduce the usefulness of the component?

Side note, the behavior between the old and new API is different, createPortal, allows events to bubble through as if it was a real child

taion · 2017-09-25T15:27:24Z

Wait why do we need _overlayTarget anyway here? There's no way we can safely createElement a div in cWM, is there?

jquense · 2017-09-25T15:33:32Z

You can safely create one if you check for document in a browser it's going to be there, its only in SSR env that you can't but that's gonna give the same result as if you double rendered and created in cDM, e.g the component won't get rendered

TryingToImprove · 2017-09-26T16:43:44Z

Note that the examples does not work anymore because of @monastic.panic/component-playground/Playground which is still using React.PropTypes

jquense · 2017-09-27T14:52:30Z

I updated component-playground to fix the propType issues. What do we think about this? Have we solved the "container that is a component instance" issue?

jquense · 2017-09-27T14:58:22Z

Ok, I'm realizing there is a bunch of code here (originally) that I don't really understand any more...

jochenberger · 2017-10-16T06:07:02Z

This is probably obsolete now that #208 is merged.

jochenberger mentioned this pull request Sep 15, 2017

Modal does not work with React 16 #188

Closed

jochenberger commented Sep 15, 2017

View reviewed changes

jochenberger force-pushed the support-react-16 branch from 111edc3 to 933a5e9 Compare September 15, 2017 09:53

jochenberger changed the title ~~WIP: fix Portal in React 16~~ switch to ReactDOM.createPortal Sep 15, 2017

jochenberger force-pushed the support-react-16 branch from 933a5e9 to c3865db Compare September 18, 2017 07:11

jochenberger force-pushed the support-react-16 branch from c3865db to f425ee7 Compare September 18, 2017 07:44

jochenberger force-pushed the support-react-16 branch from ee125be to a66ade9 Compare September 22, 2017 13:55

taion reviewed Sep 22, 2017

View reviewed changes

jquense reviewed Sep 25, 2017

View reviewed changes

jochenberger force-pushed the support-react-16 branch 3 times, most recently from 48b1132 to 2e3c4c6 Compare September 26, 2017 07:52

jochenberger mentioned this pull request Sep 26, 2017

WIP: Test failures with React 16 #207

Closed

jochenberger added 3 commits September 27, 2017 08:39

upgrade to React 16

57dcf67

temporarily disable failing tests

b6a91f7

use ReactDOM.createPortal if it is available

6159004

jochenberger force-pushed the support-react-16 branch from 2e3c4c6 to 6159004 Compare September 27, 2017 06:40

jochenberger closed this Oct 16, 2017

switch to ReactDOM.createPortal #201

switch to ReactDOM.createPortal #201

Uh oh!

Conversation

jochenberger commented Sep 15, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jochenberger commented Sep 15, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jquense commented Sep 15, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jochenberger commented Sep 15, 2017

Uh oh!

jquense commented Sep 15, 2017

Uh oh!

jochenberger commented Sep 18, 2017

Uh oh!

jochenberger commented Sep 18, 2017

Uh oh!

taion left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jochenberger commented Sep 25, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

taion commented Sep 25, 2017

Uh oh!

jquense commented Sep 25, 2017

Uh oh!

taion commented Sep 25, 2017

Uh oh!

jquense commented Sep 25, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TryingToImprove commented Sep 26, 2017

Uh oh!

jquense commented Sep 27, 2017

Uh oh!

jquense commented Sep 27, 2017

Uh oh!

jochenberger commented Oct 16, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jochenberger commented Sep 15, 2017 •

edited

Loading

jquense commented Sep 15, 2017 •

edited

Loading

jquense commented Sep 25, 2017 •

edited

Loading