From fa3bc175877febfd5f81c542ee9e84994ed6a0d9 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 2 Mar 2024 07:32:42 +0000
Subject: [PATCH] fix(nc-gui): focus form title on mount component

---
 packages/nc-gui/components/general/FormBanner.vue | 6 +++++-
 packages/nc-gui/components/smartsheet/Form.vue    | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/FormBanner.vue b/packages/nc-gui/components/general/FormBanner.vue
index 76cd18e983..8273b612e0 100644
--- a/packages/nc-gui/components/general/FormBanner.vue
+++ b/packages/nc-gui/components/general/FormBanner.vue
@@ -8,7 +8,11 @@ const { getPossibleAttachmentSrc } = useAttachment()
 </script>
 
 <template>
-  <div class="nc-form-banner-wrapper w-full mx-auto rounded-2xl overflow-hidden" :style="{ aspectRatio: 4 / 1 }">
+  <div
+    class="nc-form-banner-wrapper w-full mx-auto rounded-2xl overflow-hidden"
+    :class="!bannerImageUrl ? 'shadow-sm' : ''"
+    :style="{ aspectRatio: 4 / 1 }"
+  >
     <LazyCellAttachmentImage
       v-if="bannerImageUrl"
       :srcs="getPossibleAttachmentSrc(parseProp(bannerImageUrl))"
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b5897b8d8f..466e72e15f 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -43,6 +43,7 @@ import {
   useViewData,
   watch,
 } from '#imports'
+import type { VNodeRef } from '@vue/runtime-core'
 
 provide(IsFormInj, ref(true))
 provide(IsGalleryInj, ref(false))
@@ -174,6 +175,8 @@ const imageCropperData = ref<{
 
 const focusLabel = ref<HTMLTextAreaElement>()
 
+const focusFormTitle: VNodeRef = (el) => el && activeRow.value === NcForm.heading && (el as HTMLTextAreaElement)?.focus()
+
 const searchQuery = ref('')
 
 const { t } = useI18n()
@@ -556,6 +559,8 @@ onMounted(async () => {
   await loadFormView()
   setFormData()
   isLoadingFormView.value = false
+
+  activeRow.value = NcForm.heading
 })
 
 watch(submitted, (v) => {
@@ -909,6 +914,7 @@ useEventListener(
                       <a-form-item v-if="isEditable" class="!my-0">
                         <a-textarea
                           v-model:value="formViewData.heading"
+                          :ref="focusFormTitle"
                           class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
                           :style="{
                             'borderRightWidth': '0px !important',