From 396c9ef48024bfcaf4ac46ceecb195f08bd1b39c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 20 Jun 2023 18:09:50 +0530
Subject: [PATCH 1/4] fix: decide editable state based on both editEnabled and
 active

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 6c00425d9f..03491ab4e7 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -27,6 +27,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  EditModeInj
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -92,9 +93,13 @@ const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
 
+const isEditable = inject(EditModeInj, ref(false))
+
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
+// use both active or edit mode to determine if edit is allowed
+// since active will be false in case of form view
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || isEditable.value))
 
 const vModel = computed({
   get: () => {
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 9ff6ed341e..6b599e3903 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -23,6 +23,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  EditModeInj
 } from '#imports'
 
 interface Props {
@@ -51,6 +52,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isEditable = inject(EditModeInj, ref(false))
+
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -89,7 +92,9 @@ const isOptionMissing = computed(() => {
 
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
+// use both active or edit mode to determine if edit is allowed
+// since active will be false in case of form view
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || isEditable.value))
 
 const vModel = computed({
   get: () => tempSelectedOptState.value ?? modelValue,

From c269218857fa7da897da6413f03e627760eed569 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 20 Jun 2023 18:21:35 +0530
Subject: [PATCH 2/4] fix: decide active state based on both editEnabled and
 active

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 03491ab4e7..e6f8570d68 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -46,7 +46,13 @@ const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
 
-const active = inject(ActiveCellInj, ref(false))
+const isEditable = inject(EditModeInj, ref(false))
+
+const _active = inject(ActiveCellInj, ref(false))
+
+// use both ActiveCellInj or EditModeInj to determine the active state
+// since active will be false in case of form view
+const active = computed(() => _active.value || isEditable.value)
 
 const isPublic = inject(IsPublicInj, ref(false))
 
@@ -93,13 +99,9 @@ const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
 
-const isEditable = inject(EditModeInj, ref(false))
-
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-// use both active or edit mode to determine if edit is allowed
-// since active will be false in case of form view
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || isEditable.value))
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value))
 
 const vModel = computed({
   get: () => {
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 6b599e3903..1086ba0993 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -40,7 +40,13 @@ const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
 
-const active = inject(ActiveCellInj, ref(false))
+const isEditable = inject(EditModeInj, ref(false))
+
+const _active = inject(ActiveCellInj, ref(false))
+
+// use both ActiveCellInj or EditModeInj to determine the active state
+// since active will be false in case of form view
+const active = computed(() => _active.value || isEditable.value)
 
 const aselect = ref<typeof AntSelect>()
 
@@ -52,8 +58,6 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
-const isEditable = inject(EditModeInj, ref(false))
-
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -92,9 +96,7 @@ const isOptionMissing = computed(() => {
 
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-// use both active or edit mode to determine if edit is allowed
-// since active will be false in case of form view
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || isEditable.value))
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value))
 
 const vModel = computed({
   get: () => tempSelectedOptState.value ?? modelValue,
@@ -255,7 +257,7 @@ const selectedOpt = computed(() => {
 
 <template>
   <div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu">
-    <div v-if="!active">
+    <div v-if="!(active || isEditable) ">
       <a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color">
         <span
           :style="{

From 287588b8258d5df87a16e6bed703b1c6446fbec2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 20 Jun 2023 18:36:26 +0530
Subject: [PATCH 3/4] fix: remove cellClickHook provide since click event
 propagation is blocked

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

diff --git a/packages/nc-gui/components/smartsheet/DivDataCell.vue b/packages/nc-gui/components/smartsheet/DivDataCell.vue
index cc6fd2774c..6c9cfe4693 100644
--- a/packages/nc-gui/components/smartsheet/DivDataCell.vue
+++ b/packages/nc-gui/components/smartsheet/DivDataCell.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
-import { CellClickHookInj, CurrentCellInj, createEventHook, ref } from '#imports'
+import { CurrentCellInj, ref } from '#imports'
 
 const el = ref()
 
-const cellClickHook = createEventHook()
-
-provide(CellClickHookInj, cellClickHook)
-
 provide(CurrentCellInj, el)
 </script>
 
 <template>
-  <div ref="el" class="select-none" @click="cellClickHook.trigger($event)">
+  <div ref="el" class="select-none">
     <slot />
   </div>
 </template>

From 4bd54ac53dff5c3ac512d786da9923957734b892 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 20 Jun 2023 20:00:55 +0530
Subject: [PATCH 4/4] test: shared form single select

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../Dashboard/common/Cell/SelectOptionCell.ts | 28 ++++--
 tests/playwright/tests/db/viewForm.spec.ts    | 95 +++++++++++++++++++
 2 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
index 924060afcc..eb94373ce0 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
@@ -28,13 +28,18 @@ export class SelectOptionCellPageObject extends BasePage {
     const selectCell = this.get({ index, columnHeader });
 
     // check if cell active
-    if (!(await selectCell.getAttribute('class')).includes('active')) {
+    if (
+      !(await selectCell.getAttribute('class')).includes('active') &&
+      (await selectCell.locator('.nc-selected-option').count()) === 0
+    ) {
       await selectCell.click();
     }
 
     await selectCell.click();
 
-    await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
+    if (index === -1)
+      await this.rootPage.getByTestId(`select-option-${columnHeader}-undefined`).getByText(option).click();
+    else await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
 
     if (multiSelect) await this.get({ index, columnHeader }).click();
 
@@ -72,12 +77,12 @@ export class SelectOptionCellPageObject extends BasePage {
   }
 
   async verify({
-    index,
+    index = 0,
     columnHeader,
     option,
     multiSelect,
   }: {
-    index: number;
+    index?: number;
     columnHeader: string;
     option: string;
     multiSelect?: boolean;
@@ -85,7 +90,10 @@ export class SelectOptionCellPageObject extends BasePage {
     if (multiSelect) {
       return await expect(this.cell.get({ index, columnHeader })).toContainText(option, { useInnerText: true });
     }
-    const text = await (await this.cell.get({ index, columnHeader }).locator('.ant-tag')).allInnerTexts();
+
+    const locator = await this.cell.get({ index, columnHeader }).locator('.ant-tag');
+    await locator.waitFor({ state: 'visible' });
+    const text = await locator.allInnerTexts();
     return expect(text).toContain(option);
   }
 
@@ -95,7 +103,15 @@ export class SelectOptionCellPageObject extends BasePage {
     ).toBeHidden();
   }
 
-  async verifyOptions({ index, columnHeader, options }: { index: number; columnHeader: string; options: string[] }) {
+  async verifyOptions({
+    index = 0,
+    columnHeader,
+    options,
+  }: {
+    index?: number;
+    columnHeader: string;
+    options: string[];
+  }) {
     const selectCell = this.get({ index, columnHeader });
 
     // check if cell active
diff --git a/tests/playwright/tests/db/viewForm.spec.ts b/tests/playwright/tests/db/viewForm.spec.ts
index 6245814100..351e7fc0d3 100644
--- a/tests/playwright/tests/db/viewForm.spec.ts
+++ b/tests/playwright/tests/db/viewForm.spec.ts
@@ -364,3 +364,98 @@ test.describe('Form view with LTAR', () => {
     });
   });
 });
+
+test.describe('Form view', () => {
+  let dashboard: DashboardPage;
+  let form: FormPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+    form = dashboard.form;
+  });
+
+  test('Select fields in form view', async () => {
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    const columns = [
+      {
+        column_name: 'Id',
+        title: 'Id',
+        uidt: UITypes.ID,
+      },
+      {
+        column_name: 'SingleSelect',
+        title: 'SingleSelect',
+        uidt: UITypes.SingleSelect,
+        dtxp: "'jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'",
+      },
+      {
+        column_name: 'MultiSelect',
+        title: 'MultiSelect',
+        uidt: UITypes.MultiSelect,
+        dtxp: "'jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'",
+      },
+    ];
+
+    const project = await api.project.read(context.project.id);
+    await api.base.tableCreate(context.project.id, project.bases?.[0].id, {
+      table_name: 'selectBased',
+      title: 'selectBased',
+      columns: columns,
+    });
+
+    await dashboard.rootPage.reload();
+
+    await dashboard.treeView.openTable({ title: 'selectBased' });
+    const url = dashboard.rootPage.url();
+
+    await dashboard.viewSidebar.createFormView({ title: 'NewForm' });
+    await dashboard.form.toolbar.clickShareView();
+    const formLink = await dashboard.form.toolbar.shareView.getShareLink();
+
+    await dashboard.rootPage.goto(formLink);
+
+    const sharedForm = new SharedFormPage(dashboard.rootPage);
+
+    // Click on single select options
+    await sharedForm.cell.selectOption.select({
+      index: -1,
+      columnHeader: 'SingleSelect',
+      option: 'jan',
+      multiSelect: false,
+    });
+
+    // Click on multi select options
+    const multiSelectParams = {
+      index: -1,
+      columnHeader: 'MultiSelect',
+      option: 'jan',
+      multiSelect: true,
+    };
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'jan' });
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'feb' });
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'mar' });
+
+    await sharedForm.submit();
+    await dashboard.rootPage.goto(url);
+    await dashboard.viewSidebar.openView({ title: 'selectBased' });
+
+    await dashboard.grid.cell.selectOption.verify({
+      columnHeader: 'SingleSelect',
+      option: 'jan',
+      multiSelect: false,
+    });
+
+    await dashboard.grid.cell.selectOption.verifyOptions({
+      columnHeader: 'MultiSelect',
+      options: ['jan', 'feb', 'mar'],
+    });
+  });
+});