StrictMode Compatibility

dist/react-onclickoutside.js

@@ -188,6 +188,20 @@ function onClickOutsideHOC(WrappedComponent, config) {
         throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
       };
 
+      _this.__getComponentNode = function () {
+        var instance = _this.getInstance();
+
+        if (config && typeof config.setClickOutsideRef === 'function') {
+          return config.setClickOutsideRef()(instance);
+        }
+
+        if (typeof instance.setClickOutsideRef === 'function') {
+          return instance.setClickOutsideRef();
+        }
+
+        return reactDom.findDOMNode(instance);
+      };
+
       _this.enableOnClickOutside = function () {
         if (typeof document === 'undefined' || enabledInstances[_this._uid]) {
           return;
@@ -293,14 +307,14 @@ function onClickOutsideHOC(WrappedComponent, config) {
         }
       }
 
-      this.componentNode = reactDom.findDOMNode(this.getInstance()); // return early so we dont initiate onClickOutside
+      this.componentNode = this.__getComponentNode(); // return early so we dont initiate onClickOutside
 
       if (this.props.disableOnClickOutside) return;
       this.enableOnClickOutside();
     };
 
     _proto.componentDidUpdate = function componentDidUpdate() {
-      this.componentNode = reactDom.findDOMNode(this.getInstance());
+      this.componentNode = this.__getComponentNode();
     };
     /**
      * Remove all document's event listeners for this component

src/index.js

@@ -86,6 +86,20 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
       );
     };
 
+    __getComponentNode = () => {
+      const instance = this.getInstance();
+
+      if (config && typeof config.setClickOutsideRef === 'function') {
+        return config.setClickOutsideRef()(instance);
+      }
+
+      if (typeof instance.setClickOutsideRef === 'function') {
+        return instance.setClickOutsideRef();
+      }
+
+      return findDOMNode(instance);
+    };
+
     /**
      * Add click listeners to the current document,
      * linked to this component's state.
@@ -109,14 +123,14 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
         }
       }
 
-      this.componentNode = findDOMNode(this.getInstance());
+      this.componentNode = this.__getComponentNode();
       // return early so we dont initiate onClickOutside
       if (this.props.disableOnClickOutside) return;
       this.enableOnClickOutside();
     }
 
     componentDidUpdate() {
-      this.componentNode = findDOMNode(this.getInstance());
+      this.componentNode = this.__getComponentNode();
     }
 
     /**

test/test.js

@@ -372,7 +372,7 @@ describe('onclickoutside hoc', function() {
       );
     });
   });
-  
+
   describe('with advanced settings disableOnclickOutside', function() {
     class Component extends React.Component {
       constructor(...args) {
@@ -403,7 +403,7 @@ describe('onclickoutside hoc', function() {
       var instance = component.getInstance();
       assert(instance.state.clickOutsideHandled === false, 'clickOutsideHandled should not get flipped');
     });
-    
+
     it('disableOnclickOutside as true should not call handleClickOutside until enableOnClickOutside is called', function() {
       var component = TestUtils.renderIntoDocument(
         React.createElement(wrapComponent(Component), { disableOnClickOutside: true }),
@@ -417,4 +417,61 @@ describe('onclickoutside hoc', function() {
       assert(instance.state.clickOutsideHandled === true, 'clickOutsideHandled should not get flipped');
     });
   });
+
+  describe('with setClickOutsideRef configured instead of findDOMNode', function() {
+    class Component extends React.Component {
+      callbackCalled = false;
+      clickOutsideRef = null;
+
+      handleClickOutside() {}
+
+      setClickOutsideRef() {
+        this.callbackCalled = true;
+        return this.clickOutsideRef;
+      }
+
+      render() {
+        return React.createElement('div', {
+          ref: c => {
+            this.clickOutsideRef = c;
+          },
+        });
+      }
+    }
+
+    it('uses the DOM node defined by setClickOutsideRef in a class', function() {
+      var component = TestUtils.renderIntoDocument(React.createElement(wrapComponent(Component)));
+      document.dispatchEvent(new Event('mousedown'));
+      var instance = component.getInstance();
+      assert(instance.callbackCalled === true, 'setClickOutsideRef was called in class component');
+    });
+
+    let callbackCalled = false;
+    let ref = null;
+    function FuncComponent() {
+      FuncComponent.setClickOutsideRef = () => {
+        callbackCalled = true;
+        return ref;
+      };
+      return React.createElement('div', {
+        ref: c => {
+          ref = c;
+        },
+      });
+    }
+
+    it('uses the DOM node defined by setClickOutsideRef in a function', function() {
+      TestUtils.renderIntoDocument(
+        React.createElement(
+          wrapComponent(FuncComponent, {
+            setClickOutsideRef: () => FuncComponent.setClickOutsideRef,
+            handleClickOutside: () => () => {},
+          }),
+        ),
+      );
+      document.dispatchEvent(new Event('mousedown'));
+
+      assert(callbackCalled === true, 'setClickOutsideRef was called in function component');
+    });
+  });
 });