From 5bc0e29b497b1f54a1a81442c2c23f45f2d30152 Mon Sep 17 00:00:00 2001
From: Zak Huber <zakhuber@gmail.com>
Date: Wed, 9 Oct 2019 20:54:11 -0700
Subject: [PATCH] [#4194] - ref forwarding for ToggleButton

---
 src/ToggleButton.js | 43 +++++++++++++++++++------------------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/ToggleButton.js b/src/ToggleButton.js
index c8db9d939c..787d16c59f 100644
--- a/src/ToggleButton.js
+++ b/src/ToggleButton.js
@@ -45,23 +45,11 @@ const propTypes = {
    */
   inputRef: PropTypes.any,
 
-  /** @ignore */
-  innerRef: PropTypes.any,
 };
 
-class ToggleButton extends React.Component {
-  state = { focused: false };
-
-  handleFocus = e => {
-    if (e.target.tagName === 'INPUT') this.setState({ focused: true });
-  };
-
-  handleBlur = e => {
-    if (e.target.tagName === 'INPUT') this.setState({ focused: false });
-  };
-
-  render() {
-    const {
+const ToggleButton = React.forwardRef(
+  (
+    {
       children,
       name,
       className,
@@ -73,13 +61,23 @@ class ToggleButton extends React.Component {
       inputRef,
       innerRef,
       ...props
-    } = this.props;
+    },
+    ref
+  ) => {
     const { focused } = this.state;
 
+    const handleFocus = e => {
+      if (e.target.tagName === 'INPUT') this.setState({ focused: true });
+    };
+
+    const handleBlur = e => {
+      if (e.target.tagName === 'INPUT') this.setState({ focused: false });
+    };
+
     return (
       <Button
         {...props}
-        ref={innerRef}
+        ref={ref}
         className={classNames(
           className,
           focused && 'focus',
@@ -97,19 +95,16 @@ class ToggleButton extends React.Component {
           autoComplete="off"
           checked={!!checked}
           disabled={!!disabled}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           onChange={onChange || noop}
         />
-
         {children}
       </Button>
     );
   }
-}
+);
 
 ToggleButton.propTypes = propTypes;
 
-export default React.forwardRef((props, ref) => (
-  <ToggleButton innerRef={ref} {...props} />
-));
+export default ToggleButton;