From ada1dea1065724bf62fbadd22ca45c4287225ae0 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Mar 2023 09:27:35 +0100
Subject: [PATCH] Fix custom permissions checkbox selection

---
 changelog/unreleased/change-update-vue        |  1 +
 .../src/components/OcCheckbox/OcCheckbox.vue  | 20 +++++++------------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/changelog/unreleased/change-update-vue b/changelog/unreleased/change-update-vue
index 345bb33c442..d3cc40e283b 100644
--- a/changelog/unreleased/change-update-vue
+++ b/changelog/unreleased/change-update-vue
@@ -28,3 +28,4 @@ https://github.com/owncloud/web/pull/8285
 https://github.com/owncloud/web/pull/8288
 https://github.com/owncloud/web/pull/8308
 https://github.com/owncloud/web/pull/8311
+https://github.com/owncloud/web/pull/8567
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index fb3739f6f2a..62a806f30e9 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { isEqual } from 'lodash-es'
 import { getSizeClass } from '../../utils/sizeClasses'
 import uniqueId from '../../utils/uniqueId'
 /**
@@ -107,7 +108,6 @@ export default defineComponent({
       },
       set: function (value) {
         this.$emit('update:modelValue', value)
-        this.setChecked(value)
       }
     },
     classes() {
@@ -116,7 +116,7 @@ export default defineComponent({
         'oc-rounded',
         'oc-checkbox-' + getSizeClass(this.size),
         { 'oc-checkbox-outline': this.outline },
-        { 'oc-checkbox-checked': this.modelValue }
+        { 'oc-checkbox-checked': this.isChecked }
       ]
     },
     labelClasses() {
@@ -124,18 +124,12 @@ export default defineComponent({
         'oc-invisible-sr': this.hideLabel,
         'oc-cursor-pointer': !this.disabled
       }
-    }
-  },
-  created() {
-    this.setChecked(this.model)
-  },
-  methods: {
-    setChecked: function (value) {
-      if (typeof value === 'boolean') {
-        this.checked = value
-      } else {
-        this.checked = value.includes(this.option)
+    },
+    isChecked() {
+      if (typeof this.model === 'boolean') {
+        return this.model
       }
+      return this.model.some((m) => isEqual(m, this.option))
     }
   }
 })