diff --git a/packages/imgui/src/components/toggle.ts b/packages/imgui/src/components/toggle.ts
index 1ecfc006ca..b3338fa9b5 100644
--- a/packages/imgui/src/components/toggle.ts
+++ b/packages/imgui/src/components/toggle.ts
@@ -70,9 +70,10 @@ export const toggleRaw = (
     }
     const focused = gui.requestFocus(id);
     let changed = !gui.buttons && gui.hotID === id && gui.activeID === id;
-    const v = val[i];
+    focused && (changed = handleButtonKeys(gui) || changed);
+    changed && (val[i] = !val[i]);
     box.attribs = {
-        fill: v ? gui.fgColor(hover) : gui.bgColor(hover),
+        fill: val[i] ? gui.fgColor(hover) : gui.bgColor(hover),
         stroke: gui.focusColor(id)
     };
     gui.add(box);
@@ -84,8 +85,6 @@ export const toggleRaw = (
                 label
             )
         );
-    focused && (changed = handleButtonKeys(gui) || changed);
-    changed && (val[i] = !v);
     gui.lastID = id;
     return changed;
 };