From 8f0b70252659ad4fdc510c641bbf843a225c1c5c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@kiteworks.com>
Date: Thu, 1 Aug 2024 14:57:22 +0200
Subject: [PATCH] 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.
---
 .../unreleased/bugfix-resource-table-keyboard-checkbox    | 3 ++-
 .../src/components/OcCheckbox/OcCheckbox.vue              | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/changelog/unreleased/bugfix-resource-table-keyboard-checkbox b/changelog/unreleased/bugfix-resource-table-keyboard-checkbox
index 5257a77e391..a96013050f2 100644
--- a/changelog/unreleased/bugfix-resource-table-keyboard-checkbox
+++ b/changelog/unreleased/bugfix-resource-table-keyboard-checkbox
@@ -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
index 622b41e13b9..f899b10b28d 100644
--- 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>