From f0af7bc8329807b5da1fc44dc27576ca7931152b Mon Sep 17 00:00:00 2001
From: Zak Huber <zakhuber@gmail.com>
Date: Sun, 13 Oct 2019 19:42:58 -0700
Subject: [PATCH] [#4194] - ToggleButton explicit handlers for blur and focus

---
 src/ToggleButton.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/ToggleButton.js b/src/ToggleButton.js
index fa69f0720c..382122fa99 100644
--- a/src/ToggleButton.js
+++ b/src/ToggleButton.js
@@ -65,8 +65,12 @@ const ToggleButton = React.forwardRef(
   ) => {
     const [focused, setFocused] = useState(false);
 
-    const toggleFocus = useCallback(e => {
-      if (e.target.tagName === 'INPUT') setFocused(!focused);
+    const handleFocus = useCallback(e => {
+      if (e.target.tagName === 'INPUT') setFocused(true);
+    }, []);
+
+    const handleBlur = useCallback(e => {
+      if (e.target.tagName === 'INPUT') setFocused(false);
     }, []);
 
     return (
@@ -90,8 +94,8 @@ const ToggleButton = React.forwardRef(
           autoComplete="off"
           checked={!!checked}
           disabled={!!disabled}
-          onFocus={toggleFocus}
-          onBlur={toggleFocus}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           onChange={onChange || noop}
         />