Bug: Put contentRef in state to let EventStack track changes

src/addons/Portal/Portal.js

@@ -24,7 +24,6 @@ const debug = makeDebugger('portal')
  * @see Confirm
  */
 class Portal extends Component {
- contentRef = React.createRef()
  triggerRef = React.createRef()
  latestDocumentMouseDownEvent = null
 
@@ -44,15 +43,15 @@ class Portal extends Component {
 
  handleDocumentClick = (e) => {
  const { closeOnDocumentClick } = this.props
+ const { contentRef } = this.state
  const currentMouseDownEvent = this.latestDocumentMouseDownEvent
  this.latestDocumentMouseDownEvent = null
 
  if (
- !this.contentRef.current || // no portal
+ !contentRef || // no portal
  doesNodeContainClick(this.triggerRef.current, e) || // event happened in trigger (delegate to trigger handlers)
- (currentMouseDownEvent &&
- doesNodeContainClick(this.contentRef.current, currentMouseDownEvent)) || // event originated in the portal but was ended outside
- doesNodeContainClick(this.contentRef.current, e) // event happened in the portal
+ (currentMouseDownEvent && doesNodeContainClick(contentRef, currentMouseDownEvent)) || // event originated in the portal but was ended outside
+ doesNodeContainClick(contentRef, e) // event happened in the portal
  ) {
  return
  } // ignore the click
@@ -76,12 +75,13 @@ class Portal extends Component {
  // ----------------------------------------
 
  handlePortalMouseLeave = (e) => {
+ const { contentRef } = this.state
  const { closeOnPortalMouseLeave, mouseLeaveDelay } = this.props
 
  if (!closeOnPortalMouseLeave) return
 
  // Do not close the portal when 'mouseleave' is triggered by children
- if (e.target !== this.contentRef.current) return
+ if (e.target !== contentRef) return
 
  debug('handlePortalMouseLeave()')
  this.mouseLeaveTimer = this.closeWithTimeout(e, mouseLeaveDelay)
@@ -99,6 +99,7 @@ class Portal extends Component {
  }
 
  handleTriggerBlur = (e, ...rest) => {
+ const { contentRef } = this.state
  const { trigger, closeOnTriggerBlur } = this.props
 
  // Call original event handler
@@ -107,7 +108,7 @@ class Portal extends Component {
  // IE 11 doesn't work with relatedTarget in blur events
  const target = e.relatedTarget || document.activeElement
  // do not close if focus is given to the portal
- const didFocusPortal = _.invoke(this.contentRef.current, 'contains', target)
+ const didFocusPortal = _.invoke(contentRef, 'contains', target)
 
  if (!closeOnTriggerBlur || didFocusPortal) return
 
@@ -225,9 +226,13 @@ class Portal extends Component {
  handleRef(this.props.triggerRef, c)
  }
 
+ updateContentRef = (ref) => {
+ this.setState({ contentRef: ref })
+ }
+
  render() {
  const { children, eventPool, mountNode, trigger } = this.props
- const { open } = this.state
+ const { open, contentRef } = this.state
 
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
@@ -239,7 +244,7 @@ class Portal extends Component {
  {open && (
  <>
  <PortalInner
- innerRef={this.contentRef}
+ innerRef={this.updateContentRef}
  mountNode={mountNode}
  onMount={this.handleMount}
  onUnmount={this.handleUnmount}
@@ -251,13 +256,13 @@ class Portal extends Component {
  name='mouseleave'
  on={this.handlePortalMouseLeave}
  pool={eventPool}
- target={this.contentRef}
+ target={contentRef}
  />
  <EventStack
  name='mouseenter'
  on={this.handlePortalMouseEnter}
  pool={eventPool}
- target={this.contentRef}
+ target={contentRef}
  />
  <EventStack name='mousedown' on={this.handleDocumentMouseDown} pool={eventPool} />
  <EventStack name='click' on={this.handleDocumentClick} pool={eventPool} />

test/specs/addons/Portal/Portal-test.js

@@ -171,7 +171,7 @@ describe('Portal', () => {
  <p />
  </Portal>,
  )
- wrapper.instance().contentRef.current.tagName.should.equal('P')
+ wrapper.instance().state.contentRef.tagName.should.equal('P')
  })
 
  it('maintains ref to DOM node with React component', () => {
@@ -182,7 +182,7 @@ describe('Portal', () => {
  <EmptyComponent />
  </Portal>,
  )
- wrapper.instance().contentRef.current.tagName.should.equal('P')
+ wrapper.instance().state.contentRef.tagName.should.equal('P')
  })
  })