Browse Source

feat(gui-v2): focus input on load

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2730/head
Pranav C 2 years ago
parent
commit
7c0a249477
  1. 8
      packages/nc-gui-v2/pages/projects/index/create-external.vue
  2. 19
      packages/nc-gui-v2/pages/projects/index/create.vue

8
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')
input.setSelectionRange(0, formState.title.length)
input.focus()
const input = form.value?.$el?.querySelector('input')
if (input) {
input.setSelectionRange(0, formState.title.length)
input.focus()
}
})
</script>

19
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">

Loading…
Cancel
Save