fix(gui): close options list when if not active or editable

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/cell/MultiSelect.vue

@@ -233,7 +233,7 @@ async function addIfMissingAndSave() {
 
         // Mysql escapes single quotes with backslash so we keep quotes but others have to unescaped
         if (!isMysql(column.value.base_id)) {
-          updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, "'")
+          updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, '\'')
         }
       }
 
@@ -276,10 +276,11 @@ const onTagClick = (e: Event, onClose: Function) => {
 </script>
 
 <template>
+  <div class="nc-multi-select h-full w-full flex items-center"
+       @click="isOpen = editAllowed && !isOpen" :class="{ 'read-only': readOnly }">
     <a-select
       ref="aselect"
       v-model:value="vModel"
-    v-model:open="isOpen"
       mode="multiple"
       class="w-full overflow-hidden"
       :bordered="false"
@@ -287,12 +288,12 @@ const onTagClick = (e: Event, onClose: Function) => {
       show-search
       :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
       :open="isOpen && (active || editable)"
+      @update:open="isOpen = $event"
       :disabled="readOnly"
       :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
       @search="search"
       @keydown.stop
-    @click="isOpen = editAllowed && !isOpen"
     >
       <a-select-option
         v-for="op of options"
@@ -359,6 +360,7 @@ const onTagClick = (e: Event, onClose: Function) => {
         </a-tag>
       </template>
     </a-select>
+  </div>
 </template>
 
 <style scoped>