From 26d7759c9e5523541a7f43ad6fb647aedb8f2069 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 21:46:49 +0530
Subject: [PATCH] fix: clear icon in multi select

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 29 ++++++++++++++-----
 .../nc-gui/components/cell/SingleSelect.vue   |  5 ++--
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 971e190d78..19f7c2d51b 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -95,7 +95,7 @@ const vModel = computed({
     return selected
   },
   set: (val) => {
-    if (isOptionMissing.value && val[val.length - 1] === searchVal.value) {
+    if (isOptionMissing.value && val.length && val[val.length - 1] === searchVal.value) {
       return addIfMissingAndSave()
     }
     emit('update:modelValue', val.length === 0 ? null : val.join(','))
@@ -107,13 +107,13 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el) => el.title === a)
-            const opb = options.value.find((el) => el.title === b)
-            if (opa && opb) {
-              return opa.order! - opb.order!
-            }
-            return 0
-          })
+          const opa = options.value.find((el) => el.title === a)
+          const opb = options.value.find((el) => el.title === b)
+          if (opa && opb) {
+            return opa.order! - opb.order!
+          }
+          return 0
+        })
         : modelValue.split(',')
       : modelValue
     : [],
@@ -219,6 +219,17 @@ async function addIfMissingAndSave() {
 const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
+
+const onTagClick = (e: Event, onClose: Function) => {
+  // check clicked element is remove icon
+  if (
+    (e.target as HTMLElement)?.classList.contains('ant-tag-close-icon') ||
+    (e.target as HTMLElement)?.closest('.ant-tag-close-icon')
+  ) {
+    e.stopPropagation()
+    onClose()
+  }
+}
 </script>
 
 <template>
@@ -229,6 +240,7 @@ const search = () => {
     mode="multiple"
     class="w-full"
     :bordered="false"
+    clear-icon
     :show-arrow="!readOnly"
     :show-search="active || editable"
     :open="isOpen && (active || editable)"
@@ -272,6 +284,7 @@ const search = () => {
 
     <template #tagRender="{ value: val, onClose }">
       <a-tag
+        @click="onTagClick($event, onClose)"
         v-if="options.find((el) => el.title === val)"
         class="rounded-tag nc-selected-option"
         :style="{ display: 'flex', alignItems: 'center' }"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 298ba065a4..6fbd0615e0 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -138,11 +138,10 @@ const search = () => {
 
 const toggleMenu = (e: Event) => {
   // todo: refactor
+  // check clicked element is clear icon
   if (
     (e.target as HTMLElement)?.classList.contains('ant-select-clear') ||
-    (e.target as HTMLElement)?.parentElement?.classList.contains('ant-select-clear') ||
-    (e.target as HTMLElement)?.parentElement?.parentElement?.classList.contains('ant-select-clear') ||
-    (e.target as HTMLElement)?.parentElement?.parentElement?.parentElement?.classList.contains('ant-select-clear')
+    (e.target as HTMLElement)?.closest('.ant-select-clear')
   ) {
     vModel.value = ''
     return