fix: ref in functional components

src/overridable.js

@@ -36,24 +36,30 @@ export function parametrize(Component, extraProps) {
 /**
  * React component to enable overriding children when rendering.
  */
-function Overridable({id, children, ...restProps}) {
+const Overridable = React.forwardRef(({id, children, ...restProps}, ref) => {
   const overriddenComponents = useContext(OverridableContext);
   const child = children ? React.Children.only(children) : null;
   const childProps = child ? child.props : {};
 
   if (id in overriddenComponents) {
     // If there's an override, we replace the component's content with the override + props
     const Overridden = overriddenComponents[id];
-    const element = React.createElement(Overridden, {...childProps, ...restProps});
+    const props = {...childProps, ...restProps};
+    if (ref) {
+      props.ref = ref;
+    }
+    const element = React.createElement(Overridden, props);
     return <DevModeWrapper id={id}>{element}</DevModeWrapper>;
   } else if (child) {
     // No override? Clone the Overridable component's original children
-    const element = React.cloneElement(child, childProps);
+    const element = ref ? React.cloneElement(child, {ref}) : React.cloneElement(child, childProps);
     return <DevModeWrapper id={id}>{element}</DevModeWrapper>;
   } else {
     return null;
   }
-}
+});
+
+Overridable.displayName = 'Overridable';
 
 Overridable.propTypes = {
   /** The children of the component */

src/overridable.test.js

@@ -221,3 +221,42 @@ describe('Tests for Overridable.component', () => {
     expect(NewCmp.find('ul')).toHaveLength(0);
   });
 });
+
+describe('Tests for ref forwarding', () => {
+  class RefChild extends Component {
+    render() {
+      return <div className="ref-child" />;
+    }
+  }
+
+  test('it should forward a ref to the cloned child', () => {
+    const ref = React.createRef();
+    mount(
+      <Overridable id="NotOverridden.container" ref={ref}>
+        <RefChild />
+      </Overridable>
+    );
+    expect(ref.current).toBeInstanceOf(RefChild);
+  });
+
+  test('it should forward a ref to the overridden component', () => {
+    const ref = React.createRef();
+    mount(
+      <OverridableContext.Provider value={{'Overridden.container': RefChild}}>
+        <Overridable id="Overridden.container" ref={ref}>
+          <div />
+        </Overridable>
+      </OverridableContext.Provider>
+    );
+    expect(ref.current).toBeInstanceOf(RefChild);
+  });
+
+  test('it should render normally when no ref is given', () => {
+    const mounted = mount(
+      <Overridable id="NotOverridden.container">
+        <RefChild />
+      </Overridable>
+    );
+    expect(mounted.find('.ref-child')).toHaveLength(1);
+  });
+});