[react-bootstrap#4194] - ToggleButton explicit handlers for blur and …

…focus
zhuber · Oct 14, 2019 · f0af7bc · f0af7bc
1 parent f7a7aaf
commit f0af7bc
Showing 1 changed file with 8 additions and 4 deletions.
diff --git 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}
         />