From 37d2d8bedf544c49956c76eec7283c1d1da11223 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 18 Dec 2023 22:01:37 +0000
Subject: [PATCH] Fix category and checkbox onChange event handling

---
 CommonUI/src/Components/CategoryCheckbox/Category.tsx |  2 +-
 CommonUI/src/Components/Checkbox/Checkbox.tsx         | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/CommonUI/src/Components/CategoryCheckbox/Category.tsx b/CommonUI/src/Components/CategoryCheckbox/Category.tsx
index abb3ae4c9d..366418b862 100644
--- a/CommonUI/src/Components/CategoryCheckbox/Category.tsx
+++ b/CommonUI/src/Components/CategoryCheckbox/Category.tsx
@@ -56,9 +56,9 @@ const Category: FunctionComponent<CategoryProps> = (
             setCategoryCheckboxState(CategoryCheckboxValueState.Indeterminate);
         }
 
-        props.onChange(currentValues);
     }, [currentValues]);
 
+
     return (
         <div>
             {props.category && (
diff --git a/CommonUI/src/Components/Checkbox/Checkbox.tsx b/CommonUI/src/Components/Checkbox/Checkbox.tsx
index 3776fe9bd8..bb19464a3f 100644
--- a/CommonUI/src/Components/Checkbox/Checkbox.tsx
+++ b/CommonUI/src/Components/Checkbox/Checkbox.tsx
@@ -39,12 +39,6 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
         setValue(props.value || false);
     }, [props.value]);
 
-    React.useEffect(() => {
-        if (props.onChange) {
-            props.onChange(value, props.isIndeterminate);
-        }
-    }, [value]);
-
     return (
         <div>
             <div
@@ -59,6 +53,11 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
                             event: React.ChangeEvent<HTMLInputElement>
                         ) => {
                             setValue(event.target.checked);
+
+                            if (props.onChange) {
+                                props.onChange(event.target.checked, props.isIndeterminate);
+                            }
+                            
                         }}
                         ref={checkboxRef}
                         autoFocus={props.autoFocus}