From 48432c40afea233b2bb9ebfdd1b42d52a935d759 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:12 +0000
Subject: [PATCH] fix(nc-gui): invalid queryselector char issue

---
 packages/nc-gui/components/smartsheet/Form.vue | 10 +++++++---
 tests/playwright/pages/Dashboard/Form/index.ts | 10 ++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b9cc44a185..123ac8b385 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -606,9 +606,13 @@ watch([formState, state.value], async () => {
 
 watch(activeRow, (newValue) => {
   if (newValue) {
-    document
-      .querySelector(`.nc-form-field-item-${newValue?.replaceAll(' ', '')}`)
-      ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    const field = document.querySelector(`.nc-form-field-item-${CSS.escape(newValue?.replaceAll(' ', ''))}`)
+
+    if (field) {
+      setTimeout(() => {
+        field?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }, 50)
+    }
   }
 })
 
diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index 0f18392039..bba939f9e7 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -116,7 +116,10 @@ export class FormPage extends BasePage {
       await src.dragTo(dst);
     } else if (mode === 'hideField') {
       // in form-v2, hide field will be using right sidebar
-      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
+      await this.formFields
+        .locator(`[data-testid="nc-form-field-item-${CSS.escape(field)}"]`)
+        .locator('.nc-switch')
+        .click();
     }
   }
 
@@ -132,7 +135,10 @@ export class FormPage extends BasePage {
       await src.dragTo(dst, { trial: true });
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
-      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
+      await this.formFields
+        .locator(`[data-testid="nc-form-field-item-${CSS.escape(field)}"]`)
+        .locator('.nc-switch')
+        .click();
     }
   }