Forward Ref Stub

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

@@ -1,8 +1,8 @@
 import cn from "classnames";
 import { pick } from "lodash";
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes, Ref } from "react";
 
-import { withStyles } from "talk-ui/hocs";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
 
 import BaseButton, { BaseButtonProps } from "../BaseButton";
@@ -28,6 +28,12 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** If set renders a button with secondary colors */
   secondary?: boolean;
+
+  /** ref to the HTMLButtonElement */
+  ref?: Ref<HTMLButtonElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement>;
 }
 
 class Button extends React.Component<InnerProps> {
@@ -40,6 +46,7 @@ class Button extends React.Component<InnerProps> {
       primary,
       secondary,
       disabled,
+      forwardRef,
       ...rest
     } = this.props;
 
@@ -57,12 +64,13 @@ class Button extends React.Component<InnerProps> {
         className={rootClassName}
         classes={pick(classes, "keyboardFocus", "mouseHover")}
         disabled={disabled}
+        ref={forwardRef}
         {...rest}
       />
     );
   }
 }
 
-const enhanced = withStyles(styles)(Button);
+const enhanced = withForwardRef(withStyles(styles)(Button));
 export type ButtonProps = PropTypesOf<typeof enhanced>;
 export default enhanced;