React-popper: <Popper> that references a target inside an overflow:hidden container?

[clintharris]

I have poppers that are rendered inside overflow:hidden containers; this causes the poppers to be partially hidden/cropped.

@FezVrasta has indicated that this should be achievable by putting the <Popper> somewhere outside of the overflow:hidden container have it reference the target.

I'm not sure how to do this with react-popper, though. Any ideas/advice?

[FezVrasta]

You have two possibilities:

1. Use something like react-portal to move the popper element somewhere else (usually body):

<Manager>
  <Reference />
  <Portal><Popper /></Portal>
</Manager>

1. Manually define the structure:

<Manager>
  <div style={{ overflow: 'hidden' }}>
    <Reference />
  </div>
  <Popper />
</Manager>

[clintharris]

Thanks for the suggestion with react-portal. I started using it with a custom component like this:

class MyTooltip extends React.Component {
  render() {
    return (
      <Manager>
        <Target>{this.props.children}</Target>
        <Portal isOpened={this.props.show}>
          <Popper placement={arrowLocation} className="popper" style={style}>
            Here's the popper's contents...
            <Arrow className="popper__arrow" style={arrowStyle}/>
          </Popper>
        </Portal>
      </Manager>
    );
  }
}

I keep on getting the following error, however:

TypeError: Cannot read property 'jquery' of null
    at new Popper (preview.bundle.js:268374)
    at Popper._createPopper (preview.bundle.js:265958)
    at Popper._updatePopper (preview.bundle.js:265937)
    at Popper.componentDidMount (preview.bundle.js:265914)
    at 

If I hard-code <Portal isOpened={true}> the jquery error never happens... It only occurs if I have <Portal isOpened={this.props.show}> and I then toggle the show prop...

Any ideas? I've tried passing refs to the target and the popper, but that didn't seem to have any effect.

[FezVrasta]

May you provide a CodePen or CodeSandbox or similar to let me play with it?

[clintharris]

Hmm... Can't seem to find a hosted, Codepen-compatible version of react-popper. This seems to depend on webpack:

 TypeError: Cannot read property 'object' of undefined
    at Object.module.exports (react-popper.js:sourcemap:173)
    at __webpack_require__ (react-popper.js:sourcemap:35)
    at Object.defineProperty.value (

@souporserious Do you know if there's a production bundle hosted somewhere that would work with Codepen?

[clintharris]

I've started a CodePen where you can see the issue with getting react-popper to even load: https://codepen.io/clintharris/pen/oGLKga?editors=1010

[clintharris]

I found a work-around:

class MyTooltip extends React.Component {
  render() {
    if(!this.props.show) {
      return this.props.children;
    }
    return (
      <Manager>
        <Target>{this.props.children}</Target>
        <Portal isOpened={true}>
          <Popper placement={arrowLocation} className="popper" style={style}>
            Here's the popper's contents...
            <Arrow className="popper__arrow" style={arrowStyle}/>
          </Popper>
        </Portal>
      </Manager>
    );
  }
}

I think I'm just gonna roll with this for now. Thanks for the tip on portal and quick responses!