diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js index e987e36f95..18c6ed46ff 100644 --- a/src/addons/Portal/Portal.js +++ b/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 && ( <> diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js index 383e8bbcfc..8b0f25f446 100644 --- a/test/specs/addons/Portal/Portal-test.js +++ b/test/specs/addons/Portal/Portal-test.js @@ -171,7 +171,7 @@ describe('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', () => { , ) - wrapper.instance().contentRef.current.tagName.should.equal('P') + wrapper.instance().state.contentRef.tagName.should.equal('P') }) })