fix(forwardRef): fix error boundary not forwarding the ref

Author: Rendez

src/IntersectionObserver.js

@@ -183,20 +183,32 @@ class IntersectionObserver extends React.Component {
     }
 }
 
-class GuardedIntersectionObserver extends React.Component {
+class ErrorBoundary extends React.Component {
     static displayName = 'ErrorBoundary(IntersectionObserver)';
 
+    static propTypes = {
+        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    };
+
     componentDidCatch(error, info) {
         if (Config.errorReporter) {
             Config.errorReporter(error, info);
         }
     }
 
     render() {
-        return <IntersectionObserver {...this.props} />;
+        const { forwardedRef, ...props } = this.props;
+
+        return <IntersectionObserver ref={forwardedRef} {...props} />;
     }
 }
 
+const GuardedIntersectionObserver = React.forwardRef((props, ref) => (
+    <ErrorBoundary forwardedRef={ref} {...props} />
+));
+
+GuardedIntersectionObserver.displayName = 'IntersectionObserver';
+
 export {
     GuardedIntersectionObserver as default,
     IntersectionObserver,

src/__tests__/IntersectionObserver.spec.js

@@ -141,6 +141,23 @@ test('reports errors by re-throwing trying observer children without a DOM node'
     Config.errorReporter = originalErrorReporter;
 });
 
+test('error boundary forwards ref', () => {
+    let observer;
+    renderer.create(
+        <GuardedIntersectionObserver
+            onChange={noop}
+            ref={(instance) => {
+                observer = instance;
+            }}
+        >
+            <div />
+        </GuardedIntersectionObserver>,
+        { createNodeMock }
+    );
+
+    expect(observer instanceof IntersectionObserver).toBe(true);
+});
+
 test('should not observe children that equal null or undefined', () => {
     const sizeBeforeObserving = observerElementsMap.size;
     renderer.create(