From 6dbfbc43da48b2171d3948281d3d4f8332c6e97b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 25 Sep 2024 14:37:47 +0200
Subject: [PATCH] fix(checkbox): use sibling css selector instead of has

This makes the checkbox work as intended on older browsers which do not support the :has selector.

Resolves https://kolaente.dev/vikunja/vikunja/issues/2713

(cherry picked from commit 15d95f16da86d57edd02dbe09fd3b55e185b75d9)
---
 frontend/src/components/base/BaseCheckbox.vue | 37 ++++++-------------
 .../src/components/input/FancyCheckbox.vue    |  9 ++---
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/base/BaseCheckbox.vue b/frontend/src/components/base/BaseCheckbox.vue
index 39c42dec8..2a3c40547 100644
--- a/frontend/src/components/base/BaseCheckbox.vue
+++ b/frontend/src/components/base/BaseCheckbox.vue
@@ -3,33 +3,22 @@
 		v-cy="'checkbox'"
 		class="base-checkbox"
 	>
-		<input
-			:id="checkboxId"
-			type="checkbox"
-			class="is-sr-only"
-			:checked="modelValue"
-			:disabled="disabled || undefined"
-			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
+		<label
+			class="base-checkbox__label"
 		>
-
-		<slot
-			name="label"
-			:checkbox-id="checkboxId"
-		>
-			<label
-				:for="checkboxId"
-				class="base-checkbox__label"
+			<input
+				type="checkbox"
+				class="is-sr-only"
+				:checked="modelValue"
+				:disabled="disabled || undefined"
+				@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
 			>
-				<slot />
-			</label>
-		</slot>
+			<slot />
+		</label>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
-import {createRandomID} from '@/helpers/randomId'
-
 withDefaults(defineProps<{
 	modelValue?: boolean,
 	disabled: boolean,
@@ -38,10 +27,8 @@ withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
+	(event: 'update:modelValue', value: boolean): void
 }>()
-
-const checkboxId = ref(`checkbox_${createRandomID()}`)
 </script>
 
 <style lang="scss" scoped>
@@ -53,7 +40,7 @@ const checkboxId = ref(`checkbox_${createRandomID()}`)
 }
 
 .base-checkbox:has(input:disabled) .base-checkbox__label {
-	cursor:not-allowed;
+	cursor: not-allowed;
 	pointer-events: none;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/input/FancyCheckbox.vue b/frontend/src/components/input/FancyCheckbox.vue
index 18dd78b69..9118afdb0 100644
--- a/frontend/src/components/input/FancyCheckbox.vue
+++ b/frontend/src/components/input/FancyCheckbox.vue
@@ -38,7 +38,6 @@ const emit = defineEmits<{
 }>()
 </script>
 
-
 <style lang="scss" scoped>
 .fancy-checkbox {
   display: inline-block;
@@ -70,8 +69,8 @@ const emit = defineEmits<{
 	}
 }
 
-.fancy-checkbox:not(:has(input:disabled)):hover .fancy-checkbox__icon,
-.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
+.fancy-checkbox:hover input:not(:disabled) + .fancy-checkbox__icon,
+.fancy-checkbox input:checked + .fancy-checkbox__icon {
 	--stroke-color: var(--primary);
 }
 </style>
@@ -80,13 +79,13 @@ const emit = defineEmits<{
 // Since css-has-pseudo doesn't work with deep classes,
 // the following rules can't be scoped
 
-.fancy-checkbox:has(:not(input:checked)) .fancy-checkbox__icon {
+.fancy-checkbox :not(input:checked) + .fancy-checkbox__icon {
 	path {
 		transition-delay: 0.05s;
 	}
 }
 
-.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
+.fancy-checkbox input:checked + .fancy-checkbox__icon {
 	path {
 		stroke-dashoffset: 60;
 	}