fix spacebar firing change event twice

ShadetuftOwO · Apr 6, 2021 · 90f3d8f · 90f3d8f
1 parent e22deef
commit 90f3d8f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/renderer/common/Checkbox.svelte b/src/renderer/common/Checkbox.svelte
@@ -1,5 +1,6 @@
 <script>
-    import {handleKeyboardToggle} from "../stores/controls.js";
+    // NOTES: preventing the default click event behavior is needed to stop the change event being fired twice when the spacebar is pressed.
+    import {handleKeyboardToggle, checkItem} from "../stores/controls.js";
 
     export let label;
     export let checked = false;
@@ -8,7 +9,7 @@
     let checkbox;
 </script>
 
-<div class="checkbox" on:keypress={handleKeyboardToggle(checkbox)}>
+<div class="checkbox" on:keypress={handleKeyboardToggle(checkbox)} on:click={checkItem(checkbox)}>
     <label>
         <input type="checkbox" {disabled} bind:this={checkbox} bind:checked on:change>
         {#if label}

diff --git a/src/renderer/stores/controls.js b/src/renderer/stores/controls.js
@@ -4,14 +4,14 @@ export const radioSelectedIndex = writable(0);
 
 let i = 0;
 
-function checkItem(item) {
+export function checkItem(item) {
     item.checked = !item.checked;
     const changeEvent = new Event("change");
     item.dispatchEvent(changeEvent);
 }
 
 export const handleKeyboardToggle = (checkbox) => {
-    if ((event.key === "Enter" || event.key === " ") && checkbox.disabled != true) {
+    if ((event.key === "Enter" || event.key === " ") && !checkbox.disabled) {
         checkItem(checkbox);
     }
 };