From 0779a69cae52ba4ed9e88a626d8beb8507d96f4a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 14 Nov 2022 11:50:13 +0800
Subject: [PATCH 01/52] fix(nc-gui): reduce of empty array with no initial
 value

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 01390ecb4e..1e1c50b8de 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -179,8 +179,10 @@ export default class CSVTemplateAdapter {
           ) {
             this.tables[tableIdx].columns[columnIdx].uidt = UITypes.Date
             // take the date format with the max occurrence
-            this.tables[tableIdx].columns[columnIdx].meta.date_format =
-              Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
+            const objKeys = Object.keys(dateFormat)
+            this.tables[tableIdx].columns[columnIdx].meta.date_format = objKeys.length
+              ? objKeys.reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y))
+              : 'YYYY/MM/DD'
           } else {
             // Datetime
             this.tables[tableIdx].columns[columnIdx].uidt = uidt

From b802aa550852bf3143e00a38d36a76267f1e4d4d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 14 Nov 2022 16:45:03 +0800
Subject: [PATCH 02/52] fix(nc-gui): avoid keeping unnecessary props when
 switching column type

---
 .../nc-gui/composables/useColumnCreateStore.ts     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index 9816b4e183..922b12464c 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -97,7 +97,19 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const onUidtOrIdTypeChange = () => {
       const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
       formState.value = {
-        ...formState.value,
+        ...(!isEdit.value && {
+          // only take title, column_name and uidt when creating a column
+          // to avoid the extra props from being taken (e.g. SingleLineText -> LTAR -> SingleLineText)
+          // to mess up the column creation
+          title: formState.value.title,
+          column_name: formState.value.column_name,
+          uidt: formState.value.uidt,
+        }),
+        ...(isEdit.value && {
+          // take the existing formState.value when editing a column
+          // LTAR is not available in this case
+          ...formState.value,
+        }),
         meta: {},
         rqd: false,
         pk: false,

From c91c0edefe88344746d7638b75cd8a4569e585a6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 19 Nov 2022 16:46:36 +0800
Subject: [PATCH 03/52] fix(nocodb): remove ignoreFilterSort condition for
 applyPaginate and rename to ignoreViewFilterAndSort

---
 .../sql-data-mapper/lib/sql/BaseModelSqlv2.ts | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 5c07bb1e2e..6b31c79d9b 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -175,7 +175,7 @@ class BaseModelSqlv2 {
       sortArr?: Sort[];
       sort?: string | string[];
     } = {},
-    ignoreFilterSort = false
+    ignoreViewFilterAndSort = false
   ): Promise<any> {
     const { where, ...rest } = this._getListArgs(args as any);
 
@@ -189,7 +189,7 @@ class BaseModelSqlv2 {
     let sorts = extractSortsObject(rest?.sort, aliasColObjMap);
     const filterObj = extractFilterFromXwhere(where, aliasColObjMap);
     // todo: replace with view id
-    if (!ignoreFilterSort && this.viewId) {
+    if (!ignoreViewFilterAndSort && this.viewId) {
       await conditionV2(
         [
           new Filter({
@@ -249,7 +249,7 @@ class BaseModelSqlv2 {
       qb.orderBy('created_at');
     }
 
-    if (!ignoreFilterSort) applyPaginate(qb, rest);
+    applyPaginate(qb, rest);
     const proto = await this.getProto();
     const data = await this.extractRawQueryAndExec(qb);
 
@@ -261,7 +261,7 @@ class BaseModelSqlv2 {
 
   public async count(
     args: { where?: string; limit?; filterArr?: Filter[] } = {},
-    ignoreFilterSort = false
+    ignoreViewFilterAndSort = false
   ): Promise<any> {
     await this.model.getColumns();
     const { where } = this._getListArgs(args);
@@ -272,7 +272,7 @@ class BaseModelSqlv2 {
     const aliasColObjMap = await this.model.getAliasColObjMap();
     const filterObj = extractFilterFromXwhere(where, aliasColObjMap);
 
-    if (!ignoreFilterSort && this.viewId) {
+    if (!ignoreViewFilterAndSort && this.viewId) {
       await conditionV2(
         [
           new Filter({
@@ -2474,7 +2474,7 @@ class BaseModelSqlv2 {
   public async groupedList(
     args: {
       groupColumnId: string;
-      ignoreFilterSort?: boolean;
+      ignoreViewFilterAndSort?: boolean;
       options?: (string | number | null | boolean)[];
     } & Partial<XcFilter>
   ): Promise<
@@ -2527,7 +2527,7 @@ class BaseModelSqlv2 {
       let sorts = extractSortsObject(args?.sort, aliasColObjMap);
       const filterObj = extractFilterFromXwhere(where, aliasColObjMap);
       // todo: replace with view id
-      if (!args.ignoreFilterSort && this.viewId) {
+      if (!args.ignoreViewFilterAndSort && this.viewId) {
         await conditionV2(
           [
             new Filter({
@@ -2640,7 +2640,10 @@ class BaseModelSqlv2 {
   }
 
   public async groupedListCount(
-    args: { groupColumnId: string; ignoreFilterSort?: boolean } & XcFilter
+    args: {
+      groupColumnId: string;
+      ignoreViewFilterAndSort?: boolean;
+    } & XcFilter
   ) {
     const column = await this.model
       .getColumns()
@@ -2659,7 +2662,7 @@ class BaseModelSqlv2 {
     const filterObj = extractFilterFromXwhere(args.where, aliasColObjMap);
     // todo: replace with view id
 
-    if (!args.ignoreFilterSort && this.viewId) {
+    if (!args.ignoreViewFilterAndSort && this.viewId) {
       await conditionV2(
         [
           new Filter({

From 501292cead98e472be6eea204edfb19bfcd68eb0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 19 Nov 2022 16:47:19 +0800
Subject: [PATCH 04/52] fix(nc-gui): query field returns empty result with
 non-zero offset

---
 packages/nc-gui/composables/useViewData.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 706ab27c57..c4e5bedbff 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -189,6 +189,14 @@ export function useViewData(
       : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
+
+    // to cater the case like when querying with a non-zero offset
+    // the result page may point to the target page where the actual returned data don't display on
+    const expectedPage = Math.ceil(paginationData.value.totalRows! / paginationData.value.pageSize!)
+    if (Math.max(1, expectedPage) < paginationData.value.page!) {
+      await changePage(expectedPage)
+    }
+
     if (viewMeta.value?.type === ViewTypes.GRID) {
       await loadAggCommentsCount()
     }

From 7c615768b6ea233a4cd08ee9459794b5cd60db94 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 19 Nov 2022 19:10:44 +0800
Subject: [PATCH 05/52] feat(nc-gui): add save & exit and save & stay

---
 packages/nc-gui/lang/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 08db4c8610..bd19e8ad4a 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -368,6 +368,8 @@
     "setPrimary": "Set as Primary value",
     "addRow": "Add new row",
     "saveRow": "Save row",
+    "saveAndExit": "Save & Exit",
+    "saveAndStay": "Save & Stay",
     "insertRow": "Insert New Row",
     "deleteRow": "Delete Row",
     "deleteSelectedRow": "Delete Selected Rows",

From 633fec95f92ea19ac7564ff8069d507b876dd0ae Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 19 Nov 2022 19:11:20 +0800
Subject: [PATCH 06/52] feat(nc-gui): remove important on py-0

---
 packages/nc-gui/assets/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 7e3d0f5cd5..76489a82dd 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -261,7 +261,7 @@ a {
 }
 
 .ant-dropdown-menu-item, .ant-menu-item {
-  @apply !py-0 active:(ring ring-accent ring-opacity-100);
+  @apply py-0 active:(ring ring-accent ring-opacity-100);
 }
 
 .ant-dropdown-menu-title-content,

From d57d722566d619bfc52663532870149ff0fde467 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 19 Nov 2022 19:13:06 +0800
Subject: [PATCH 07/52] feat(nc-gui): add MdiCancel, MdiContentSaveEdit &
 ADropdownButton

---
 packages/nc-gui/components.d.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 1be206af09..681ddee0f7 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -24,6 +24,7 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -126,6 +127,7 @@ declare module '@vue/runtime-core' {
     MdiBugOutline: typeof import('~icons/mdi/bug-outline')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
+    MdiCancel: typeof import('~icons/mdi/cancel')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -143,6 +145,7 @@ declare module '@vue/runtime-core' {
     MdiCommentTextOutline: typeof import('~icons/mdi/comment-text-outline')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
+    MdiContentSaveEdit: typeof import('~icons/mdi/content-save-edit')['default']
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
     MdiDatabaseSync: typeof import('~icons/mdi/database-sync')['default']

From f9250b7c95c1125585d9b6c89db25ffae1bf6080 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 19 Nov 2022 19:13:28 +0800
Subject: [PATCH 08/52] feat(nc-gui): add save and exit / stay logic

---
 .../smartsheet/expanded-form/Header.vue       | 42 ++++++++++++++++---
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 8519599e32..9e67e7fb98 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -25,6 +25,8 @@ const { isUIAllowed } = useUIPermission()
 
 const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
+const saveRowAndStay = ref(0)
+
 const save = async () => {
   if (isNew.value) {
     const data = await _save(state.value)
@@ -34,6 +36,9 @@ const save = async () => {
     await _save()
     reloadTrigger?.trigger()
   }
+  if (!saveRowAndStay.value) {
+    emit('cancel')
+  }
 }
 
 // todo: accept as a prop / inject
@@ -101,14 +106,39 @@ const copyRecordUrl = () => {
     </a-tooltip>
 
     <a-button class="!text mx-1 nc-expand-form-close-btn" @click="emit('cancel')">
-      <!-- Cancel -->
-      {{ $t('general.cancel') }}
+      <div class="flex items-center">
+        <MdiCancel class="mr-1" />
+        <!-- Cancel -->
+        {{ $t('general.cancel') }}
+      </div>
     </a-button>
 
-    <a-button :disabled="!isUIAllowed('tableRowUpdate')" type="primary" class="mx-1" @click="save">
-      <!-- Save Row -->
-      {{ $t('activity.saveRow') }}
-    </a-button>
+    <a-dropdown-button type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
+      <template #overlay>
+        <a-menu>
+          <a-menu-item key="0" class="!py-2 flex gap-2" @click="saveRowAndStay = 0">
+            <div class="flex items-center">
+              <MdiContentSave class="mr-1" />
+              {{ $t('activity.saveAndExit') }}
+            </div>
+          </a-menu-item>
+          <a-menu-item key="1" class="!py-2 flex gap-2 items-center" @click="saveRowAndStay = 1">
+            <div class="flex items-center">
+              <MdiContentSaveEdit class="mr-1" />
+              {{ $t('activity.saveAndStay') }}
+            </div>
+          </a-menu-item>
+        </a-menu>
+      </template>
+      <div v-if="saveRowAndStay === 0" class="flex items-center">
+        <MdiContentSave class="mr-1" />
+        {{ $t('activity.saveAndExit') }}
+      </div>
+      <div v-if="saveRowAndStay === 1" class="flex items-center">
+        <MdiContentSaveEdit class="mr-1" />
+        {{ $t('activity.saveAndStay') }}
+      </div>
+    </a-dropdown-button>
   </div>
 </template>
 

From 6e153b7bfcf9ece5a1702016f19563d7411de9a3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 19 Nov 2022 23:18:01 +0800
Subject: [PATCH 09/52] test(playwright): update Save Row button text

---
 tests/playwright/pages/Dashboard/ExpandedForm/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index 22dc0bfe03..df73b29a4a 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -57,7 +57,7 @@ export class ExpandedFormPage extends BasePage {
   }: {
     waitForRowsData?: boolean;
   } = {}) {
-    const saveRowAction = this.get().locator('button:has-text("Save Row")').click();
+    const saveRowAction = this.get().locator('button:has-text("Save & Exit")').click();
     if (waitForRowsData) {
       await this.waitForResponse({
         uiAction: saveRowAction,
@@ -104,9 +104,9 @@ export class ExpandedFormPage extends BasePage {
 
   async validateRoleAccess(param: { role: string }) {
     if (param.role === 'commenter' || param.role === 'viewer') {
-      await expect(await this.get().locator('button:has-text("Save Row")')).toBeDisabled();
+      await expect(await this.get().locator('button:has-text("Save & Exit")')).toBeDisabled();
     } else {
-      await expect(await this.get().locator('button:has-text("Save Row")')).toBeEnabled();
+      await expect(await this.get().locator('button:has-text("Save & Exit")')).toBeEnabled();
     }
     if (param.role === 'viewer') {
       await expect(await this.toggleCommentsButton).toHaveCount(0);

From 874a3f122ba5206973f1ad6b20bcfad88a12c534 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 20 Nov 2022 09:57:35 +0800
Subject: [PATCH 10/52] feat(nc-gui): rename cancel button to close

---
 .../nc-gui/components/smartsheet/expanded-form/Header.vue   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 9e67e7fb98..0517ee6c54 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -107,9 +107,9 @@ const copyRecordUrl = () => {
 
     <a-button class="!text mx-1 nc-expand-form-close-btn" @click="emit('cancel')">
       <div class="flex items-center">
-        <MdiCancel class="mr-1" />
-        <!-- Cancel -->
-        {{ $t('general.cancel') }}
+        <MdiCloseCircleOutline class="mr-1" />
+        <!-- Close -->
+        {{ $t('general.close') }}
       </div>
     </a-button>
 

From 2fab4c46328e8e719f99aae72afbd78a5e16d0c0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 20 Nov 2022 15:59:26 +0530
Subject: [PATCH 11/52] fix(gui): miscellaneous ui fixes and improvement

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |   1 +
 .../nc-gui/components/dlg/TableCreate.vue     |   8 +-
 .../smartsheet/column/EditOrAdd.vue           |   7 ++
 .../smartsheet/column/SelectOptions.vue       |   4 +-
 .../smartsheet/toolbar/ShareView.vue          | 102 ++++++++----------
 .../tabs/auth/user-management/UsersModal.vue  |   6 ++
 .../nc-gui/components/virtual-cell/Lookup.vue |   2 +-
 .../composables/useMultiSelect/index.ts       |   1 +
 .../form/[viewId]/index/survey.vue            |   4 +-
 .../sql-data-mapper/lib/sql/BaseModelSqlv2.ts |   4 +-
 10 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 1be206af09..3b0dd76f2f 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -200,6 +200,7 @@ declare module '@vue/runtime-core' {
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiPlusThick: typeof import('~icons/mdi/plus-thick')['default']
     MdiReddit: typeof import('~icons/mdi/reddit')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 7c36fa06e7..46fcb06b87 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Form, computed, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
+import { Form, computed, nextTick, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
 import { TabType } from '~/lib'
 
 const props = defineProps<{
@@ -89,8 +89,10 @@ const _createTable = async () => {
 
 onMounted(() => {
   generateUniqueTitle()
-
-  inputEl.value?.focus()
+  nextTick(() => {
+    inputEl.value?.focus()
+    inputEl.value?.select()
+  })
 })
 </script>
 
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 5acda92b36..0eb697dc36 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   IsFormInj,
@@ -116,6 +117,12 @@ onMounted(() => {
     formState.value.column_name = formState.value?.title
   }
 })
+
+useEventListener('keydown', (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    emit('cancel')
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index a3295fa84c..f02646718b 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -163,12 +163,12 @@ watch(inputs, () => {
               v-model:value="element.title"
               class="caption"
               :data-testid="`select-column-option-input-${index}`"
+              @keydown.enter.prevent="element.title?.trim() && addNewOption()"
               @change="optionChanged(element.id)"
             />
 
             <MdiClose
-              class="ml-2 hover:!text-black"
-              :style="{ color: 'red' }"
+              class="ml-2 hover:!text-black-500 text-gray-500 cursor-pointer"
               :data-testid="`select-column-option-remove-${index}`"
               @click="removeOption(index)"
             />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 0289edc953..e328576dfb 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -48,12 +48,12 @@ const withRTL = computed({
   },
 })
 
-const transitionDuration = computed({
-  get: () => shared.value.meta.transitionDuration || 250,
-  set: (duration) => {
-    shared.value.meta = { ...shared.value.meta, transitionDuration: duration > 5000 ? 5000 : duration }
-  },
-})
+// const transitionDuration = computed({
+//   get: () => shared.value.meta.transitionDuration || 50,
+//   set: (duration) => {
+//     shared.value.meta = { ...shared.value.meta, transitionDuration: duration > 5000 ? 5000 : duration }
+//   },
+// })
 
 const allowCSVDownload = computed({
   get: () => !!shared.value.meta.allowCSVDownload,
@@ -131,7 +131,7 @@ async function saveTheme() {
   $e(`a:view:share:${viewTheme.value ? 'enable' : 'disable'}-theme`)
 }
 
-const saveTransitionDuration = useDebounceFn(updateSharedViewMeta, 1000, { maxWait: 2000 })
+// const saveTransitionDuration = useDebounceFn(updateSharedViewMeta, 1000, { maxWait: 2000 })
 
 async function updateSharedViewMeta() {
   try {
@@ -248,7 +248,7 @@ watch(passwordProtected, (value) => {
               Use Survey Mode
             </a-checkbox>
 
-            <Transition name="layout" mode="out-in">
+            <!--            <Transition name="layout" mode="out-in">
               <div v-if="surveyMode" class="flex flex-col justify-center pl-6">
                 <a-form-item class="!my-1" :has-feedback="false" name="transitionDuration">
                   <template #label>
@@ -264,46 +264,7 @@ watch(passwordProtected, (value) => {
                   />
                 </a-form-item>
               </div>
-            </Transition>
-          </div>
-
-          <div>
-            <!-- todo: i18n -->
-            <a-checkbox
-              v-if="shared.type === ViewTypes.FORM"
-              v-model:checked="viewTheme"
-              data-testid="nc-modal-share-view__with-theme"
-              class="!text-sm"
-            >
-              Use Theme
-            </a-checkbox>
-
-            <Transition name="layout" mode="out-in">
-              <div v-if="viewTheme" class="flex pl-6">
-                <LazyGeneralColorPicker
-                  data-testid="nc-modal-share-view__theme-picker"
-                  class="!p-0"
-                  :model-value="shared.meta.theme?.primaryColor"
-                  :colors="projectThemeColors"
-                  :row-size="9"
-                  :advanced="false"
-                  @input="onChangeTheme"
-                />
-              </div>
-            </Transition>
-          </div>
-
-          <div>
-            <!-- use RTL orientation in form - todo: i18n -->
-            <a-checkbox
-              v-if="shared.type === ViewTypes.FORM"
-              v-model:checked="withRTL"
-              data-testid="nc-modal-share-view__locale"
-              class="!text-sm"
-            >
-              <!-- todo i18n -->
-              RTL Orientation
-            </a-checkbox>
+            </Transition> -->
           </div>
 
           <div>
@@ -339,20 +300,45 @@ watch(passwordProtected, (value) => {
             </Transition>
           </div>
 
-          <div>
+          <div
+            v-if="
+              shared && (shared.type === ViewTypes.GRID || shared.type === ViewTypes.KANBAN || shared.type === ViewTypes.GALLERY)
+            "
+          >
             <!-- Allow Download -->
-            <a-checkbox
-              v-if="
-                shared &&
-                (shared.type === ViewTypes.GRID || shared.type === ViewTypes.KANBAN || shared.type === ViewTypes.GALLERY)
-              "
-              v-model:checked="allowCSVDownload"
-              data-testid="nc-modal-share-view__with-csv-download"
-              class="!text-sm"
-            >
+            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download" class="!text-sm">
               {{ $t('labels.downloadAllowed') }}
             </a-checkbox>
           </div>
+
+          <div v-if="shared.type === ViewTypes.FORM">
+            <!-- todo: i18n -->
+            <a-checkbox v-model:checked="viewTheme" data-testid="nc-modal-share-view__with-theme" class="!text-sm">
+              Use Theme
+            </a-checkbox>
+
+            <Transition name="layout" mode="out-in">
+              <div v-if="viewTheme" class="flex pl-6">
+                <LazyGeneralColorPicker
+                  data-testid="nc-modal-share-view__theme-picker"
+                  class="!p-0"
+                  :model-value="shared.meta.theme?.primaryColor"
+                  :colors="projectThemeColors"
+                  :row-size="9"
+                  :advanced="false"
+                  @input="onChangeTheme"
+                />
+              </div>
+            </Transition>
+          </div>
+
+          <div v-if="shared.type === ViewTypes.FORM">
+            <!-- use RTL orientation in form - todo: i18n -->
+            <a-checkbox v-model:checked="withRTL" data-testid="nc-modal-share-view__locale" class="!text-sm">
+              <!-- todo i18n -->
+              RTL Orientation
+            </a-checkbox>
+          </div>
         </div>
       </div>
     </a-modal>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index c8b509916c..86def37f78 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Input } from 'ant-design-vue'
 import {
   Form,
   computed,
@@ -133,6 +134,10 @@ const clickInviteMore = () => {
   usersData.role = ProjectRole.Viewer
   usersData.emails = undefined
 }
+
+const emailField = (inputEl: typeof Input) => {
+  inputEl?.$el?.focus()
+}
 </script>
 
 <template>
@@ -222,6 +227,7 @@ const clickInviteMore = () => {
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('datatype.Email') }}:</div>
 
                     <a-input
+                      :ref="emailField"
                       v-model:value="usersData.emails"
                       validate-trigger="onBlur"
                       :placeholder="$t('labels.email')"
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 1040868cec..9284a52ad4 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -11,8 +11,8 @@ import {
   inject,
   isAttachment,
   provide,
-  refAutoReset,
   ref,
+  refAutoReset,
   useMetas,
   watch,
 } from '#imports'
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 96bfdd80a0..d0d6fe7867 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -41,6 +41,7 @@ export function useMultiSelect(
 
   function selectCell(row: number, col: number) {
     clearRangeRows()
+    if (selected.row === row && selected.col === col) return
     editEnabled.value = false
     selected.row = row
     selected.col = col
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index d1d13b09af..771edf786c 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -44,7 +44,7 @@ const el = ref<HTMLDivElement>()
 
 provide(DropZoneRef, el)
 
-const transitionDuration = computed(() => sharedViewMeta.value.transitionDuration || 250)
+const transitionDuration = computed(() => sharedViewMeta.value.transitionDuration || 50)
 
 const steps = computed(() => {
   if (!formColumns.value) return []
@@ -305,7 +305,7 @@ onMounted(() => {
                 </button>
               </div>
 
-              <div v-else-if="!submitted" class="flex items-center gap-3">
+              <div v-else-if="!submitted" class="flex items-center gap-3 flex-col">
                 <a-tooltip
                   :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
                   :mouse-enter-delay="0.25"
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 5c07bb1e2e..96c85b7666 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -9,7 +9,7 @@ import RollupColumn from '../../../../models/RollupColumn';
 import LookupColumn from '../../../../models/LookupColumn';
 import DataLoader from 'dataloader';
 import Column from '../../../../models/Column';
-import { XcFilter, XcFilterWithAlias } from '../BaseModel';
+import { XcFilter, XcFilterWithAlias } from '../BaseModel'
 import conditionV2 from './conditionV2';
 import Filter from '../../../../models/Filter';
 import sortV2 from './sortV2';
@@ -2240,7 +2240,7 @@ class BaseModelSqlv2 {
     for (let i = 0; i < this.model.columns.length; ++i) {
       const column = this.model.columns[i];
       // skip validation if `validate` is undefined or false
-      if (!column?.meta?.validate && !column?.validate) continue;
+      if (!column?.meta?.validate || !column?.validate) continue;
 
       const validate = column.getValidators();
       const cn = column.column_name;

From 63a9c7e42e3462e0b91bc0b14b448ae9df0efdde Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 20 Nov 2022 16:06:13 +0530
Subject: [PATCH 12/52] refactor(gui): show rtl option based on active locale

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/toolbar/ShareView.vue   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index e328576dfb..0b1ad2103f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -10,7 +10,7 @@ import {
   ref,
   useCopy,
   useDashboard,
-  useDebounceFn,
+  isRtlLang,
   useI18n,
   useNuxtApp,
   useProject,
@@ -192,6 +192,11 @@ watch(passwordProtected, (value) => {
     saveShareLinkPassword()
   }
 })
+
+const { locale } = useI18n()
+
+const isRtl = computed(() => isRtlLang(locale.value as any))
+
 </script>
 
 <template>
@@ -229,7 +234,8 @@ watch(passwordProtected, (value) => {
           <MdiOpenInNew class="text-sm text-gray-500 mt-2" />
         </a>
 
-        <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
+        <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer"
+                        @click="copyLink" />
       </div>
 
       <div class="px-1 mt-2 flex flex-col gap-3">
@@ -306,7 +312,8 @@ watch(passwordProtected, (value) => {
             "
           >
             <!-- Allow Download -->
-            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download" class="!text-sm">
+            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download"
+                        class="!text-sm">
               {{ $t('labels.downloadAllowed') }}
             </a-checkbox>
           </div>
@@ -332,7 +339,7 @@ watch(passwordProtected, (value) => {
             </Transition>
           </div>
 
-          <div v-if="shared.type === ViewTypes.FORM">
+          <div v-if="shared.type === ViewTypes.FORM && isRtl">
             <!-- use RTL orientation in form - todo: i18n -->
             <a-checkbox v-model:checked="withRTL" data-testid="nc-modal-share-view__locale" class="!text-sm">
               <!-- todo i18n -->

From 8072c40c061a0c298bc9f8789c1da88e19f7a71e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 20 Nov 2022 17:07:07 +0530
Subject: [PATCH 13/52] feat(gui): focus first input in expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss                   | 10 +++-------
 packages/nc-gui/components/cell/Text.vue            |  4 +++-
 packages/nc-gui/components/dlg/ViewCreate.vue       |  2 +-
 packages/nc-gui/components/smartsheet/Grid.vue      | 13 +++++++------
 .../components/smartsheet/expanded-form/index.vue   | 10 ++++++++--
 .../components/smartsheet/toolbar/ShareView.vue     |  9 +++------
 packages/nc-gui/pages/index/index/index.vue         |  6 +-----
 7 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 7e3d0f5cd5..4e77210c00 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -214,17 +214,13 @@ a {
   @apply z-1 relative color-transition rounded-md px-4 py-2 text-white;
 
   &::after {
-    @apply ring-opacity-100 ring-[2px] ring-slate-300 rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
+    @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
     content: '';
     z-index: -1;
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-accent;
-  }
-
-  &:active::after {
-    @apply ring ring-accent;
+    @apply transform scale-110 ;
   }
 }
 
@@ -261,7 +257,7 @@ a {
 }
 
 .ant-dropdown-menu-item, .ant-menu-item {
-  @apply !py-0 active:(ring ring-accent ring-opacity-100);
+  @apply !py-0;
 }
 
 .ant-dropdown-menu-title-content,
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 465cfd73f9..05745ead2c 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -16,7 +16,9 @@ const readonly = inject(ReadonlyInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => {
+  ;(el as HTMLInputElement)?.focus()
+}
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index eb599963e3..5043c5754c 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -184,7 +184,7 @@ async function onSubmit() {
 <template>
   <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading" wrap-class-name="nc-modal-view-create">
     <template #title>
-      {{ $t(`general.${selectedViewId ? 'duplicate' : 'create'}`) }} <span class="text-capitalize">{{ typeAlias }}</span>
+      {{ $t(`general.${selectedViewId ? 'duplicate' : 'create'}`) }} <span class="capitalize">{{ typeAlias }}</span>
       {{ $t('objects.view') }}
     </template>
 
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index fcaa154b32..5dd1569e1c 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -850,8 +850,7 @@ watch(
     text-overflow: ellipsis;
   }
 
-  td.active::after,
-  td.active::before {
+  td.active::after {
     content: '';
     position: absolute;
     z-index: 3;
@@ -864,12 +863,14 @@ watch(
 
   // todo: replace with css variable
   td.active::after {
-    @apply border-2 border-solid border-primary;
+    @apply border-2 border-solid text-primary border-current bg-primary bg-opacity-5;
   }
 
-  td.active::before {
-    @apply bg-primary bg-opacity-5;
-  }
+  //td.active::before {
+  //  content: '';
+  //  z-index:4;
+  //  @apply absolute !w-[10px] !h-[10px] !right-[-5px] !bottom-[-5px] bg-primary;
+  //}
 }
 
 :deep {
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index bad7419b47..5a731b2994 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -121,6 +121,12 @@ if (isKanban.value) {
     }
   }
 }
+
+const cellWrapperEl = (wrapperEl: HTMLElement) => {
+  nextTick(() => {
+    ;(wrapperEl?.querySelector('input,select,textarea') as HTMLInputElement)?.focus()
+  })
+}
 </script>
 
 <script lang="ts">
@@ -146,7 +152,7 @@ export default {
         <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
           <div class="w-[500px] mx-auto">
             <div
-              v-for="col of fields"
+              v-for="(col, i) of fields"
               v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
               :key="col.title"
               class="mt-2 py-2"
@@ -157,7 +163,7 @@ export default {
 
               <LazySmartsheetHeaderCell v-else :column="col" />
 
-              <div class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2">
+              <div :ref="i ? null : cellWrapperEl" class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2">
                 <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
 
                 <LazySmartsheetCell
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 0b1ad2103f..23fc12f141 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -5,12 +5,12 @@ import tinycolor from 'tinycolor2'
 import {
   computed,
   extractSdkResponseErrorMsg,
+  isRtlLang,
   message,
   projectThemeColors,
   ref,
   useCopy,
   useDashboard,
-  isRtlLang,
   useI18n,
   useNuxtApp,
   useProject,
@@ -196,7 +196,6 @@ watch(passwordProtected, (value) => {
 const { locale } = useI18n()
 
 const isRtl = computed(() => isRtlLang(locale.value as any))
-
 </script>
 
 <template>
@@ -234,8 +233,7 @@ const isRtl = computed(() => isRtlLang(locale.value as any))
           <MdiOpenInNew class="text-sm text-gray-500 mt-2" />
         </a>
 
-        <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer"
-                        @click="copyLink" />
+        <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
       <div class="px-1 mt-2 flex flex-col gap-3">
@@ -312,8 +310,7 @@ const isRtl = computed(() => isRtlLang(locale.value as any))
             "
           >
             <!-- Allow Download -->
-            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download"
-                        class="!text-sm">
+            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download" class="!text-sm">
               {{ $t('labels.downloadAllowed') }}
             </a-checkbox>
           </div>
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 005c1bc37e..a93ccf366c 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -316,11 +316,7 @@ const copyProjectMeta = async () => {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-accent;
-  }
-
-  &:active::after {
-    @apply ring ring-accent;
+    @apply transform scale-110;
   }
 }
 

From d1aaef0a6aaceeec621b410af6fefca72a6ceebd Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 21 Nov 2022 11:42:15 +0800
Subject: [PATCH 14/52] feat(nc-gui): add classes for playwright

---
 .../nc-gui/components/smartsheet/expanded-form/Header.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 0517ee6c54..5141bc8313 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -113,9 +113,9 @@ const copyRecordUrl = () => {
       </div>
     </a-button>
 
-    <a-dropdown-button type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
+    <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #overlay>
-        <a-menu>
+        <a-menu class="nc-expand-form-save-dropdown-menu">
           <a-menu-item key="0" class="!py-2 flex gap-2" @click="saveRowAndStay = 0">
             <div class="flex items-center">
               <MdiContentSave class="mr-1" />

From 5936a2042c98a007ab5a14e5f0819adbe0eca4b5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 21 Nov 2022 11:43:09 +0800
Subject: [PATCH 15/52] feat(playwright): add saveAndExitMode logic in expanded
 form

---
 .../pages/Dashboard/ExpandedForm/index.ts      | 18 ++++++++++++++++--
 .../tests/tableColumnOperation.spec.ts         | 14 +++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index df73b29a4a..c5039f86d8 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -54,10 +54,21 @@ export class ExpandedFormPage extends BasePage {
 
   async save({
     waitForRowsData = true,
+    saveAndExitMode = true,
   }: {
     waitForRowsData?: boolean;
+    saveAndExitMode?: boolean;
   } = {}) {
-    const saveRowAction = this.get().locator('button:has-text("Save & Exit")').click();
+    if (!saveAndExitMode) {
+      await this.get().locator('.nc-expand-form-save-btn .ant-dropdown-trigger').click();
+      const dropdownList = this.rootPage.locator('.nc-expand-form-save-dropdown-menu');
+      await dropdownList.locator('.ant-dropdown-menu-item:has-text("Save & Stay")').click();
+    }
+
+    const saveRowAction = saveAndExitMode
+      ? this.get().locator('button:has-text("Save & Exit")').click()
+      : this.get().locator('button:has-text("Save & Stay")').click();
+
     if (waitForRowsData) {
       await this.waitForResponse({
         uiAction: saveRowAction,
@@ -73,7 +84,10 @@ export class ExpandedFormPage extends BasePage {
       });
     }
 
-    await this.get().press('Escape');
+    if (!saveAndExitMode) {
+      await this.get().press('Escape');
+    }
+
     await this.get().waitFor({ state: 'hidden' });
     await this.verifyToast({ message: `updated successfully.` });
     await this.rootPage.locator('[data-testid="grid-load-spinner"]').waitFor({ state: 'hidden' });
diff --git a/tests/playwright/tests/tableColumnOperation.spec.ts b/tests/playwright/tests/tableColumnOperation.spec.ts
index 6c921d3b6b..8042af8ebe 100644
--- a/tests/playwright/tests/tableColumnOperation.spec.ts
+++ b/tests/playwright/tests/tableColumnOperation.spec.ts
@@ -36,13 +36,25 @@ test.describe('Table Column Operations', () => {
       columnTitle: 'Title',
       value: 'value_a',
     });
-    await dashboard.expandedForm.save();
+    await dashboard.expandedForm.save({ saveAndExitMode: true });
     await grid.cell.verify({
       index: 0,
       columnHeader: 'Title',
       value: 'value_a',
     });
 
+    await grid.openExpandedRow({ index: 0 });
+    await dashboard.expandedForm.fillField({
+      columnTitle: 'Title',
+      value: 'value_a_a',
+    });
+    await dashboard.expandedForm.save({ saveAndExitMode: false });
+    await grid.cell.verify({
+      index: 0,
+      columnHeader: 'Title',
+      value: 'value_a_a',
+    });
+
     await grid.deleteRow(0);
     await grid.verifyRowDoesNotExist({ index: 0 });
 

From 11555d974379f3d04160312a8a90a830437aa6e5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 21 Nov 2022 12:40:36 +0800
Subject: [PATCH 16/52] fix(nocodb): applyPaginate when ignoreViewFilterAndSort
 is false

---
 .../nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 6b31c79d9b..9eb5c1cfa2 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -249,7 +249,7 @@ class BaseModelSqlv2 {
       qb.orderBy('created_at');
     }
 
-    applyPaginate(qb, rest);
+    if (!ignoreViewFilterAndSort) applyPaginate(qb, rest);
     const proto = await this.getProto();
     const data = await this.extractRawQueryAndExec(qb);
 

From 545c5875bbeff009569e7e8bd4cd8c92b19e3b25 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 21 Nov 2022 12:40:53 +0800
Subject: [PATCH 17/52] fix(nc-gui): expectedPage logic

---
 packages/nc-gui/composables/useViewData.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index c4e5bedbff..7b25a42123 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -192,8 +192,8 @@ export function useViewData(
 
     // to cater the case like when querying with a non-zero offset
     // the result page may point to the target page where the actual returned data don't display on
-    const expectedPage = Math.ceil(paginationData.value.totalRows! / paginationData.value.pageSize!)
-    if (Math.max(1, expectedPage) < paginationData.value.page!) {
+    const expectedPage = Math.max(1, Math.ceil(paginationData.value.totalRows! / paginationData.value.pageSize!))
+    if (expectedPage < paginationData.value.page!) {
       await changePage(expectedPage)
     }
 

From 75a15735f9cc4af89b612ae58d7b61157299e1a1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 21 Nov 2022 12:43:46 +0800
Subject: [PATCH 18/52] fix(playwright): change close to escape and cancel to
 close

---
 tests/playwright/pages/Dashboard/ExpandedForm/index.ts |  6 +++---
 tests/playwright/tests/expandedFormUrl.spec.ts         | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index c5039f86d8..05ba80d9c7 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -98,13 +98,13 @@ export class ExpandedFormPage extends BasePage {
     await expect.poll(() => this.rootPage.url()).toContain(url);
   }
 
-  async close() {
+  async escape() {
     await this.rootPage.keyboard.press('Escape');
     await this.get().waitFor({ state: 'hidden' });
   }
 
-  async cancel() {
-    await this.get().locator('button:has-text("Cancel")').last().click();
+  async close() {
+    await this.get().locator('button:has-text("Close")').last().click();
   }
 
   async openChildCard(param: { column: string; title: string }) {
diff --git a/tests/playwright/tests/expandedFormUrl.spec.ts b/tests/playwright/tests/expandedFormUrl.spec.ts
index e8e9d61e8a..8195920eca 100644
--- a/tests/playwright/tests/expandedFormUrl.spec.ts
+++ b/tests/playwright/tests/expandedFormUrl.spec.ts
@@ -37,7 +37,7 @@ test.describe('Expanded form URL', () => {
     // expand row & verify URL
     await viewObj.openExpandedRow({ index: 0 });
     const url = await dashboard.expandedForm.getShareRowUrl();
-    await dashboard.expandedForm.close();
+    await dashboard.expandedForm.escape();
     await dashboard.rootPage.goto(url);
 
     await dashboard.expandedForm.verify({
@@ -81,13 +81,13 @@ test.describe('Expanded form URL', () => {
     // expect(expandedFormUrl).toContain("rowId=1");
 
     // access a new rowID using URL
-    await dashboard.expandedForm.close();
+    await dashboard.expandedForm.escape();
     await dashboard.expandedForm.gotoUsingUrlAndRowId({ rowId: '2' });
     await dashboard.expandedForm.verify({
       header: 'Algeria',
       url: 'rowId=2',
     });
-    await dashboard.expandedForm.close();
+    await dashboard.expandedForm.escape();
 
     // visit invalid rowID
     await dashboard.expandedForm.gotoUsingUrlAndRowId({ rowId: '999' });
@@ -114,12 +114,12 @@ test.describe('Expanded form URL', () => {
     await dashboard.expandedForm.verifyCount({ count: 2 });
 
     // close child card
-    await dashboard.expandedForm.cancel();
+    await dashboard.expandedForm.close();
     await dashboard.expandedForm.verify({
       header: 'Afghanistan',
       url: 'rowId=1',
     });
-    await dashboard.expandedForm.cancel();
+    await dashboard.expandedForm.close();
   }
 
   test('Grid', async () => {

From 596a877f0280622424ff56e5d4b7947008056bba Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 15:03:53 +0530
Subject: [PATCH 19/52] test(playwright): kanban test correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/Dashboard/common/Toolbar/AddEditKanbanStack.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/AddEditKanbanStack.ts b/tests/playwright/pages/Dashboard/common/Toolbar/AddEditKanbanStack.ts
index 8dd3c1e8b0..8e3b0d416a 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/AddEditKanbanStack.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/AddEditKanbanStack.ts
@@ -16,7 +16,7 @@ export class ToolbarAddEditStackPage extends BasePage {
   async addOption({ title }: { title: string }) {
     await this.get().locator(`.ant-btn-dashed`).click();
     await this.get().locator(`.nc-select-option >> input`).last().fill(title);
-    await this.get().locator(`.nc-select-option >> input`).last().press('Enter');
+    await this.get().locator(`[type="submit"]`).click();
     await this.verifyToast({ message: 'Column updated' });
   }
 }

From bd504c8ebd316d08433f1bfd6c9df5b0cb203dd4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 15:04:20 +0530
Subject: [PATCH 20/52] chore(api): linting

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss                               | 2 +-
 .../nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts | 2 +-
 packages/nocodb/src/lib/models/Model.ts                         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 4e77210c00..1ba0949d08 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -220,7 +220,7 @@ a {
   }
 
   &:hover::after {
-    @apply transform scale-110 ;
+    @apply transform scale-110;
   }
 }
 
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 96c85b7666..014e1454b1 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -9,7 +9,7 @@ import RollupColumn from '../../../../models/RollupColumn';
 import LookupColumn from '../../../../models/LookupColumn';
 import DataLoader from 'dataloader';
 import Column from '../../../../models/Column';
-import { XcFilter, XcFilterWithAlias } from '../BaseModel'
+import { XcFilter, XcFilterWithAlias } from '../BaseModel';
 import conditionV2 from './conditionV2';
 import Filter from '../../../../models/Filter';
 import sortV2 from './sortV2';
diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index e520299161..2cb7f2e14f 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -248,7 +248,6 @@ export default class Model implements TableType {
       ));
     if (!modelData) {
       modelData = await ncMeta.metaGet2(null, null, MetaTable.MODELS, k);
-      await NocoCache.set(`${CacheScope.MODEL}:${modelData.id}`, modelData);
       // if (
       //   this.baseModels?.[modelData.base_id]?.[modelData.db_alias]?.[
       //     modelData.title
@@ -269,6 +268,7 @@ export default class Model implements TableType {
       // }
     }
     if (modelData) {
+      await NocoCache.set(`${CacheScope.MODEL}:${modelData.id}`, modelData);
       return new Model(modelData);
     }
     return null;

From 25b68a74cd9af0ebb378780742fc68de5906be97 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 19:34:37 +0530
Subject: [PATCH 21/52] fix(gui): checkbox rendering

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Cell.vue           | 2 +-
 packages/nc-gui/components/smartsheet/header/CellIcon.ts | 2 +-
 packages/nc-gui/utils/cell.ts                            | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index dfab72b7fa..92eb352933 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -136,7 +136,7 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
   >
     <template v-if="column">
       <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" />
-      <LazyCellCheckbox v-else-if="isBoolean(column)" v-model="vModel" />
+      <LazyCellCheckbox v-else-if="isBoolean(column, abstractType)" v-model="vModel" />
       <LazyCellAttachment v-else-if="isAttachment(column)" v-model="vModel" :row-index="props.rowIndex" />
       <LazyCellSingleSelect v-else-if="isSingleSelect(column)" v-model="vModel" :row-index="props.rowIndex" />
       <LazyCellMultiSelect v-else-if="isMultiSelect(column)" v-model="vModel" :row-index="props.rowIndex" />
diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
index fb28f4622c..e4ff07acf9 100644
--- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
@@ -68,7 +68,7 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
     return MultiSelectIcon
   } else if (isSingleSelect(column)) {
     return SingleSelectIcon
-  } else if (isBoolean(column)) {
+  } else if (isBoolean(column, abstractType)) {
     return BooleanIcon
   } else if (isTextArea(column)) {
     return TextAreaIcon
diff --git a/packages/nc-gui/utils/cell.ts b/packages/nc-gui/utils/cell.ts
index 719071e1d2..9214578bf2 100644
--- a/packages/nc-gui/utils/cell.ts
+++ b/packages/nc-gui/utils/cell.ts
@@ -2,7 +2,8 @@ import type { ColumnType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 
 export const dataTypeLow = (column: ColumnType) => column.dt?.toLowerCase()
-export const isBoolean = (abstractType: any) => abstractType === 'boolean'
+export const isBoolean = (column: ColumnType, abstractType?: any) =>
+  column.uidt === UITypes.Checkbox || abstractType === 'boolean'
 export const isString = (column: ColumnType, abstractType: any) =>
   column.uidt === UITypes.SingleLineText || abstractType === 'string'
 export const isTextArea = (column: ColumnType) => column.uidt === UITypes.LongText

From e074b6338e8170e6bb28247d534173b4ecf5c44c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 16 Nov 2022 15:14:54 +0530
Subject: [PATCH 22/52] fix(gui): avoid rendering cell component while
 switching tab

- to avoid passing wrong(previous tabs data) data to cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5dd1569e1c..03fe973f6e 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -521,11 +521,14 @@ provide(ReloadRowDataHookInj, reloadViewDataHook)
 // trigger initial data load in grid
 // reloadViewDataHook.trigger()
 
+const switchingTab = ref(false)
+
 watch(
   view,
   async (next, old) => {
     try {
       if (next && next.id !== old?.id) {
+        switchingTab.value = true
         // whenever tab changes or view changes save any unsaved data
         if (old?.id) {
           const oldMeta = await getMeta(old.fk_model_id!)
@@ -541,6 +544,8 @@ watch(
       }
     } catch (e) {
       console.log(e)
+    } finally {
+      switchingTab.value = false
     }
   },
   { immediate: true },
@@ -707,7 +712,7 @@ watch(
                     @mouseover="selectBlock(rowIndex, colIndex)"
                     @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
                   >
-                    <div class="w-full h-full">
+                    <div class="w-full h-full" v-if="!switchingTab">
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(columnObj)"
                         v-model="row.row[columnObj.title]"

From 3b3d842ba1bc953e9e77504ebd6ab066bfdcc276 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 22:15:29 +0530
Subject: [PATCH 23/52] fix: focus percentage input on enter key press and on
 enter key press save and navigate to next row

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Percent.vue    | 7 +++++++
 packages/nc-gui/components/smartsheet/Cell.vue | 1 -
 packages/nc-gui/components/smartsheet/Grid.vue | 3 +--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 04bbfe2dcf..9ce099db23 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { EditModeInj, inject, useVModel } from '#imports'
+import { VNodeRef } from '@vue/runtime-core'
 
 interface Props {
   modelValue?: number | string | null
@@ -12,15 +13,21 @@ const emits = defineEmits(['update:modelValue'])
 const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
+
+const focus: VNodeRef = (el) => {
+  ;(el as HTMLInputElement)?.focus()
+}
 </script>
 
 <template>
   <input
+    :ref="focus"
     v-if="editEnabled"
     v-model="vModel"
     class="w-full !border-none text-base"
     :class="{ '!px-2': editEnabled }"
     type="number"
+    @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop
     @keydown.right.stop
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 92eb352933..95f3c682e4 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -111,7 +111,6 @@ const vModel = computed({
 })
 
 const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
-  console.log('syncAndNavigate', e.target)
   if (isJSON(column.value)) return
 
   if (currentRow.value.rowMeta.changed || currentRow.value.rowMeta.new) {
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5dd1569e1c..cab806d55d 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -423,6 +423,7 @@ onClickOutside(smartTable, (e) => {
 
 const onNavigate = (dir: NavigateDir) => {
   if (selected.row === null || selected.col === null) return
+  editEnabled = false
   switch (dir) {
     case NavigateDir.NEXT:
       if (selected.row < data.value.length - 1) {
@@ -435,8 +436,6 @@ const onNavigate = (dir: NavigateDir) => {
     case NavigateDir.PREV:
       if (selected.row > 0) {
         selected.row--
-      } else {
-        editEnabled = false
       }
       break
   }

From 183e596b212379fb8b39a93ddc54ed80ab45b709 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 22 Nov 2022 00:53:45 +0530
Subject: [PATCH 24/52] fix: pass table alias when renaming

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dlg/TableRename.vue | 1 +
 packages/nocodb-sdk/src/lib/Api.ts             | 1 +
 scripts/sdk/swagger.json                       | 3 +++
 3 files changed, 5 insertions(+)

diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index e2f6f86bad..3c18db606c 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -119,6 +119,7 @@ const renameTable = async () => {
     await $api.dbTable.update(tableMeta.id as string, {
       project_id: tableMeta.project_id,
       table_name: formState.title,
+      title: formState.title,
     })
 
     dialogShow.value = false
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 495d7ca56c..8388bb2f4e 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -1950,6 +1950,7 @@ export class Api<
       tableId: string,
       data: {
         table_name?: string;
+        title?: string;
         project_id?: string;
       },
       params: RequestParams = {}
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index cfe2c4cd86..5116c33b62 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -1703,6 +1703,9 @@
                   "table_name": {
                     "type": "string"
                   },
+                  "title": {
+                    "type": "string"
+                  },
                   "project_id": {
                     "type": "string"
                   }

From a7b6790a9f87395b3e73adc8c5df94756a684f07 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 22 Nov 2022 00:56:26 +0530
Subject: [PATCH 25/52] refactor: set default inflection to none

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/pages/index/index/create-external.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index d45dddecde..fe726570ca 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -46,8 +46,8 @@ let formState = $ref<ProjectCreateForm>({
   title: '',
   dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
   inflection: {
-    inflectionColumn: 'camelize',
-    inflectionTable: 'camelize',
+    inflectionColumn: 'none',
+    inflectionTable: 'none',
   },
   sslUse: SSLUsage.No,
   extraParameters: [],
@@ -57,8 +57,8 @@ const customFormState = ref<ProjectCreateForm>({
   title: '',
   dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
   inflection: {
-    inflectionColumn: 'camelize',
-    inflectionTable: 'camelize',
+    inflectionColumn: 'none',
+    inflectionTable: 'none',
   },
   sslUse: SSLUsage.No,
   extraParameters: [],

From 915575309db1b715dc39a3024dc067c55ab325cd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 22 Nov 2022 01:18:48 +0530
Subject: [PATCH 26/52] feat: close toolbar menu on escape key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |  7 ++++-
 .../smartsheet/toolbar/FieldsMenu.vue         |  7 ++++-
 .../smartsheet/toolbar/SortListMenu.vue       |  7 ++++-
 .../smartsheet/toolbar/ViewActions.vue        |  7 ++++-
 .../composables/useMenuCloseOnEsc/index.ts    | 28 +++++++++++++++++++
 5 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui/composables/useMenuCloseOnEsc/index.ts

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 8e55617112..18c0d42120 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -8,6 +8,7 @@ import {
   inject,
   ref,
   useGlobal,
+  useMenuCloseOnEsc,
   useNuxtApp,
   useSmartsheetStoreOrThrow,
   useViewFilters,
@@ -62,10 +63,14 @@ const filterAutoSaveLoc = computed({
     filterAutoSave.value = val
   },
 })
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
+  <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 89f97f45b6..07fa87a44d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -14,6 +14,7 @@ import {
   inject,
   ref,
   resolveComponent,
+  useMenuCloseOnEsc,
   useNuxtApp,
   useViewColumns,
   watch,
@@ -119,10 +120,14 @@ const getIcon = (c: ColumnType) =>
   h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
     columnMeta: c,
   })
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
+  <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 419588c57f..26f3791611 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -9,6 +9,7 @@ import {
   getSortDirectionOptions,
   inject,
   ref,
+  useMenuCloseOnEsc,
   useViewSorts,
   watch,
 } from '#imports'
@@ -37,10 +38,14 @@ watch(
   },
   { immediate: true },
 )
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
+  <a-dropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index f525feb263..fe1d7c29e3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -8,6 +8,7 @@ import {
   message,
   ref,
   useI18n,
+  useMenuCloseOnEsc,
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
@@ -79,11 +80,15 @@ async function changeLockType(type: LockType) {
 }
 
 const { isSqlView } = useSmartsheetStoreOrThrow()
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
   <div>
-    <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
+    <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
       <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
diff --git a/packages/nc-gui/composables/useMenuCloseOnEsc/index.ts b/packages/nc-gui/composables/useMenuCloseOnEsc/index.ts
new file mode 100644
index 0000000000..2365b1ff0d
--- /dev/null
+++ b/packages/nc-gui/composables/useMenuCloseOnEsc/index.ts
@@ -0,0 +1,28 @@
+import { isClient } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+export function useMenuCloseOnEsc(open: Ref<boolean>) {
+  const handler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      e.stopPropagation()
+      open.value = false
+    }
+  }
+  if (isClient) {
+    watch(open, (nextVal, _, cleanup) => {
+      // bind listener when `open` is truthy
+      if (nextVal) {
+        document.addEventListener('keydown', handler, true)
+        // if `open` is falsy then remove the event handler
+      } else {
+        document.removeEventListener('keydown', handler, true)
+      }
+
+      // cleanup is called whenever the watcher is re-evaluated or stopped
+      cleanup(() => {
+        document.removeEventListener('keydown', handler, true)
+      })
+    })
+  }
+}

From db0db46a5d8ca07f6c8b02cb9b15edbdee6565ab Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 12:24:35 +0800
Subject: [PATCH 27/52] fix(nc-gui):  return loadGalleryData if it is public

---
 packages/nc-gui/composables/useViewData.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 7b25a42123..e8cfce4a2c 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -203,8 +203,7 @@ export function useViewData(
   }
 
   async function loadGalleryData() {
-    if (!viewMeta?.value?.id) return
-
+    if (!viewMeta?.value?.id || isPublic.value) return
     galleryData.value = await $api.dbView.galleryRead(viewMeta.value.id)
   }
 

From 19f8fd61fa6976d529db80a7f6d7a78a167ce6b6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 12:25:15 +0800
Subject: [PATCH 28/52] fix(nc-gui): trigger useKanbanViewStoreOrThrow only in
 kanban view

---
 packages/nc-gui/composables/useExpandedFormStore.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index fe528de320..90a9dff500 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -46,8 +46,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const activeView = inject(ActiveViewInj, ref())
 
-  const { addOrEditStackRow } = useKanbanViewStoreOrThrow()
-
   const { sharedView } = useSharedView()
 
   // getters
@@ -197,6 +195,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       }
 
       if (activeView.value?.type === ViewTypes.KANBAN) {
+        const { addOrEditStackRow } = useKanbanViewStoreOrThrow()
         addOrEditStackRow(row.value, isNewRow)
       }
 

From 4d4514c7d49281266a6f5c07cf0127fda5f84d4b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 13:25:45 +0800
Subject: [PATCH 29/52] feat(nc-gui): add useMenuCloseOnEsc to kanban toolbar

---
 .../smartsheet/toolbar/KanbanStackEditOrAdd.vue  | 16 +++++++++-------
 .../components/smartsheet/toolbar/StackedBy.vue  | 11 +++++++----
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
index cf56ccf3a7..bde75f2511 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow } from '#imports'
+import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow, useMenuCloseOnEsc } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -7,12 +7,14 @@ const { groupingFieldColumn } = useKanbanViewStoreOrThrow()
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const addOrEditStackDropdown = ref(false)
-
 const IsPublic = inject(IsPublicInj, ref(false))
 
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
+
 const handleSubmit = async () => {
-  addOrEditStackDropdown.value = false
+  open.value = false
 }
 
 provide(IsKanbanInj, ref(true))
@@ -21,7 +23,7 @@ provide(IsKanbanInj, ref(true))
 <template>
   <a-dropdown
     v-if="!IsPublic && isUIAllowed('edit-column')"
-    v-model:visible="addOrEditStackDropdown"
+    v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-add-edit-stack-menu"
   >
@@ -42,10 +44,10 @@ provide(IsKanbanInj, ref(true))
     </div>
     <template #overlay>
       <LazySmartsheetColumnEditOrAddProvider
-        v-if="addOrEditStackDropdown"
+        v-if="open"
         :column="groupingFieldColumn"
         @submit="handleSubmit"
-        @cancel="addOrEditStackDropdown = false"
+        @cancel="open = false"
         @click.stop
         @keydown.stop
       />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
index 50440ecb9c..60ce79502f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
@@ -12,6 +12,7 @@ import {
   inject,
   ref,
   useKanbanViewStoreOrThrow,
+  useMenuCloseOnEsc,
   useViewColumns,
   watch,
 } from '#imports'
@@ -30,7 +31,9 @@ const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, m
 
 const { kanbanMetaData, loadKanbanMeta, loadKanbanData, updateKanbanMeta, groupingField } = useKanbanViewStoreOrThrow()
 
-const stackedByDropdown = ref(false)
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 
 watch(
   () => activeView.value?.id,
@@ -68,14 +71,14 @@ const singleSelectFieldOptions = computed<SelectProps['options']>(() => {
 })
 
 const handleChange = () => {
-  stackedByDropdown.value = false
+  open.value = false
 }
 </script>
 
 <template>
   <a-dropdown
     v-if="!IsPublic"
-    v-model:visible="stackedByDropdown"
+    v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
   >
@@ -97,7 +100,7 @@ const handleChange = () => {
     </div>
     <template #overlay>
       <div
-        v-if="stackedByDropdown"
+        v-if="open"
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
         @click.stop
       >

From 381aa3e3e44afaab5bd7eaeaede127a05128f69b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 13:26:56 +0800
Subject: [PATCH 30/52] fix(nc-gui): close dropdown if a menu item is clicked

---
 packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index fe1d7c29e3..8289ff6dde 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -108,7 +108,7 @@ useMenuCloseOnEsc(open)
       </a-button>
 
       <template #overlay>
-        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded" data-testid="toolbar-actions">
+        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded" data-testid="toolbar-actions" @click="open = false">
           <a-menu-item-group>
             <a-sub-menu
               v-if="isUIAllowed('view-type')"

From eedea07beaca9ed0ec8410f37850b09d5b392999 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 13:32:22 +0800
Subject: [PATCH 31/52] chore(nc-gui): lint

---
 packages/nc-gui/components/cell/Percent.vue    | 4 ++--
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 9ce099db23..641f00890f 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
-import { VNodeRef } from '@vue/runtime-core'
 
 interface Props {
   modelValue?: number | string | null
@@ -21,8 +21,8 @@ const focus: VNodeRef = (el) => {
 
 <template>
   <input
-    :ref="focus"
     v-if="editEnabled"
+    :ref="focus"
     v-model="vModel"
     class="w-full !border-none text-base"
     :class="{ '!px-2': editEnabled }"
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index cd0a7da2b7..d007bfb074 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -711,7 +711,7 @@ watch(
                     @mouseover="selectBlock(rowIndex, colIndex)"
                     @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
                   >
-                    <div class="w-full h-full" v-if="!switchingTab">
+                    <div v-if="!switchingTab" class="w-full h-full">
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(columnObj)"
                         v-model="row.row[columnObj.title]"

From 1d8174e9239173a990148d1ad1662bd67cf140bc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 22 Nov 2022 11:31:26 +0530
Subject: [PATCH 32/52] feat: autofocus password field in protected shared view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/shared-view/AskPassword.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/shared-view/AskPassword.vue b/packages/nc-gui/components/shared-view/AskPassword.vue
index ab9680cc88..3edce49ca7 100644
--- a/packages/nc-gui/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui/components/shared-view/AskPassword.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { VNodeRef } from '@vue/runtime-core'
+import type { InputPassword } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg, message, ref, useRoute, useSharedView, useVModel } from '#imports'
 
 const props = defineProps<{
@@ -24,6 +26,8 @@ const onFinish = async () => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const focus: VNodeRef = (el: typeof InputPassword) => el?.$el?.querySelector('input').focus()
 </script>
 
 <template>
@@ -42,7 +46,7 @@ const onFinish = async () => {
 
       <a-form ref="formRef" :model="formState" class="mt-2" @finish="onFinish">
         <a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
-          <a-input-password v-model:value="formState.password" placeholder="Enter password" />
+          <a-input-password :ref="focus" v-model:value="formState.password" placeholder="Enter password" />
         </a-form-item>
 
         <a-button type="primary" html-type="submit">Unlock</a-button>

From 1ed3ae2261dc249d4b8717045bc4f5c680fd6ef5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 14:07:35 +0800
Subject: [PATCH 33/52] fix(nc-gui): resolve if import data is unchecked

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 1e1c50b8de..a2c24f8a26 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -240,6 +240,8 @@ export default class CSVTemplateAdapter {
             reject(e)
           },
         })
+      } else {
+        resolve(true)
       }
     })
   }

From 7646a4e8ba43b7e3978caca617df44e68c2852a9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 15 Nov 2022 00:38:23 +0530
Subject: [PATCH 34/52] wip: single/multi select option creation

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index f3f09fecba..ffc70435e9 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -17,6 +17,7 @@ import {
   useProject,
   useSelectedCellKeyupListener,
   watch,
+  useMetas
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -55,21 +56,24 @@ const options = computed<SelectOptionType[]>(() => {
     for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
       op.title = op.title?.replace(/^'/, '').replace(/'$/, '')
     }
-    return opts
+    return opts.map((o: SelectOptionType) => ({ ...o, value: o.title }))
   }
   return []
 })
 
 const vModel = computed({
-  get: () =>
-    selectedIds.value.reduce((acc, id) => {
-      const title = options.value.find((op) => op.id === id)?.title
+  get: () => {
+    return selectedIds.value.reduce((acc, id) => {
+      const title = (options.value.find((op) => op.id === id) || options.value.find((op) => op.title === id))?.title
 
       if (title) acc.push(title)
 
       return acc
-    }, [] as string[]),
-  set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
+    }, [] as string[])
+  },
+  set: (val) => {
+    emit('update:modelValue', val.length === 0 ? null : val.join(','))
+  },
 })
 
 const selectedTitles = computed(() =>
@@ -89,6 +93,20 @@ const selectedTitles = computed(() =>
     : [],
 )
 
+const handleKeys = async (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault()
+      isOpen.value = false
+      break
+    case 'Enter':
+      e.stopPropagation()
+      await addIfMissingAndSave()
+      break
+  }
+}
+const v = Math.floor(Math.random() * 1000)
+
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -97,9 +115,10 @@ const handleClose = (e: MouseEvent) => {
 
 onMounted(() => {
   selectedIds.value = selectedTitles.value.flatMap((el) => {
-    const item = options.value.find((op) => op.title === el)?.id
-    if (item) {
-      return [item]
+    const item = options.value.find((op) => op.title === el)
+    const itemIdOrTitle = item?.id || item?.title
+    if (itemIdOrTitle) {
+      return [itemIdOrTitle]
     }
 
     return []
@@ -142,6 +161,26 @@ useSelectedCellKeyupListener(active, (e) => {
       break
   }
 })
+
+const searchVal = ref()
+const { $api } = useNuxtApp()
+const {getMeta} = useMetas()
+
+async function addIfMissingAndSave() {
+  const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+  if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
+    const newOptions = [...options.value]
+    newOptions.push({ title: newOptValue, value: newOptValue })
+    column.value.colOptions = { options: newOptions.map(({ value: _, ...rest }) => rest) }
+
+    await $api.dbTableColumn.update(column.value?.id as string, {
+      ...column.value,
+    })
+    await getMeta(column.value.fk_model_id!, true)
+
+    vModel.value = [...vModel.value, newOptValue]
+  }
+}
 </script>
 
 <template>
@@ -153,7 +192,8 @@ useSelectedCellKeyupListener(active, (e) => {
     class="w-full"
     :bordered="false"
     :show-arrow="!readOnly"
-    :show-search="false"
+    show-search
+    :open="isOpen"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
@@ -162,7 +202,7 @@ useSelectedCellKeyupListener(active, (e) => {
   >
     <a-select-option
       v-for="op of options"
-      :key="op.id"
+      :key="op.id || op.title"
       :value="op.title"
       :data-testid="`select-option-${column.title}-${rowIndex}`"
       @click.stop
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index b7561d2e97..bc216b7b4c 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -2,6 +2,7 @@
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -14,7 +15,6 @@ import {
   useEventListener,
   watch,
 } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 
 interface Props {
   modelValue?: string | undefined
@@ -41,30 +41,41 @@ const isKanban = inject(IsKanbanInj, ref(false))
 
 const vModel = computed({
   get: () => modelValue,
-  set: (val) => emit('update:modelValue', val || null),
+  set: (val) => {
+    emit('update:modelValue', val || null)
+  },
 })
 
-const options = computed<SelectOptionType[]>(() => {
+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(/'$/, '')
     }
-    return opts
+    return opts.map((o: any) => ({ ...o, value: o.title }))
   }
   return []
 })
 
-const handleClose = (e: MouseEvent) => {
-  if (aselect.value && !aselect.value.$el.contains(e.target)) {
-    isOpen.value = false
-    aselect.value.blur()
+const handleKeys = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault()
+      isOpen.value = false
+      break
   }
 }
 
+const handleClose = (e: MouseEvent) => {
+  // if (aselect.value && !aselect.value.$el.contains(e.target)) {
+  //   isOpen.value = false
+  //   aselect.value.blur()
+  // }
+}
+
 useEventListener(document, 'click', handleClose)
 
 watch(isOpen, (n, _o) => {
@@ -87,6 +98,22 @@ useSelectedCellKeyupListener(active, (e) => {
       break
   }
 })
+
+const val = ref()
+const { $api } = useNuxtApp()
+
+const addIfMissingAndSave = async () => {
+  const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+
+  if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
+    options.value.push({ title: newOptValue, value: newOptValue })
+    column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
+
+    await $api.dbTableColumn.update(column.value?.id as string, {
+      ...column.value,
+    })
+  }
+}
 </script>
 
 <template>
@@ -141,6 +168,3 @@ useSelectedCellKeyupListener(active, (e) => {
   opacity: 1;
 }
 </style>
-<!--
-
--->

From be2bbc7d84f713fd1ac33caa352c1e73245a5795 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 16 Nov 2022 15:01:16 +0530
Subject: [PATCH 35/52] refactor(gui): use a-select for single select

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index ffc70435e9..9fa036468b 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -48,7 +48,7 @@ const isOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
-const options = computed<SelectOptionType[]>(() => {
+const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? (column.value.colOptions as SelectOptionsType).options.filter((el: SelectOptionType) => el.title !== '') || []
@@ -164,10 +164,15 @@ useSelectedCellKeyupListener(active, (e) => {
 
 const searchVal = ref()
 const { $api } = useNuxtApp()
-const {getMeta} = useMetas()
+const { getMeta } = useMetas()
 
 async function addIfMissingAndSave() {
-  const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+  const searchInput = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')
+
+  if (!searchInput) return false
+
+  const newOptValue = searchInput?.value
+
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
     const newOptions = [...options.value]
     newOptions.push({ title: newOptValue, value: newOptValue })
@@ -179,6 +184,7 @@ async function addIfMissingAndSave() {
     await getMeta(column.value.fk_model_id!, true)
 
     vModel.value = [...vModel.value, newOptValue]
+    searchInput.value = ''
   }
 }
 </script>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index bc216b7b4c..95e85f85a4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -60,12 +60,17 @@ const options = computed<(SelectOptionType & { value: string })[]>(() => {
   return []
 })
 
-const handleKeys = (e: KeyboardEvent) => {
+const handleKeys = async (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Escape':
       e.preventDefault()
       isOpen.value = false
       break
+    case 'Enter':
+      e.preventDefault()
+      if (await addIfMissingAndSave())
+        e.stopPropagation()
+      break
   }
 }
 
@@ -102,8 +107,12 @@ useSelectedCellKeyupListener(active, (e) => {
 const val = ref()
 const { $api } = useNuxtApp()
 
-const addIfMissingAndSave = async () => {
-  const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+async function addIfMissingAndSave() {
+  const searchInput = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')
+
+  if(!searchInput) return false
+
+  const newOptValue = searchInput?.value
 
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
     options.value.push({ title: newOptValue, value: newOptValue })
@@ -117,6 +126,24 @@ const addIfMissingAndSave = async () => {
 </script>
 
 <template>
+  <!--  <a-auto-complete
+      ref="aselect"
+      v-model:value="val"
+      class="w-full h-fill"
+      dropdown-class-name="nc-dropdown-single-select-cell"
+      :options="options"
+      @select="vModel = val"
+      :defaultActiveFirstOption="false"
+      @keydown.enter.prevent.stop="addIfMissingAndSave"
+    >
+      <template #option="item">
+        <div style="display: flex; justify-content: space-between">
+          {{ item.value }}
+        </div>
+      </template>
+      -->
+
+
   <a-select
     ref="aselect"
     v-model:value="vModel"

From 1219657783ee460652eda8aecbab23c3687a223d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 17 Nov 2022 00:34:29 +0530
Subject: [PATCH 36/52] feat(gui): set default color and option to add new
 option in dropdown

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 9fa036468b..c109cf9e13 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -5,7 +5,6 @@ import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   ColumnInj,
-  EditModeInj,
   IsKanbanInj,
   ReadonlyInj,
   computed,
@@ -16,8 +15,7 @@ import {
   useEventListener,
   useProject,
   useSelectedCellKeyupListener,
-  watch,
-  useMetas
+  watch,enumColor,useMetas
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -30,6 +28,8 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const emptyOption = Symbol('emptyOption')
+
 const { isMysql } = useProject()
 
 const column = inject(ColumnInj)!
@@ -48,6 +48,14 @@ const isOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
+const searchVal = ref()
+const { $api } = useNuxtApp()
+const { getMeta } = useMetas()
+
+const isOptionMissing = computed(() => {
+  return (options.value ?? []).every((op) => op.title !== searchVal.value)
+})
+
 const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
@@ -72,6 +80,9 @@ const vModel = computed({
     }, [] as string[])
   },
   set: (val) => {
+    if (isOptionMissing.value && val[val.length - 1] === searchVal.value) {
+      return addIfMissingAndSave()
+    }
     emit('update:modelValue', val.length === 0 ? null : val.join(','))
   },
 })
@@ -81,13 +92,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
     : [],
@@ -162,20 +173,16 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
-const searchVal = ref()
-const { $api } = useNuxtApp()
-const { getMeta } = useMetas()
 
 async function addIfMissingAndSave() {
-  const searchInput = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')
+  if (!searchVal) return false
 
-  if (!searchInput) return false
-
-  const newOptValue = searchInput?.value
+  const newOptValue = searchVal?.value
 
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
     const newOptions = [...options.value]
-    newOptions.push({ title: newOptValue, value: newOptValue })
+    newOptions.push({ title: newOptValue, value: newOptValue,
+      color: enumColor.light[(options.value.length + 1) % enumColor.light.length], })
     column.value.colOptions = { options: newOptions.map(({ value: _, ...rest }) => rest) }
 
     await $api.dbTableColumn.update(column.value?.id as string, {
@@ -184,9 +191,13 @@ async function addIfMissingAndSave() {
     await getMeta(column.value.fk_model_id!, true)
 
     vModel.value = [...vModel.value, newOptValue]
-    searchInput.value = ''
+    searchVal.value = ''
   }
 }
+
+const search = () => {
+  searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+}
 </script>
 
 <template>
@@ -203,7 +214,8 @@ async function addIfMissingAndSave() {
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
-    @keydown.enter.stop
+    @search="search"
+    @keydown.stop
     @click="isOpen = (active || editable) && !isOpen"
   >
     <a-select-option
@@ -228,6 +240,13 @@ async function addIfMissingAndSave() {
       </a-tag>
     </a-select-option>
 
+    <a-select-option v-if="searchVal && isOptionMissing" :key="searchVal" :value="searchVal">
+      <div class="flex gap-2 text-gray-500 items-center">
+        <MdiPlusThick class="min-w-4" />
+        <div class="text-xs whitespace-normal"> Create new option named <strong>{{ searchVal }}</strong></div>
+      </div>
+    </a-select-option>
+
     <template #tagRender="{ value: val, onClose }">
       <a-tag
         v-if="options.find((el) => el.title === val)"
@@ -301,6 +320,3 @@ async function addIfMissingAndSave() {
   @apply "flex overflow-hidden";
 }
 </style>
-<!--
-
--->
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 95e85f85a4..d9e9c654e3 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -14,6 +14,7 @@ import {
   ref,
   useEventListener,
   watch,
+  enumColor,
 } from '#imports'
 
 interface Props {
@@ -39,13 +40,25 @@ const isOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
+const { $api } = useNuxtApp()
+
+const searchVal = ref()
+
+const isOptionMissing = computed(() => {
+  return (options.value ?? []).every((op) => op.title !== searchVal.value)
+})
+
 const vModel = computed({
   get: () => modelValue,
   set: (val) => {
+    if (isOptionMissing.value && val === searchVal.value) {
+      return addIfMissingAndSave()
+    }
     emit('update:modelValue', val || null)
   },
 })
 
+
 const options = computed<(SelectOptionType & { value: string })[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
@@ -68,8 +81,8 @@ const handleKeys = async (e: KeyboardEvent) => {
       break
     case 'Enter':
       e.preventDefault()
-      if (await addIfMissingAndSave())
-        e.stopPropagation()
+      // if (await addIfMissingAndSave())
+      //   e.stopPropagation()
       break
   }
 }
@@ -104,46 +117,36 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
-const val = ref()
-const { $api } = useNuxtApp()
 
 async function addIfMissingAndSave() {
-  const searchInput = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')
 
-  if(!searchInput) return false
+  if (!searchVal.value) return false
 
-  const newOptValue = searchInput?.value
+  const newOptValue = searchVal.value
+  searchVal.value = ''
 
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
-    options.value.push({ title: newOptValue, value: newOptValue })
+    options.value.push({
+      title: newOptValue,
+      value: newOptValue,
+      color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
+    })
     column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
 
     await $api.dbTableColumn.update(column.value?.id as string, {
       ...column.value,
     })
+    vModel.value = newOptValue
   }
 }
-</script>
 
-<template>
-  <!--  <a-auto-complete
-      ref="aselect"
-      v-model:value="val"
-      class="w-full h-fill"
-      dropdown-class-name="nc-dropdown-single-select-cell"
-      :options="options"
-      @select="vModel = val"
-      :defaultActiveFirstOption="false"
-      @keydown.enter.prevent.stop="addIfMissingAndSave"
-    >
-      <template #option="item">
-        <div style="display: flex; justify-content: space-between">
-          {{ item.value }}
-        </div>
-      </template>
-      -->
 
+const search = () => {
+  searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+}
+</script>
 
+<template>
   <a-select
     ref="aselect"
     v-model:value="vModel"
@@ -155,6 +158,9 @@ async function addIfMissingAndSave() {
     :show-arrow="!readOnly && (active || editable || vModel === null)"
     :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
     @select="isOpen = false"
+    @keydown.stop
+    show-search
+    @search="search"
     @keydown.enter.stop
     @click="isOpen = (active || editable) && !isOpen"
   >
@@ -179,6 +185,15 @@ async function addIfMissingAndSave() {
         </span>
       </a-tag>
     </a-select-option>
+
+
+    <a-select-option v-if="searchVal && isOptionMissing" :key="searchVal" :value="searchVal">
+      <div class="flex gap-2 text-gray-500 items-center">
+        <MdiPlusThick class="min-w-4" />
+        <div class="text-xs whitespace-normal"> Create new option named <strong>{{ searchVal }}</strong></div>
+      </div>
+    </a-select-option>
+
   </a-select>
 </template>
 

From ac05d8fa6c6a0726517ec5b76347aa86269f9704 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 17 Nov 2022 23:40:07 +0530
Subject: [PATCH 37/52] feat(gui):  show temporary value while syncing in
 background

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |  2 -
 .../nc-gui/components/cell/MultiSelect.vue    | 55 ++++++++++++-------
 .../nc-gui/components/cell/SingleSelect.vue   |  9 ++-
 packages/nocodb/src/lib/Noco.ts               |  1 -
 4 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 4a230a0102..6e9b243c03 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -96,8 +96,6 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsDarkModeOutline: typeof import('~icons/material-symbols/dark-mode-outline')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
-    MaterialSymbolsKeyboardShift: typeof import('~icons/material-symbols/keyboard-shift')['default']
-    MaterialSymbolsLightMode: typeof import('~icons/material-symbols/light-mode')['default']
     MaterialSymbolsLightModeOutline: typeof import('~icons/material-symbols/light-mode-outline')['default']
     MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index c109cf9e13..3fb739e41f 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -15,7 +15,7 @@ import {
   useEventListener,
   useProject,
   useSelectedCellKeyupListener,
-  watch,enumColor,useMetas
+  watch, enumColor, useMetas,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -49,9 +49,13 @@ const isOpen = ref(false)
 const isKanban = inject(IsKanbanInj, ref(false))
 
 const searchVal = ref()
+
 const { $api } = useNuxtApp()
+
 const { getMeta } = useMetas()
 
+const tempVal = ref<string>()
+
 const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
@@ -71,13 +75,17 @@ const options = computed<(SelectOptionType & { value?: string })[]>(() => {
 
 const vModel = computed({
   get: () => {
-    return selectedIds.value.reduce((acc, id) => {
+    const selected = selectedIds.value.reduce((acc, id) => {
       const title = (options.value.find((op) => op.id === id) || options.value.find((op) => op.title === id))?.title
 
       if (title) acc.push(title)
 
       return acc
     }, [] as string[])
+
+    if (tempVal.value) selected.push(tempVal.value)
+
+    return selected
   },
   set: (val) => {
     if (isOptionMissing.value && val[val.length - 1] === searchVal.value) {
@@ -116,7 +124,6 @@ const handleKeys = async (e: KeyboardEvent) => {
       break
   }
 }
-const v = Math.floor(Math.random() * 1000)
 
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
@@ -176,25 +183,35 @@ useSelectedCellKeyupListener(active, (e) => {
 
 async function addIfMissingAndSave() {
   if (!searchVal) return false
-
-  const newOptValue = searchVal?.value
-
-  if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
-    const newOptions = [...options.value]
-    newOptions.push({ title: newOptValue, value: newOptValue,
-      color: enumColor.light[(options.value.length + 1) % enumColor.light.length], })
-    column.value.colOptions = { options: newOptions.map(({ value: _, ...rest }) => rest) }
-
-    await $api.dbTableColumn.update(column.value?.id as string, {
-      ...column.value,
-    })
-    await getMeta(column.value.fk_model_id!, true)
-
-    vModel.value = [...vModel.value, newOptValue]
-    searchVal.value = ''
+  try {
+    tempVal.value = searchVal.value
+    const newOptValue = searchVal?.value
+
+    if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
+      const newOptions = [...options.value]
+      newOptions.push({
+        title: newOptValue, value: newOptValue,
+        color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
+      })
+      column.value.colOptions = { options: newOptions.map(({ value: _, ...rest }) => rest) }
+
+      await $api.dbTableColumn.update(column.value?.id as string, {
+        ...column.value,
+      })
+      await getMeta(column.value.fk_model_id!, true)
+
+      vModel.value = [...vModel.value]
+      searchVal.value = ''
+    }
+  } catch (e) {
+    // todo: handle error message
+    console.log(e)
+  } finally {
+    tempVal.value = ''
   }
 }
 
+
 const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index d9e9c654e3..adf6a916e9 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -43,16 +43,20 @@ const isKanban = inject(IsKanbanInj, ref(false))
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
+const tempVal = ref<string>()
 
 const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
 
 const vModel = computed({
-  get: () => modelValue,
+  get: () => tempVal.value ?? modelValue,
   set: (val) => {
     if (isOptionMissing.value && val === searchVal.value) {
-      return addIfMissingAndSave()
+      tempVal.value = val
+      return addIfMissingAndSave().finally(() => {
+        tempVal.value = undefined
+      })
     }
     emit('update:modelValue', val || null)
   },
@@ -161,7 +165,6 @@ const search = () => {
     @keydown.stop
     show-search
     @search="search"
-    @keydown.enter.stop
     @click="isOpen = (active || editable) && !isOpen"
   >
     <a-select-option
diff --git a/packages/nocodb/src/lib/Noco.ts b/packages/nocodb/src/lib/Noco.ts
index 91cf8baac9..0dc767c026 100644
--- a/packages/nocodb/src/lib/Noco.ts
+++ b/packages/nocodb/src/lib/Noco.ts
@@ -213,7 +213,6 @@ export default class Noco {
     });
 
     // to get ip addresses
-
     this.router.use(requestIp.mw());
     this.router.use(cookieParser());
     this.router.use(

From b4b63e5140ec323fe463f7d4227ca627dcfbebe2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 19 Nov 2022 16:59:50 +0530
Subject: [PATCH 38/52] test:  add playwright test

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 76 +++++++++++--------
 .../nc-gui/components/cell/SingleSelect.vue   | 72 +++++++++---------
 .../Dashboard/common/Cell/SelectOptionCell.ts | 33 ++++++++
 .../tests/columnMultiSelect.spec.ts           | 25 ++++++
 .../tests/columnSingleSelect.spec.ts          | 13 ++++
 5 files changed, 150 insertions(+), 69 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 3fb739e41f..874d7a6e94 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -8,14 +8,17 @@ import {
   IsKanbanInj,
   ReadonlyInj,
   computed,
+  enumColor,
   h,
   inject,
   onMounted,
+  reactive,
   ref,
   useEventListener,
+  useMetas,
   useProject,
   useSelectedCellKeyupListener,
-  watch, enumColor, useMetas,
+  watch,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -28,8 +31,6 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const emptyOption = Symbol('emptyOption')
-
 const { isMysql } = useProject()
 
 const column = inject(ColumnInj)!
@@ -54,11 +55,7 @@ const { $api } = useNuxtApp()
 
 const { getMeta } = useMetas()
 
-const tempVal = ref<string>()
-
-const isOptionMissing = computed(() => {
-  return (options.value ?? []).every((op) => op.title !== searchVal.value)
-})
+const tempVal = reactive([])
 
 const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   if (column?.value.colOptions) {
@@ -73,6 +70,10 @@ const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   return []
 })
 
+const isOptionMissing = computed(() => {
+  return (options.value ?? []).every((op) => op.title !== searchVal.value)
+})
+
 const vModel = computed({
   get: () => {
     const selected = selectedIds.value.reduce((acc, id) => {
@@ -83,7 +84,7 @@ const vModel = computed({
       return acc
     }, [] as string[])
 
-    if (tempVal.value) selected.push(tempVal.value)
+    if (tempVal.length) selected.push(...tempVal)
 
     return selected
   },
@@ -112,18 +113,18 @@ const selectedTitles = computed(() =>
     : [],
 )
 
-const handleKeys = async (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Escape':
-      e.preventDefault()
-      isOpen.value = false
-      break
-    case 'Enter':
-      e.stopPropagation()
-      await addIfMissingAndSave()
-      break
-  }
-}
+// const handleKeys = async (e: KeyboardEvent) => {
+//   switch (e.key) {
+//     case 'Escape':
+//       e.preventDefault()
+//       isOpen.value = false
+//       break
+//     case 'Enter':
+//       e.stopPropagation()
+//       await addIfMissingAndSave()
+//       break
+//   }
+// }
 
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
@@ -177,20 +178,26 @@ useSelectedCellKeyupListener(active, (e) => {
         isOpen.value = true
       }
       break
+    default:
+      isOpen.value = true
+      break
   }
 })
 
+const activeOptCreateInProgress = ref(0)
 
 async function addIfMissingAndSave() {
   if (!searchVal) return false
   try {
-    tempVal.value = searchVal.value
+    tempVal.push(searchVal.value)
     const newOptValue = searchVal?.value
-
+    searchVal.value = ''
+    activeOptCreateInProgress.value++
     if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
       const newOptions = [...options.value]
       newOptions.push({
-        title: newOptValue, value: newOptValue,
+        title: newOptValue,
+        value: newOptValue,
         color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
       })
       column.value.colOptions = { options: newOptions.map(({ value: _, ...rest }) => rest) }
@@ -198,20 +205,25 @@ async function addIfMissingAndSave() {
       await $api.dbTableColumn.update(column.value?.id as string, {
         ...column.value,
       })
-      await getMeta(column.value.fk_model_id!, true)
 
-      vModel.value = [...vModel.value]
-      searchVal.value = ''
+      activeOptCreateInProgress.value--
+      if (!activeOptCreateInProgress.value) {
+        await getMeta(column.value.fk_model_id!, true)
+        vModel.value = [...vModel.value];
+        tempVal.splice(0, tempVal.length);
+      }
+    } else {
+      activeOptCreateInProgress.value--
     }
   } catch (e) {
     // todo: handle error message
     console.log(e)
+    activeOptCreateInProgress.value--
   } finally {
-    tempVal.value = ''
+    // tempVal.value = ''
   }
 }
 
-
 const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
@@ -226,7 +238,7 @@ const search = () => {
     class="w-full"
     :bordered="false"
     :show-arrow="!readOnly"
-    show-search
+    :show-search="active || editable"
     :open="isOpen"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
@@ -260,7 +272,9 @@ const search = () => {
     <a-select-option v-if="searchVal && isOptionMissing" :key="searchVal" :value="searchVal">
       <div class="flex gap-2 text-gray-500 items-center">
         <MdiPlusThick class="min-w-4" />
-        <div class="text-xs whitespace-normal"> Create new option named <strong>{{ searchVal }}</strong></div>
+        <div class="text-xs whitespace-normal">
+          Create new option named <strong>{{ searchVal }}</strong>
+        </div>
       </div>
     </a-select-option>
 
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index adf6a916e9..29ad3e5b1b 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -10,11 +10,11 @@ import {
   IsKanbanInj,
   ReadonlyInj,
   computed,
+  enumColor,
   inject,
   ref,
   useEventListener,
   watch,
-  enumColor,
 } from '#imports'
 
 interface Props {
@@ -45,6 +45,20 @@ const { $api } = useNuxtApp()
 const searchVal = ref()
 const tempVal = ref<string>()
 
+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 !== '') || []
+      : []
+    for (const op of opts.filter((el: any) => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    }
+    return opts.map((o: any) => ({ ...o, value: o.title }))
+  }
+  return []
+})
+
 const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
@@ -62,36 +76,21 @@ const vModel = computed({
   },
 })
 
-
-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 !== '') || []
-      : []
-    for (const op of opts.filter((el: any) => el.order === null)) {
-      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
-    }
-    return opts.map((o: any) => ({ ...o, value: o.title }))
-  }
-  return []
-})
-
-const handleKeys = async (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Escape':
-      e.preventDefault()
-      isOpen.value = false
-      break
-    case 'Enter':
-      e.preventDefault()
-      // if (await addIfMissingAndSave())
-      //   e.stopPropagation()
-      break
-  }
-}
-
-const handleClose = (e: MouseEvent) => {
+// const handleKeys = async (e: KeyboardEvent) => {
+//   switch (e.key) {
+//     case 'Escape':
+//       e.preventDefault()
+//       isOpen.value = false
+//       break
+//     case 'Enter':
+//       e.preventDefault()
+//       // if (await addIfMissingAndSave())
+//       //   e.stopPropagation()
+//       break
+//   }
+// }
+
+const handleClose = (_e: MouseEvent) => {
   // if (aselect.value && !aselect.value.$el.contains(e.target)) {
   //   isOpen.value = false
   //   aselect.value.blur()
@@ -121,9 +120,7 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
-
 async function addIfMissingAndSave() {
-
   if (!searchVal.value) return false
 
   const newOptValue = searchVal.value
@@ -144,7 +141,6 @@ async function addIfMissingAndSave() {
   }
 }
 
-
 const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
@@ -161,9 +157,9 @@ const search = () => {
     :disabled="readOnly"
     :show-arrow="!readOnly && (active || editable || vModel === null)"
     :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
+    :show-search="active || editable"
     @select="isOpen = false"
     @keydown.stop
-    show-search
     @search="search"
     @click="isOpen = (active || editable) && !isOpen"
   >
@@ -189,14 +185,14 @@ const search = () => {
       </a-tag>
     </a-select-option>
 
-
     <a-select-option v-if="searchVal && isOptionMissing" :key="searchVal" :value="searchVal">
       <div class="flex gap-2 text-gray-500 items-center">
         <MdiPlusThick class="min-w-4" />
-        <div class="text-xs whitespace-normal"> Create new option named <strong>{{ searchVal }}</strong></div>
+        <div class="text-xs whitespace-normal">
+          Create new option named <strong>{{ searchVal }}</strong>
+        </div>
       </div>
     </a-select-option>
-
   </a-select>
 </template>
 
diff --git a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
index bdd4adc18d..12495542b8 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
@@ -112,4 +112,37 @@ export class SelectOptionCellPageObject extends BasePage {
     await this.get({ index, columnHeader }).click();
     await this.rootPage.locator(`.nc-dropdown-single-select-cell`).nth(index).waitFor({ state: 'hidden' });
   }
+
+  async addNewOption({
+    index,
+    columnHeader,
+    option,
+    multiSelect,
+  }: {
+    index: number;
+    columnHeader: string;
+    option: string;
+    multiSelect?: boolean;
+  }) {
+    const selectCell = this.get({ index, columnHeader });
+
+    // check if cell active
+    if (!(await selectCell.getAttribute('class')).includes('active')) {
+      await selectCell.click();
+    }
+
+    await selectCell.locator('.ant-select-selection-search-input').type(option);
+
+    await selectCell.locator('.ant-select-selection-search-input').press('Enter');
+
+    if (multiSelect) await selectCell.locator('.ant-select-selection-search-input').press('Escape');
+
+    // await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
+    //
+    //
+    // await this.rootPage
+    //   .getByTestId(`select-option-${columnHeader}-${index}`)
+    //   .getByText(option)
+    //   .waitFor({ state: 'hidden' });
+  }
 }
diff --git a/tests/playwright/tests/columnMultiSelect.spec.ts b/tests/playwright/tests/columnMultiSelect.spec.ts
index 042d0466ac..ecde02fbea 100644
--- a/tests/playwright/tests/columnMultiSelect.spec.ts
+++ b/tests/playwright/tests/columnMultiSelect.spec.ts
@@ -128,4 +128,29 @@ test.describe('Multi select', () => {
 
     await grid.column.delete({ title: 'MultiSelect' });
   });
+
+  test.only('Add new option directly from cell', async () => {
+    await grid.cell.selectOption.addNewOption({
+      index: 0,
+      columnHeader: 'MultiSelect',
+      option: 'Option added from cell 1',
+      multiSelect: true,
+    });
+
+    await grid.cell.selectOption.addNewOption({
+      index: 0,
+      columnHeader: 'MultiSelect',
+      option: 'Option added from cell 2',
+      multiSelect: true,
+    });
+
+    await grid.cell.selectOption.verifyOptions({
+      index: 0,
+      columnHeader: 'MultiSelect',
+      options: ['Option added from cell 1', 'Option added from cell 2'],
+    });
+    await new Promise(resolve => setTimeout(resolve, 100000));
+
+    await grid.column.delete({ title: 'SingleSelect' });
+  });
 });
diff --git a/tests/playwright/tests/columnSingleSelect.spec.ts b/tests/playwright/tests/columnSingleSelect.spec.ts
index 4596d4ba2b..c7aa289ca9 100644
--- a/tests/playwright/tests/columnSingleSelect.spec.ts
+++ b/tests/playwright/tests/columnSingleSelect.spec.ts
@@ -69,4 +69,17 @@ test.describe('Single select', () => {
 
     await grid.column.delete({ title: 'SingleSelect' });
   });
+
+  test('Add new option directly from cell', async () => {
+    await grid.cell.selectOption.addNewOption({
+      index: 0,
+      columnHeader: 'SingleSelect',
+      option: 'Option added from cell',
+    });
+
+    await grid.cell.selectOption.verify({ index: 0, columnHeader: 'SingleSelect', option: 'Option added from cell' });
+    await new Promise(resolve => setTimeout(resolve, 100000));
+
+    await grid.column.delete({ title: 'SingleSelect' });
+  });
 });

From 7d5fb68d2ea165cd5b082d7e91afa018b9cc2928 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 20 Nov 2022 11:35:37 +0530
Subject: [PATCH 39/52] test(playwright): add method to verify selected options

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    |  3 ++-
 .../Dashboard/common/Cell/SelectOptionCell.ts | 25 +++++++++++++------
 .../tests/columnMultiSelect.spec.ts           |  7 +++---
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 874d7a6e94..97e719790b 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -212,6 +212,7 @@ async function addIfMissingAndSave() {
         vModel.value = [...vModel.value];
         tempVal.splice(0, tempVal.length);
       }
+
     } else {
       activeOptCreateInProgress.value--
     }
@@ -281,7 +282,7 @@ const search = () => {
     <template #tagRender="{ value: val, onClose }">
       <a-tag
         v-if="options.find((el) => el.title === val)"
-        class="rounded-tag"
+        class="rounded-tag nc-selected-option"
         :style="{ display: 'flex', alignItems: 'center' }"
         :color="options.find((el) => el.title === val)?.color"
         :closable="(active || editable) && (vModel.length > 1 || !column?.rqd)"
diff --git a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
index 12495542b8..82953a7124 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
@@ -136,13 +136,24 @@ export class SelectOptionCellPageObject extends BasePage {
     await selectCell.locator('.ant-select-selection-search-input').press('Enter');
 
     if (multiSelect) await selectCell.locator('.ant-select-selection-search-input').press('Escape');
+    // todo: wait for update api call
+  }
 
-    // await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
-    //
-    //
-    // await this.rootPage
-    //   .getByTestId(`select-option-${columnHeader}-${index}`)
-    //   .getByText(option)
-    //   .waitFor({ state: 'hidden' });
+  async verifySelectedOptions({
+    index,
+    options,
+    columnHeader,
+  }: {
+    columnHeader: string;
+    options: string[];
+    index: number;
+  }) {
+    const selectCell = this.get({ index, columnHeader });
+
+    let counter = 0;
+    for (const option of options) {
+      await expect(selectCell.locator(`.nc-selected-option`).nth(counter)).toHaveText(option);
+      counter++;
+    }
   }
 }
diff --git a/tests/playwright/tests/columnMultiSelect.spec.ts b/tests/playwright/tests/columnMultiSelect.spec.ts
index ecde02fbea..5eff82acfa 100644
--- a/tests/playwright/tests/columnMultiSelect.spec.ts
+++ b/tests/playwright/tests/columnMultiSelect.spec.ts
@@ -129,7 +129,7 @@ test.describe('Multi select', () => {
     await grid.column.delete({ title: 'MultiSelect' });
   });
 
-  test.only('Add new option directly from cell', async () => {
+  test('Add new option directly from cell', async () => {
     await grid.cell.selectOption.addNewOption({
       index: 0,
       columnHeader: 'MultiSelect',
@@ -144,13 +144,12 @@ test.describe('Multi select', () => {
       multiSelect: true,
     });
 
-    await grid.cell.selectOption.verifyOptions({
+    await grid.cell.selectOption.verifySelectedOptions({
       index: 0,
       columnHeader: 'MultiSelect',
       options: ['Option added from cell 1', 'Option added from cell 2'],
     });
-    await new Promise(resolve => setTimeout(resolve, 100000));
 
-    await grid.column.delete({ title: 'SingleSelect' });
+    await grid.column.delete({ title: 'MultiSelect' });
   });
 });

From 61661e4a9cf87844fcc9ee7e64c06064cfd15a24 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 20 Nov 2022 13:22:42 +0530
Subject: [PATCH 40/52] fix(gui): hide add option from shared form view

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 97e719790b..a852c23f26 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -41,6 +41,8 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -49,7 +51,7 @@ const isOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
-const searchVal = ref()
+const searchVal = ref<string | null>()
 
 const { $api } = useNuxtApp()
 
@@ -101,13 +103,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
     : [],
@@ -187,7 +189,7 @@ useSelectedCellKeyupListener(active, (e) => {
 const activeOptCreateInProgress = ref(0)
 
 async function addIfMissingAndSave() {
-  if (!searchVal) return false
+  if (!searchVal || isPublic.value) return false
   try {
     tempVal.push(searchVal.value)
     const newOptValue = searchVal?.value
@@ -202,17 +204,16 @@ async function addIfMissingAndSave() {
       })
       column.value.colOptions = { options: newOptions.map(({ value: _, ...rest }) => rest) }
 
-      await $api.dbTableColumn.update(column.value?.id as string, {
+      await $api.dbTableColumn.update((column.value as { fk_column_id?: string })?.fk_column_id || (column.value?.id as string), {
         ...column.value,
       })
 
       activeOptCreateInProgress.value--
       if (!activeOptCreateInProgress.value) {
         await getMeta(column.value.fk_model_id!, true)
-        vModel.value = [...vModel.value];
-        tempVal.splice(0, tempVal.length);
+        vModel.value = [...vModel.value]
+        tempVal.splice(0, tempVal.length)
       }
-
     } else {
       activeOptCreateInProgress.value--
     }
@@ -270,8 +271,8 @@ const search = () => {
       </a-tag>
     </a-select-option>
 
-    <a-select-option v-if="searchVal && isOptionMissing" :key="searchVal" :value="searchVal">
-      <div class="flex gap-2 text-gray-500 items-center">
+    <a-select-option v-if="searchVal && isOptionMissing && !isPublic" :key="searchVal" :value="searchVal">
+      <div class="flex gap-2 text-gray-500 items-center h-full">
         <MdiPlusThick class="min-w-4" />
         <div class="text-xs whitespace-normal">
           Create new option named <strong>{{ searchVal }}</strong>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 29ad3e5b1b..d9d6d1a3d3 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -40,6 +40,8 @@ const isOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -121,7 +123,7 @@ useSelectedCellKeyupListener(active, (e) => {
 })
 
 async function addIfMissingAndSave() {
-  if (!searchVal.value) return false
+  if (!searchVal.value || isPublic.value) return false
 
   const newOptValue = searchVal.value
   searchVal.value = ''
@@ -134,7 +136,7 @@ async function addIfMissingAndSave() {
     })
     column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
 
-    await $api.dbTableColumn.update(column.value?.id as string, {
+    await $api.dbTableColumn.update((column.value as { fk_column_id?: string })?.fk_column_id || (column.value?.id as string), {
       ...column.value,
     })
     vModel.value = newOptValue
@@ -185,8 +187,8 @@ const search = () => {
       </a-tag>
     </a-select-option>
 
-    <a-select-option v-if="searchVal && isOptionMissing" :key="searchVal" :value="searchVal">
-      <div class="flex gap-2 text-gray-500 items-center">
+    <a-select-option v-if="searchVal && isOptionMissing && !isPublic" :key="searchVal" :value="searchVal">
+      <div class="flex gap-2 text-gray-500 items-center h-full">
         <MdiPlusThick class="min-w-4" />
         <div class="text-xs whitespace-normal">
           Create new option named <strong>{{ searchVal }}</strong>

From 6ffd7b5e5de7b388b17e86edc27446d425728bf6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 12:31:20 +0530
Subject: [PATCH 41/52] feat(gui): use title if id is missing

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index a852c23f26..3229831054 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -57,7 +57,7 @@ const { $api } = useNuxtApp()
 
 const { getMeta } = useMetas()
 
-const tempVal = reactive([])
+const tempVal = reactive<string[]>([])
 
 const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   if (column?.value.colOptions) {
@@ -103,13 +103,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
     : [],
@@ -151,10 +151,10 @@ useEventListener(document, 'click', handleClose)
 watch(
   () => modelValue,
   () => {
-    selectedIds.value = selectedIds.value = selectedTitles.value.flatMap((el) => {
-      const item = options.value.find((op) => op.title === el)?.id
-      if (item) {
-        return [item]
+    selectedIds.value = selectedTitles.value.flatMap((el) => {
+      const item = options.value.find((op) => op.title === el)
+      if (item && (item.id || item.title)) {
+        return [(item.id || item.title)!]
       }
 
       return []
@@ -189,7 +189,7 @@ useSelectedCellKeyupListener(active, (e) => {
 const activeOptCreateInProgress = ref(0)
 
 async function addIfMissingAndSave() {
-  if (!searchVal || isPublic.value) return false
+  if (!searchVal.value || isPublic.value) return false
   try {
     tempVal.push(searchVal.value)
     const newOptValue = searchVal?.value

From 56dc7615c302ff5fff45f8ca1704a11d859f3c2c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 17:01:03 +0530
Subject: [PATCH 42/52] refactor(gui): requested changes

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 41 +++++++------------
 .../nc-gui/components/cell/SingleSelect.vue   | 35 ++++------------
 .../composables/useMultiSelect/index.ts       |  5 ++-
 packages/nc-gui/nuxt.config.ts                |  1 -
 .../en/getting-started/installation.md        |  2 +-
 5 files changed, 25 insertions(+), 59 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 3229831054..821291cc98 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -57,7 +57,9 @@ const { $api } = useNuxtApp()
 
 const { getMeta } = useMetas()
 
-const tempVal = reactive<string[]>([])
+// a variable to keep newly created options value
+// temporary until it's add the option to column meta
+const tempSelectedOptsState = reactive<string[]>([])
 
 const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   if (column?.value.colOptions) {
@@ -86,7 +88,7 @@ const vModel = computed({
       return acc
     }, [] as string[])
 
-    if (tempVal.length) selected.push(...tempVal)
+    if (tempSelectedOptsState.length) selected.push(...tempSelectedOptsState)
 
     return selected
   },
@@ -103,31 +105,18 @@ 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
     : [],
 )
 
-// const handleKeys = async (e: KeyboardEvent) => {
-//   switch (e.key) {
-//     case 'Escape':
-//       e.preventDefault()
-//       isOpen.value = false
-//       break
-//     case 'Enter':
-//       e.stopPropagation()
-//       await addIfMissingAndSave()
-//       break
-//   }
-// }
-
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -191,7 +180,7 @@ const activeOptCreateInProgress = ref(0)
 async function addIfMissingAndSave() {
   if (!searchVal.value || isPublic.value) return false
   try {
-    tempVal.push(searchVal.value)
+    tempSelectedOptsState.push(searchVal.value)
     const newOptValue = searchVal?.value
     searchVal.value = ''
     activeOptCreateInProgress.value++
@@ -212,17 +201,15 @@ async function addIfMissingAndSave() {
       if (!activeOptCreateInProgress.value) {
         await getMeta(column.value.fk_model_id!, true)
         vModel.value = [...vModel.value]
-        tempVal.splice(0, tempVal.length)
+        tempSelectedOptsState.splice(0, tempSelectedOptsState.length)
       }
     } else {
       activeOptCreateInProgress.value--
     }
   } catch (e) {
-    // todo: handle error message
+    // todo: handle error
     console.log(e)
     activeOptCreateInProgress.value--
-  } finally {
-    // tempVal.value = ''
   }
 }
 
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index d9d6d1a3d3..0cdb50d4df 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -13,7 +13,6 @@ import {
   enumColor,
   inject,
   ref,
-  useEventListener,
   watch,
 } from '#imports'
 
@@ -45,7 +44,10 @@ const isPublic = inject(IsPublicInj, ref(false))
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
-const tempVal = ref<string>()
+
+// a variable to keep newly created option value
+// temporary until it's add the option to column meta
+const tempSelectedOptState = ref<string>()
 
 const options = computed<(SelectOptionType & { value: string })[]>(() => {
   if (column?.value.colOptions) {
@@ -66,41 +68,18 @@ const isOptionMissing = computed(() => {
 })
 
 const vModel = computed({
-  get: () => tempVal.value ?? modelValue,
+  get: () => tempSelectedOptState.value ?? modelValue,
   set: (val) => {
     if (isOptionMissing.value && val === searchVal.value) {
-      tempVal.value = val
+      tempSelectedOptState.value = val
       return addIfMissingAndSave().finally(() => {
-        tempVal.value = undefined
+        tempSelectedOptState.value = undefined
       })
     }
     emit('update:modelValue', val || null)
   },
 })
 
-// const handleKeys = async (e: KeyboardEvent) => {
-//   switch (e.key) {
-//     case 'Escape':
-//       e.preventDefault()
-//       isOpen.value = false
-//       break
-//     case 'Enter':
-//       e.preventDefault()
-//       // if (await addIfMissingAndSave())
-//       //   e.stopPropagation()
-//       break
-//   }
-// }
-
-const handleClose = (_e: MouseEvent) => {
-  // if (aselect.value && !aselect.value.$el.contains(e.target)) {
-  //   isOpen.value = false
-  //   aselect.value.blur()
-  // }
-}
-
-useEventListener(document, 'click', handleClose)
-
 watch(isOpen, (n, _o) => {
   if (!n) {
     aselect.value?.$el?.querySelector('input')?.blur()
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index d0d6fe7867..61473193ed 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -131,9 +131,10 @@ export function useMultiSelect(
   })
 
   const onKeyDown = async (e: KeyboardEvent) => {
+
     // invoke the keyEventHandler if provided and return if it returns true
     if (await keyEventHandler?.(e)) {
-      return
+      return true
     }
 
     if (
@@ -268,7 +269,7 @@ export function useMultiSelect(
           }
 
           if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
-            return
+            return true
           }
 
           /** on letter key press make cell editable and empty */
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index 885cbe78d9..afba37c6ba 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -141,7 +141,6 @@ export default defineNuxtConfig({
       'process.env.DEBUG': 'false',
       'process.nextTick': () => {},
       'process.env.ANT_MESSAGE_DURATION': process.env.ANT_MESSAGE_DURATION,
-      'process.env.NC_BACKEND_URL': process.env.NC_BACKEND_URL,
     },
     server: {
       watch: {
diff --git a/packages/noco-docs/content/en/getting-started/installation.md b/packages/noco-docs/content/en/getting-started/installation.md
index 107158e4ed..2f341aee2a 100644
--- a/packages/noco-docs/content/en/getting-started/installation.md
+++ b/packages/noco-docs/content/en/getting-started/installation.md
@@ -478,7 +478,7 @@ It is mandatory to configure `NC_DB` environment variables for production usecas
 | NC_JWT_EXPIRES_IN                  | No        | JWT token expiry time                                                                                                   | `10h`                                                                                          |   |
 | NC_CONNECT_TO_EXTERNAL_DB_DISABLED | No        | Disable Project creation with external database                                                                         |                                                                                                |   |
 | NC_INVITE_ONLY_SIGNUP              | No        | Allow users to signup only via invite url, value should be any non-empty string.                                        |                                                                                                |   |
-| NC_BACKEND_URL                     | No        | Custom Backend URL                                                                                                      | ``http://localhost:8080`` will be used                                                         |   |
+| NUXT_PUBLIC_NC_BACKEND_URL         | No        | Custom Backend URL                                                                                                      | ``http://localhost:8080`` will be used                                                         |   |
 | NC_REQUEST_BODY_SIZE               | No        | Request body size [limit](https://expressjs.com/en/resources/middleware/body-parser.html#limit)                         | `1048576`                                                                                      |   |
 | NC_EXPORT_MAX_TIMEOUT              | No        | After NC_EXPORT_MAX_TIMEOUT csv gets downloaded in batches                                                              | Default value 5000(in millisecond) will be used                                                |   |
 | NC_DISABLE_TELE                    | No        | Disable telemetry                                                                                                       |                                                                                                |   |

From 064436d550c91b97580e177662d2073327e19dde Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 17:20:15 +0530
Subject: [PATCH 43/52] refactor(gui): reload table meta after adding new
 option

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    |  3 ++
 .../nc-gui/components/cell/SingleSelect.vue   | 32 ++++++++++++-------
 .../composables/useMultiSelect/index.ts       |  1 -
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 821291cc98..fc59e3e07e 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
@@ -20,6 +21,7 @@ import {
   useSelectedCellKeyupListener,
   watch,
 } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -210,6 +212,7 @@ async function addIfMissingAndSave() {
     // todo: handle error
     console.log(e)
     activeOptCreateInProgress.value--
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 0cdb50d4df..c478a3c015 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
@@ -15,6 +16,7 @@ import {
   ref,
   watch,
 } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface Props {
   modelValue?: string | undefined
@@ -45,6 +47,8 @@ const { $api } = useNuxtApp()
 
 const searchVal = ref()
 
+const { getMeta } = useMetas()
+
 // a variable to keep newly created option value
 // temporary until it's add the option to column meta
 const tempSelectedOptState = ref<string>()
@@ -108,17 +112,23 @@ async function addIfMissingAndSave() {
   searchVal.value = ''
 
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
-    options.value.push({
-      title: newOptValue,
-      value: newOptValue,
-      color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
-    })
-    column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
-
-    await $api.dbTableColumn.update((column.value as { fk_column_id?: string })?.fk_column_id || (column.value?.id as string), {
-      ...column.value,
-    })
-    vModel.value = newOptValue
+    try {
+      options.value.push({
+        title: newOptValue,
+        value: newOptValue,
+        color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
+      })
+      column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
+
+      await $api.dbTableColumn.update((column.value as { fk_column_id?: string })?.fk_column_id || (column.value?.id as string), {
+        ...column.value,
+      })
+      vModel.value = newOptValue
+      await getMeta(column.value.fk_model_id!, true)
+    } catch (e) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 }
 
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 61473193ed..9b08d29554 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -131,7 +131,6 @@ export function useMultiSelect(
   })
 
   const onKeyDown = async (e: KeyboardEvent) => {
-
     // invoke the keyEventHandler if provided and return if it returns true
     if (await keyEventHandler?.(e)) {
       return true

From 9b26924f9d33329913a9191a6b71bd34b29f4c41 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 20:07:49 +0530
Subject: [PATCH 44/52] test: remove unnecessary delay

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 tests/playwright/tests/columnSingleSelect.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/playwright/tests/columnSingleSelect.spec.ts b/tests/playwright/tests/columnSingleSelect.spec.ts
index c7aa289ca9..2b2d737889 100644
--- a/tests/playwright/tests/columnSingleSelect.spec.ts
+++ b/tests/playwright/tests/columnSingleSelect.spec.ts
@@ -78,7 +78,6 @@ test.describe('Single select', () => {
     });
 
     await grid.cell.selectOption.verify({ index: 0, columnHeader: 'SingleSelect', option: 'Option added from cell' });
-    await new Promise(resolve => setTimeout(resolve, 100000));
 
     await grid.column.delete({ title: 'SingleSelect' });
   });

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 45/52] 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"

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 46/52] 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

From 0d98aac265f77511f8ac906ce403a86ab49932ef Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 22 Nov 2022 11:21:41 +0530
Subject: [PATCH 47/52] refactor: group import statements

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 19f7c2d51b..dcfd660be9 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -10,6 +10,7 @@ import {
   ReadonlyInj,
   computed,
   enumColor,
+  extractSdkResponseErrorMsg,
   h,
   inject,
   onMounted,
@@ -21,7 +22,6 @@ import {
   useSelectedCellKeyupListener,
   watch,
 } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -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
     : [],
@@ -284,13 +284,13 @@ const onTagClick = (e: Event, onClose: Function) => {
 
     <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' }"
         :color="options.find((el) => el.title === val)?.color"
         :closable="(active || editable) && (vModel.length > 1 || !column?.rqd)"
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
+        @click="onTagClick($event, onClose)"
         @close="onClose"
       >
         <span
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 6fbd0615e0..ab20e724a8 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -3,7 +3,6 @@ import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -12,11 +11,12 @@ import {
   ReadonlyInj,
   computed,
   enumColor,
+  extractSdkResponseErrorMsg,
   inject,
   ref,
+  useSelectedCellKeyupListener,
   watch,
 } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface Props {
   modelValue?: string | undefined
@@ -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(/'$/, '')

From 3f3f9e55f357b4741ee74546d3cb9be3251395ea Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 22 Nov 2022 11:36:21 +0530
Subject: [PATCH 48/52] fix(test): Temporary fix for pg sakila resetting issue

---
 packages/nocodb/src/lib/meta/api/testApis.ts  |  1 +
 .../services/test/TestResetService/index.ts   | 22 +++++++++++++------
 tests/playwright/setup/db.ts                  |  9 ++++----
 tests/playwright/setup/index.ts               | 18 ++++++++++++++-
 tests/playwright/tests/metaSync.spec.ts       |  2 +-
 5 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/testApis.ts b/packages/nocodb/src/lib/meta/api/testApis.ts
index 76fcfcd842..73cba3ceb4 100644
--- a/packages/nocodb/src/lib/meta/api/testApis.ts
+++ b/packages/nocodb/src/lib/meta/api/testApis.ts
@@ -6,6 +6,7 @@ export async function reset(req: Request<any, any>, res) {
     parallelId: req.body.parallelId,
     dbType: req.body.dbType,
     isEmptyProject: req.body.isEmptyProject,
+    workerId: req.body.workerId
   });
 
   res.json(await service.process());
diff --git a/packages/nocodb/src/lib/services/test/TestResetService/index.ts b/packages/nocodb/src/lib/services/test/TestResetService/index.ts
index 59d7372565..ae9837ce3e 100644
--- a/packages/nocodb/src/lib/services/test/TestResetService/index.ts
+++ b/packages/nocodb/src/lib/services/test/TestResetService/index.ts
@@ -23,11 +23,13 @@ const loginRootUser = async () => {
 const projectTitleByType = {
   sqlite: 'sampleREST',
   mysql: 'externalREST',
-  pg: 'pgExtREST',
+  pg: 'pgExtREST'
 };
 
 export class TestResetService {
   private readonly parallelId;
+  // todo: Hack to resolve issue with pg resetting
+  private readonly workerId;
   private readonly dbType;
   private readonly isEmptyProject: boolean;
 
@@ -35,14 +37,17 @@ export class TestResetService {
     parallelId,
     dbType,
     isEmptyProject,
+    workerId
   }: {
     parallelId: string;
     dbType: string;
     isEmptyProject: boolean;
+    workerId: string;
   }) {
     this.parallelId = parallelId;
     this.dbType = dbType;
     this.isEmptyProject = isEmptyProject;
+    this.workerId = workerId;
   }
 
   async process() {
@@ -68,6 +73,7 @@ export class TestResetService {
         token,
         dbType: this.dbType,
         parallelId: this.parallelId,
+        workerId: this.workerId
       });
 
       try {
@@ -90,10 +96,12 @@ export class TestResetService {
     token,
     dbType,
     parallelId,
+    workerId
   }: {
     token: string;
     dbType: string;
     parallelId: string;
+    workerId: string;
   }) {
     const title = `${projectTitleByType[dbType]}${parallelId}`;
     const project: Project | undefined = await Project.getByTitle(title);
@@ -115,7 +123,7 @@ export class TestResetService {
         token,
         title,
         parallelId,
-        isEmptyProject: this.isEmptyProject,
+        isEmptyProject: this.isEmptyProject
       });
     } else if (dbType == 'mysql') {
       await resetMysqlSakilaProject({
@@ -123,20 +131,20 @@ export class TestResetService {
         title,
         parallelId,
         oldProject: project,
-        isEmptyProject: this.isEmptyProject,
+        isEmptyProject: this.isEmptyProject
       });
     } else if (dbType == 'pg') {
       await resetPgSakilaProject({
         token,
         title,
-        parallelId,
+        parallelId: workerId,
         oldProject: project,
-        isEmptyProject: this.isEmptyProject,
+        isEmptyProject: this.isEmptyProject
       });
     }
 
     return {
-      project: await Project.getByTitle(title),
+      project: await Project.getByTitle(title)
     };
   }
 }
@@ -169,7 +177,7 @@ const removeProjectUsersFromCache = async (project: Project) => {
   const projectUsers: ProjectUser[] = await ProjectUser.getUsersList({
     project_id: project.id,
     limit: 1000,
-    offset: 0,
+    offset: 0
   });
 
   for (const projectUser of projectUsers) {
diff --git a/tests/playwright/setup/db.ts b/tests/playwright/setup/db.ts
index d42591f406..103af14789 100644
--- a/tests/playwright/setup/db.ts
+++ b/tests/playwright/setup/db.ts
@@ -11,17 +11,18 @@ const isSqlite = (context: NcContext) => context.dbType === 'sqlite';
 
 const isPg = (context: NcContext) => context.dbType === 'pg';
 
-const pg_credentials = () => ({
+const pg_credentials = (context: NcContext) => ({
   user: 'postgres',
   host: 'localhost',
-  database: `sakila_${process.env.TEST_PARALLEL_INDEX}`,
+  // todo: Hack to resolve issue with pg resetting
+  database: `sakila_${context.workerId}`,
   password: 'password',
   port: 5432,
 });
 
-const pgExec = async (query: string) => {
+const pgExec = async (query: string, context: NcContext) => {
   // open pg client connection
-  const client = new Client(pg_credentials());
+  const client = new Client(pg_credentials(context));
   await client.connect();
 
   await client.query(query);
diff --git a/tests/playwright/setup/index.ts b/tests/playwright/setup/index.ts
index a738d5c095..8d04b75464 100644
--- a/tests/playwright/setup/index.ts
+++ b/tests/playwright/setup/index.ts
@@ -1,10 +1,14 @@
 import { Page, selectors } from '@playwright/test';
 import axios from 'axios';
 
+const workerCount = {};
+
 export interface NcContext {
   project: any;
   token: string;
   dbType?: string;
+  // todo: Hack to resolve issue with pg resetting
+  workerId?: string;
 }
 
 selectors.setTestIdAttribute('data-testid');
@@ -13,11 +17,23 @@ const setup = async ({ page, isEmptyProject }: { page: Page; isEmptyProject?: bo
   let dbType = process.env.CI ? process.env.E2E_DB_TYPE : process.env.E2E_DEV_DB_TYPE;
   dbType = dbType || 'sqlite';
 
+  let workerId;
+  // todo: Hack to resolve issue with pg resetting
+  if (dbType === 'pg') {
+    const workerIndex = process.env.TEST_PARALLEL_INDEX;
+    if (!workerCount[workerIndex]) {
+      workerCount[workerIndex] = 0;
+    }
+    workerCount[workerIndex]++;
+    workerId = String(Number(workerIndex) + Number(workerCount[workerIndex]) * 4);
+  }
+
   // if (!process.env.CI) console.time(`setup ${process.env.TEST_PARALLEL_INDEX}`);
   let response;
   try {
     response = await axios.post(`http://localhost:8080/api/v1/meta/test/reset`, {
       parallelId: process.env.TEST_PARALLEL_INDEX,
+      workerId: workerId,
       dbType,
       isEmptyProject,
     });
@@ -59,7 +75,7 @@ const setup = async ({ page, isEmptyProject }: { page: Page; isEmptyProject?: bo
 
   await page.goto(`/#/nc/${project.id}/auth`, { waitUntil: 'networkidle' });
 
-  return { project, token, dbType } as NcContext;
+  return { project, token, dbType, workerId } as NcContext;
 };
 
 export default setup;
diff --git a/tests/playwright/tests/metaSync.spec.ts b/tests/playwright/tests/metaSync.spec.ts
index 086d2bcb10..bec73023bd 100644
--- a/tests/playwright/tests/metaSync.spec.ts
+++ b/tests/playwright/tests/metaSync.spec.ts
@@ -24,7 +24,7 @@ test.describe('Meta sync', () => {
         dbExec = mysqlExec;
         break;
       case 'pg':
-        dbExec = pgExec;
+        dbExec = query => pgExec(query, context);
         break;
     }
   });

From 92dddf057b5b51b3f87b8066859aec2bdafd48db Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 14:27:21 +0800
Subject: [PATCH 49/52] fix(nc-gui): take decimal over number

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index a2c24f8a26..d053da246f 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -145,9 +145,6 @@ export default class CSVTemplateAdapter {
     }
     // handle numeric case
     if (len === 2 && UITypes.Number in detectedColTypes && UITypes.Decimal in detectedColTypes) {
-      if (detectedColTypes[UITypes.Number] > detectedColTypes[UITypes.Decimal]) {
-        return UITypes.Number
-      }
       return UITypes.Decimal
     }
     // if there are multiple detected column types

From 1c31f9fe7ca2900e1d2485299ae3abd9cdb92fe7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 18 Nov 2022 21:49:57 +0530
Subject: [PATCH 50/52] fix: re-render page when navigation error occurred

temporary solution taken from - https://github.com/nuxt/framework/issues/3141

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/app.vue | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/app.vue b/packages/nc-gui/app.vue
index f59b35c76d..99d4577b53 100644
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@@ -6,12 +6,37 @@ const route = useRoute()
 const disableBaseLayout = computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
 
 useTheme()
+
+// TODO: Remove when https://github.com/vuejs/core/issues/5513 fixed
+const key = ref(0)
+
+const messages = [
+  `Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`, // chromium based
+  `NotFoundError: The object can not be found here.`, // safari
+  "Cannot read properties of null (reading 'parentNode')",
+]
+
+if (typeof window !== 'undefined') {
+  // @ts-expect-error using arbitrary window key
+  if (!window.__ncvue) {
+    window.addEventListener('error', (event) => {
+      if (messages.includes(event.message)) {
+        event.preventDefault()
+        console.warn('Re-rendering layout because of https://github.com/vuejs/core/issues/5513')
+        key.value++
+      }
+    })
+  }
+
+  // @ts-expect-error using arbitrary window key
+  window.__ncvue = true
+}
 </script>
 
 <template>
   <a-config-provider>
     <NuxtLayout :name="disableBaseLayout ? false : 'base'">
-      <NuxtPage />
+      <NuxtPage :key="key" />
     </NuxtLayout>
   </a-config-provider>
 </template>

From 3da67d77d58409d55d9f1d2619d8ed20a61af97a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 19 Nov 2022 11:58:00 +0530
Subject: [PATCH 51/52] fix: pass auth token in redoc swagger json request

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../src/lib/meta/api/swagger/redocHtml.ts     | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts b/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
index 024283b72e..b8069a87c7 100644
--- a/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
+++ b/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
@@ -17,8 +17,33 @@ export default `<!DOCTYPE html>
     </style>
 </head>
 <body>
-<redoc spec-url='./swagger.json'></redoc>
-<script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"> </script>
+<div id="redoc"></div>
+<script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"></script>
+<script>
+  let initialLocalStorage = {}
+  
+  try {
+    initialLocalStorage = JSON.parse(localStorage.getItem('nocodb-gui-v2') || '{}');
+  } catch (e) {
+    console.error('Failed to parse local storage', e);
+  }
+
+  const xhttp = new XMLHttpRequest();
+  
+  xhttp.open("GET", "./swagger.json");
+  xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+  xhttp.setRequestHeader("xc-auth", initialLocalStorage && initialLocalStorage.token);
+
+  xhttp.onload = function () {
+      const swaggerJson = this.responseText;
+      const swagger = JSON.parse(swaggerJson);
+      Redoc.init(swagger, {
+        scrollYOffset: 50
+      }, document.getElementById('redoc'))
+  };
+  
+  xhttp.send();
+</script>
 <script>
  console.log('%c🚀 We are Hiring!!! 🚀%c\\n%cJoin the forces http://careers.nocodb.com', 'color:#1348ba;font-size:3rem;padding:20px;', 'display:none', 'font-size:1.5rem;padding:20px')
    const linkEl = document.createElement('a')
@@ -61,4 +86,4 @@ export default `<!DOCTYPE html>
   setTimeout(() => linkEl.classList.add('active'), 2000)
 </script>
 </body>
-</html>`;
+</html>`

From 8d2222431d8694498d59d9464a827274ab8e1a9c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 22 Nov 2022 11:26:41 +0530
Subject: [PATCH 52/52] chore: linting

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts b/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
index b8069a87c7..2730a1f84d 100644
--- a/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
+++ b/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
@@ -86,4 +86,4 @@ export default `<!DOCTYPE html>
   setTimeout(() => linkEl.classList.add('active'), 2000)
 </script>
 </body>
-</html>`
+</html>`;