From 592c57e65625ae6f64a9f6078adfb86dfce14229 Mon Sep 17 00:00:00 2001
From: Connor Turland <1409121+Connoropolous@users.noreply.github.com>
Date: Wed, 8 Nov 2023 21:08:55 -0800
Subject: [PATCH] only toggle for ButtonCheckbox if focused

---
 .../components/ButtonCheckbox/ButtonCheckbox.tsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx b/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx
index 858f98ce..1e736570 100644
--- a/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx
+++ b/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Checkbox from '../Checkbox/Checkbox'
 
 import './ButtonCheckbox.scss'
@@ -18,6 +18,7 @@ const ButtonCheckbox: React.FC<ButtonCheckboxProps> = ({
   icon,
   text,
 }) => {
+  const [isFocused, setIsFocused] = useState(false)
   useEffect(() => {
     // listen for Enter key to be pressed, but
     // ignore if Command/Ctrl is also pressed
@@ -26,11 +27,15 @@ const ButtonCheckbox: React.FC<ButtonCheckboxProps> = ({
         onChange(!isChecked)
       }
     }
-    document.addEventListener('keydown', handleKeyDown)
+    if (isFocused) {
+      document.addEventListener('keydown', handleKeyDown)
+    }
     return () => {
-      document.removeEventListener('keydown', handleKeyDown)
+      if (isFocused) {
+        document.removeEventListener('keydown', handleKeyDown)
+      }
     }
-  }, [isChecked, onChange])
+  }, [isFocused, isChecked, onChange])
   return (
     <div
       role="button"
@@ -45,6 +50,8 @@ const ButtonCheckbox: React.FC<ButtonCheckboxProps> = ({
           : ''
       }`}
       onClick={() => onChange(!isChecked)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
     >
       <div className="button-checkbox-icon-text">
         <div className="button-checkbox-icon">{icon}</div>