React Fiber - MenuItem not rendering due to findDOMNode

[bai]

Problem description

Modal-based components fail to render due to findDOMNode returning null in this line.

Possibly related to facebook/react#8905, facebook/react#9475, and facebook/react#8854

Versions

• Material-UI: next
• React: 16.0.0-alpha.12
• Browser: Chrome 60

[oliviertassinari]

Looks like an issue with the portal. I have the following error, the ref callback is called after componentDidUpdate. Notice that it's working fine with the stable release of React. The behaviour seems to have changed.

    return (
      <Portal
        open
        ref={node => {
          this.mountNode = node ? node.getLayer() : node;
        }}
      >
        <div
          data-mui-test="Modal"
          className={classNames(classes.modal, className)}
          ref={node => { // Called after componentDidUpdate
            this.modal = node;
          }}
          {...other}
        >
          {!disableBackdrop && this.renderBackdrop(backdropProps)}
          {modalChild}
        </div>
      </Portal>
    );

I have found a relevant issue: facebook/react#9808.

[oliviertassinari]

I have managed to narrow down a minimal reproduction with the very same code, only the React version changed: (see the log messages after clicking on toggle).

• react@latest: https://jsfiddle.net/q75fmstr/: componentDidUpdate is called last ✅
• react@next: https://jsfiddle.net/3apqnhmw/ componentDidUpdate isn't called last 🔴

I think that we can use @gaearon comment: facebook/react#9808 (comment), to write a cross next/latest Portal component.

[stefensuhat]

I still get this issue on react 16 beta-5.

Material UI v1-beta-4. any fix?