feat(gui-v2): focus input on load

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/pages/projects/index/create-external.vue

@@ -202,9 +202,11 @@ watch(
 
 // select and focus title field on load
 onMounted(() => {
-  const input = form.value?.$el.querySelector('input')
+  const input = form.value?.$el?.querySelector('input')
-  input.setSelectionRange(0, formState.title.length)
+  if (input) {
-  input.focus()
+    input.setSelectionRange(0, formState.title.length)
+    input.focus()
+  }
 })
 </script>
 

packages/nc-gui-v2/pages/projects/index/create.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onMounted } from '@vue/runtime-core'
+import type { Form } from 'ant-design-vue'
 import { ref } from 'vue'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -10,7 +11,7 @@ const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 
-const { $api, $toast } = useNuxtApp()
+const { $api, $toast, $state } = useNuxtApp()
 
 const nameValidationRules = [
   {
@@ -38,10 +39,18 @@ const createProject = async () => {
   loading.value = false
 }
 
-const input = ref()
+const form = ref<typeof Form>()
 
+// hide sidebar
+$state.sidebarOpen.value = false
+
+// select and focus title field on load
 onMounted(() => {
-  input.value.input.focus()
+  const input = form.value?.$el?.querySelector('input')
+  if (input) {
+    input.setSelectionRange(0, formState.title.length)
+    input.focus()
+  }
 })
 </script>
 
@@ -49,9 +58,9 @@ onMounted(() => {
   <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
-    <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
-        <a-input ref="input" v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
+        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
       <a-form-item style="text-align: center" class="mt-2">