From 66525a8769cc36202646232ba44968ed8d01d797 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 22 Jul 2022 20:16:47 +0300
Subject: [PATCH] fix: form view for select column

Re #2767

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../spreadsheet/components/EditableCell.vue   |  1 +
 .../editableCell/EnumListEditableCell.vue     | 78 ++++++++++---------
 .../editableCell/SetListEditableCell.vue      | 11 ++-
 3 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
index dd8e261652..31e88d48fc 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
@@ -83,6 +83,7 @@
       v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm) && _isUIAllowed('tableRowUpdate')"
       v-model="localState"
       :column="column"
+      :is-form="isForm"
       v-on="parentListeners"
     />
     <set-list-cell v-else-if="isSet" v-model="localState" :column="column" v-on="parentListeners" />
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
index b093083d7b..f536cecf81 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
@@ -1,47 +1,45 @@
 <template>
-  <v-select
-    v-model="localState"
-    :items="enumValues"
-    :menu-props="{ bottom: true, offsetY: true }"
-    item-value="title"
-    solo
-    dense
-    flat
-    hide-details
-    class="mt-0"
-    :clearable="!column.rqd"
-    v-on="parentListeners"
-  >
-    <template #selection="{ item }">
-      <div
-        class="d-100"
-        :class="{
-          'text-center': !isForm,
-        }"
-      >
-        <v-chip small :color="item.color" class="ma-1">
+  <div>
+    <v-select
+      v-model="localState"
+      :items="enumValues"
+      :menu-props="{ bottom: true, offsetY: true }"
+      item-value="title"
+      solo
+      dense
+      flat
+      hide-details
+      :class="`mt-0 ${isForm ? 'form-select': ''}`"
+      :clearable="!column.rqd"
+      v-on="parentListeners"
+    >
+      <template #selection="{ item }">
+        <div
+          class="d-100"
+          :class="{
+            'text-center': !isForm,
+          }"
+        >
+          <v-chip small :color="item.color" class="ma-1">
+            {{ item.title }}
+          </v-chip>
+        </div>
+      </template>
+      <template #item="{ item }">
+        <v-chip small :color="item.color">
           {{ item.title }}
         </v-chip>
-      </div>
-    </template>
-    <template #item="{ item }">
-      <v-chip small :color="item.color">
-        {{ item.title }}
-      </v-chip>
-    </template>
-    <template #append>
-      <v-icon small class="mt-1"> mdi-menu-down </v-icon>
-    </template>
-  </v-select>
+      </template>
+      <template #append>
+        <v-icon small class="mt-1"> mdi-menu-down </v-icon>
+      </template>
+    </v-select>
+  </div>
 </template>
 
 <script>
-import colors from '@/mixins/colors';
-
 export default {
   name: 'EnumListEditableCell',
-  mixins: [colors],
-
   props: {
     value: String,
     column: Object,
@@ -103,6 +101,14 @@ export default {
       font-size: 13px !important;
     }
   }
+  .form-select {
+    .v-select__selections {
+      border: 1px solid rgba(127,130,139,0.2);
+    }
+    input {
+      z-index: -1;
+    }
+  }
 }
 </style>
 <!--
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
index 01d85f2170..7e3b3ef062 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
@@ -12,7 +12,7 @@
       solo
       hide-details
       deletable-chips
-      class="text-center mt-0"
+      :class="`text-center mt-0 ${isForm ? 'form-select': ''}`"
     >
       <template #selection="data">
         <v-chip
@@ -47,6 +47,7 @@ export default {
   props: {
     value: String,
     column: Object,
+    isForm: Boolean,
   },
   computed: {
     localState: {
@@ -109,6 +110,14 @@ export default {
     font-size: 12px !important;
     color: gray !important;
   }
+  .form-select {
+    .v-select__selections {
+      border: 1px solid rgba(127,130,139,0.2);
+    }
+    input {
+      z-index: -1;
+    }
+  }
 }
 
 </style>