fix(gui): show pointer for select field if not readonly

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,8 +276,11 @@ const onTagClick = (e: Event, onClose: Function) => {
 </script>
 
 <template>
-  <div class="nc-multi-select h-full w-full flex items-center"
+  <div
-       @click="isOpen = editAllowed && !isOpen" :class="{ 'read-only': readOnly }">
+    class="nc-multi-select h-full w-full flex items-center"
+    :class="{ 'read-only': readOnly }"
+    @click="isOpen = editAllowed && !isOpen"
+  >
     <a-select
       ref="aselect"
       v-model:value="vModel"
@@ -287,9 +290,8 @@ const onTagClick = (e: Event, onClose: Function) => {
       clear-icon
       show-search
       :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
-      :open="isOpen && (active || editable)"
+      :open="isOpen && editAllowed"
-      @update:open="isOpen = $event"
+      :disabled="readOnly || !editAllowed"
-      :disabled="readOnly || !(active || editable)"
       :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
       @search="search"
@@ -336,7 +338,7 @@ const onTagClick = (e: Event, onClose: Function) => {
           class="rounded-tag nc-selected-option"
           :style="{ display: 'flex', alignItems: 'center' }"
           :color="options.find((el) => el.title === val)?.color"
-          :closable="editAllowed && (active || editable) && (vModel.length > 1 || !column?.rqd)"
+          :closable="editAllowed && (vModel.length > 1 || !column?.rqd)"
           :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
           @click="onTagClick($event, onClose)"
           @close="onClose"
@@ -363,7 +365,7 @@ const onTagClick = (e: Event, onClose: Function) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ms-close-icon {
   color: rgba(0, 0, 0, 0.25);
   cursor: pointer;
@@ -408,4 +410,11 @@ const onTagClick = (e: Event, onClose: Function) => {
 :deep(.ant-select-selection-overflow) {
   @apply flex-nowrap;
 }
+
+.nc-multi-select:not(.read-only) {
+  :deep(.ant-select-selector),
+  :deep(.ant-select-selector input) {
+    @apply "!cursor-pointer";
+  }
+}
 </style>