From 6da271feb9cac6962b69baefaefc81020c954c05 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 17:50:41 +0530
Subject: [PATCH] fix(gui-v2): focus title field on load

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/project/index/[id].vue    | 13 +++++++-----
 .../pages/project/index/create-external.vue   | 13 +++++++-----
 .../nc-gui-v2/pages/project/index/create.vue  | 21 +++++++++++--------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index bc0602bf09..581201b845 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -53,11 +53,14 @@ $state.sidebarOpen.value = false
 // select and focus title field on load
 onMounted(async () => {
   await getProject()
-  const input = form.value?.$el?.querySelector('input')
-  if (input) {
-    input.setSelectionRange(0, formState.title.length)
-    input.focus()
-  }
+  nextTick(() => {
+    // todo: replace setTimeout and follow better approach
+    setTimeout(() => {
+      const input = form.value?.$el?.querySelector('input[type=text]')
+      input.setSelectionRange(0, formState.title.length)
+      input.focus()
+    }, 500)
+  })
 })
 </script>
 
diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 16bfb42c3c..7149e2cb1b 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -203,11 +203,14 @@ watch(
 
 // select and focus title field on load
 onMounted(() => {
-  const input = form.value?.$el?.querySelector('input')
-  if (input) {
-    input.setSelectionRange(0, formState.title.length)
-    input.focus()
-  }
+  nextTick(() => {
+    // todo: replace setTimeout and follow better approach
+    setTimeout(() => {
+      const input = form.value?.$el?.querySelector('input[type=text]')
+      input.setSelectionRange(0, formState.title.length)
+      input.focus()
+    }, 500)
+  })
 })
 </script>
 
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index 7da8c1ace4..f1447d9f02 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { onMounted } from '@vue/runtime-core'
+import { onMounted, onUpdated } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
-import { ref } from 'vue'
+import { nextTick, ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/projectCreateUtils'
@@ -42,15 +42,18 @@ const createProject = async () => {
 const form = ref<typeof Form>()
 
 // hide sidebar
-$state.sidebarOpen.value = false
+// $state.sidebarOpen.value = false
 
 // select and focus title field on load
-onMounted(() => {
-  const input = form.value?.$el?.querySelector('input')
-  if (input) {
-    input.setSelectionRange(0, formState.title.length)
-    input.focus()
-  }
+onMounted(async () => {
+  nextTick(() => {
+    // todo: replace setTimeout and follow better approach
+    setTimeout(() => {
+      const input = form.value?.$el?.querySelector('input[type=text]')
+      input.setSelectionRange(0, formState.title.length)
+      input.focus()
+    }, 500)
+  })
 })
 </script>