Error with event bubbling about react-portal HOT 2 CLOSED

this.refs.portal.closePortal()

This is bad design and it will break with React 0.14 since refs will return underlying DOM nodes and not React components anymore.

There are two other and better ways:

Put

<div onClick={function () { }}> // it works without the handler
  <button ref="close" type="button" onClick={this.handleClose}>Close</button>
</div>

into a new component and then you can use

<button ref="close" type="button" onClick={this.props.closePortal}>Close</button>

or if you don't want to create a new component for some reason, you can use the prop isOpened:

<span onClick={(function(e) {this.setState({isOpened: true})}).bind(this)}>
<Portal isOpened={this.state.isOpened}>
  <div onClick={function () { }}> // should work now
    <button ref="close" type="button" onClick={(function(e) {this.setState({isOpened: false})}).bind(this)}>Close</button>
  </div>
</Portal>

I didn't test the code above, so I'm sorry for possible typos.

from react-portal.

Works perfectly, thanks!

This is bad design and it will break with React 0.14 since refs will return underlying DOM nodes and not React components anymore.

This only applies to native DOM components, not custom components:

As with refs, this change does not affect custom components (eg. <MyFancyMenu> or <MyContextProvider>), which remain unaffected by this change.

from react-portal.