From 084b2c7a5e2cb11c79dfe5364f8b23eede0029b9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 20:42:36 +0530
Subject: [PATCH] fix: clear icon in single select

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index fc59e3e07e..971e190d78 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -231,7 +231,7 @@ const search = () => {
     :bordered="false"
     :show-arrow="!readOnly"
     :show-search="active || editable"
-    :open="isOpen"
+    :open="isOpen && (active || editable)"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index c478a3c015..298ba065a4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -57,7 +57,7 @@ const options = computed<(SelectOptionType & { value: string })[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-        (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
+      (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@@ -135,6 +135,20 @@ async function addIfMissingAndSave() {
 const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
+
+const toggleMenu = (e: Event) => {
+  // todo: refactor
+  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')
+  ) {
+    vModel.value = ''
+    return
+  }
+  isOpen.value = (active.value || editable.value) && !isOpen.value
+}
 </script>
 
 <template>
@@ -144,7 +158,7 @@ const search = () => {
     class="w-full"
     :allow-clear="!column.rqd && active"
     :bordered="false"
-    :open="isOpen"
+    :open="isOpen && (active || editable)"
     :disabled="readOnly"
     :show-arrow="!readOnly && (active || editable || vModel === null)"
     :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
@@ -152,7 +166,7 @@ const search = () => {
     @select="isOpen = false"
     @keydown.stop
     @search="search"
-    @click="isOpen = (active || editable) && !isOpen"
+    @click="toggleMenu"
   >
     <a-select-option
       v-for="op of options"