Modal does not work with React 16

[jochenberger]

Probably the same issue as facebook/react#9808.
When the Modal is shown and tries to get focus (via componentDidUpdate -> onShow - focus), setModalNode will not have been called and getDialogElement will return undefined.

[jochenberger]

https://github.com/callemall/material-ui/pull/7218/files might be helpful here.

[jquense]

Fo v16 we'll want to switch to the new (YAH!) portal api

[billschaller]

Edit: I had a subpackage still referencing the older version of react-bootstrap. Latest is still broken with React 16 though :(

@jquense @jochenberger Current shipping version of react-bootstrap is still referencing react-overlay@0.7.0. That version is still using string refs, and that's not working in the Modal component for some reason with React 16.

Would you consider hotfixing this? Kind of a blocker :(

[jquense]

we can't hotfix RB to v0.8 because there are a few breaking changes, we need to do it on a major bump of RB

[billschaller]

Could you push an @next version to npm?

[jquense]

I'm not sure that would even help no version of RO uses the new portal api yet.

string refs should work still with the old API I would open an issue on the React repo since its a v16 bug

[billschaller]

Ah - Part of my app was on 30.10, and the string ref was still there.

The latest release is still broken in 16 though.

It looks like the child component of Portal passed in by Modal is not mounted by the time Modal.componentDidUpdate is called - this makes sense, as AFAIK that lifecycle callback doesn't fire until the commit phase. The proper thing to do is to have the child you pass to the Portal component kick off onShow instead of doing it from cDU or cDM in the Modal component itself.

[billschaller]

@jquense Sent you a chat request

[jquense]

@billschaller sorry just saw the request. You are better off pinging me in the react-bootstrap discord channel https://discord.gg/0ZcbPKXt5bXLs9XK i'm monasticpanic