Fix OverlayTrigger unable to use (newer) contexts

Author: mabeyj

src/OverlayTrigger.js

@@ -1,7 +1,6 @@
 import contains from 'dom-helpers/query/contains';
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import warning from 'warning';
 
 import Overlay from './Overlay';
@@ -112,26 +111,12 @@ class OverlayTrigger extends React.Component {
     this.handleMouseOut = e =>
       this.handleMouseOverOut(this.handleDelayedHide, e, 'toElement');
 
-    this._mountNode = null;
-
     this.state = {
       show: props.defaultOverlayShown
     };
   }
 
-  componentDidMount() {
-    this._mountNode = document.createElement('div');
-    this.renderOverlay();
-  }
-
-  componentDidUpdate() {
-    this.renderOverlay();
-  }
-
   componentWillUnmount() {
-    ReactDOM.unmountComponentAtNode(this._mountNode);
-    this._mountNode = null;
-
     clearTimeout(this._hoverShowDelay);
     clearTimeout(this._hoverHideDelay);
   }
@@ -215,31 +200,10 @@ class OverlayTrigger extends React.Component {
     this.setState({ show: false });
   }
 
-  makeOverlay(overlay, props) {
-    return (
-      <Overlay
-        {...props}
-        show={this.state.show}
-        onHide={this.handleHide}
-        target={this}
-      >
-        {overlay}
-      </Overlay>
-    );
-  }
-
   show() {
     this.setState({ show: true });
   }
 
-  renderOverlay() {
-    ReactDOM.unstable_renderSubtreeIntoContainer(
-      this,
-      this._overlay,
-      this._mountNode
-    );
-  }
-
   render() {
     const {
       trigger,
@@ -312,9 +276,19 @@ class OverlayTrigger extends React.Component {
       );
     }
 
-    this._overlay = this.makeOverlay(overlay, props);
-
-    return cloneElement(child, triggerProps);
+    return (
+      <>
+        {cloneElement(child, triggerProps)}
+        <Overlay
+          {...props}
+          show={this.state.show}
+          onHide={this.handleHide}
+          target={this}
+        >
+          {overlay}
+        </Overlay>
+      </>
+    );
   }
 }
 

test/OverlayTriggerSpec.js

@@ -149,7 +149,7 @@ describe('<OverlayTrigger>', () => {
     ReactTestUtils.Simulate.click(overlayTrigger);
   });
 
-  it('Should forward requested context', () => {
+  it('Should forward requested legacy context', () => {
     const contextTypes = {
       key: PropTypes.string
     };
@@ -187,6 +187,38 @@ describe('<OverlayTrigger>', () => {
     contextSpy.calledWith('value').should.be.true;
   });
 
+  it('Should mount overlay in current tree to allow access to context', () => {
+    const Context = React.createContext();
+    const contextSpy = sinon.spy();
+
+    class ContextReader extends React.Component {
+      static contextType = Context;
+
+      render() {
+        contextSpy(this.context.key);
+        return <div />;
+      }
+    }
+
+    class ContextHolder extends React.Component {
+      render() {
+        return (
+          <Context.Provider value={{ key: 'value' }}>
+            <OverlayTrigger trigger="click" overlay={<ContextReader />}>
+              <button>button</button>
+            </OverlayTrigger>
+          </Context.Provider>
+        );
+      }
+    }
+
+    const instance = ReactTestUtils.renderIntoDocument(<ContextHolder />);
+    const overlayTrigger = ReactDOM.findDOMNode(instance);
+    ReactTestUtils.Simulate.click(overlayTrigger);
+
+    contextSpy.calledWith('value').should.be.true;
+  });
+
   describe('overlay types', () => {
     [
       {