From 916029c007e166255e6cafcbae2cc9a700908ef4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 30 Nov 2022 17:05:48 +0530
Subject: [PATCH] fix(gui): avoiding blocking click event propagation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Checkbox.vue | 27 +++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 1e533f3c05..579a732852 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  IsFormInj,
+  ReadonlyInj,
+  getMdiIcon,
+  inject,
+  useSelectedCellKeyupListener,
+} from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -17,9 +25,9 @@ const emits = defineEmits<Emits>()
 
 const active = inject(ActiveCellInj, ref(false))
 
-let vModel = $computed({
+let vModel = $computed<boolean>({
   get: () => !!props.modelValue && props.modelValue !== '0' && props.modelValue !== 0,
-  set: (val) => emits('update:modelValue', val),
+  set: (val: boolean) => emits('update:modelValue', val),
 })
 
 const column = inject(ColumnInj)
@@ -39,7 +47,13 @@ const checkboxMeta = $computed(() => {
   }
 })
 
-function onClick(force?: boolean) {
+function onClick(force?: boolean, event?: MouseEvent) {
+  if (
+    (event?.target as HTMLElement)?.classList?.contains('nc-checkbox') ||
+    (event?.target as HTMLElement)?.closest('.nc-checkbox')
+  ) {
+    return
+  }
   if (!readOnly?.value && (force || active.value)) {
     vModel = !vModel
   }
@@ -64,16 +78,17 @@ useSelectedCellKeyupListener(active, (e) => {
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
     }"
-    @click="onClick(false)"
+    @click="onClick(false, $event)"
   >
     <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
       <Transition name="layout" mode="out-in" :duration="100">
         <component
           :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
+          class="nc-checkbox"
           :style="{
             color: checkboxMeta.color,
           }"
-          @click.stop="onClick(true)"
+          @click="onClick(true)"
         />
       </Transition>
     </div>