Forward Ref Stub

src/core/client/ui/components/BaseButton/BaseButton.tsx

@@ -1,8 +1,13 @@
 import cn from "classnames";
-import React from "react";
+import React, { Ref } from "react";
 import { ButtonHTMLAttributes, StatelessComponent } from "react";
 
-import { withKeyboardFocus, withMouseHover, withStyles } from "talk-ui/hocs";
+import {
+  withForwardRef,
+  withKeyboardFocus,
+  withMouseHover,
+  withStyles,
+} from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
 
 import * as styles from "./BaseButton.css";
@@ -10,7 +15,6 @@ import * as styles from "./BaseButton.css";
 interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** If set renders an anchor tag instead */
   anchor?: boolean;
-
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -22,6 +26,12 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** This is passed by the `withMouseHover` HOC */
   mouseHover?: boolean;
+
+  /** ref to the HTMLButtonElement */
+  ref?: Ref<HTMLButtonElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement>;
 }
 
 /**
@@ -34,6 +44,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   classes,
   keyboardFocus,
   mouseHover,
+  forwardRef,
   type: typeProp,
   ...rest
 }) => {
@@ -58,11 +69,11 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.mouseHover]: mouseHover,
   });
 
-  return <Element {...rest} className={rootClassName} />;
+  return <Element {...rest} className={rootClassName} ref={forwardRef} />;
 };
 
-const enhanced = withStyles(styles)(
-  withMouseHover(withKeyboardFocus(BaseButton))
+const enhanced = withForwardRef(
+  withStyles(styles)(withMouseHover(withKeyboardFocus(BaseButton)))
 );
 export type BaseButtonProps = PropTypesOf<typeof enhanced>;
 export default enhanced;