fix: toggling checkboxes via enter key

Follow-up of #11312: fixes all checkboxes in Web by adjusting the `OcCheckbox` component. The enter press event did not set any value, which was the issue.
owncloud · Aug 1, 2024 · 909c717 · 909c717
1 parent 8c3aabf
commit 909c717
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/...d/bugfix-resource-table-keyboard-checkbox → ...nreleased/bugfix-keyboard-checkbox-toggle b/...d/bugfix-resource-table-keyboard-checkbox → ...nreleased/bugfix-keyboard-checkbox-toggle
@@ -1,6 +1,7 @@
 Bugfix: Toggling checkboxes via keyboard
 
-Toggling checkboxes via the keyboard enter key in the resources table has been fixed and does now work.
+Toggling checkboxes via the keyboard enter key has been fixed and does now work.
 
 https://github.com/owncloud/web/pull/11312
+https://github.com/owncloud/web/pull/11315
 https://github.com/owncloud/web/issues/10730
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -8,7 +8,7 @@
       :class="classes"
       :value="option"
       :disabled="disabled"
-      @keydown.enter="$emit('click', $event)"
+      @keydown.enter="keydownEnter"
     />
     <label :for="id" :class="labelClasses" v-text="label" />
   </span>
@@ -133,6 +133,12 @@ export default defineComponent({
       }
       return this.model.some((m) => isEqual(m, this.option))
     }
+  },
+  methods: {
+    keydownEnter(event: KeyboardEvent) {
+      this.model = !this.model
+      this.$emit('click', event)
+    }
   }
 })
 </script>