From db733f3a48943815d1cf75f9dc268dc2d85fa4d8 Mon Sep 17 00:00:00 2001
From: nith2001 <nith2001@uw.edu>
Date: Thu, 27 Apr 2023 11:23:49 -0700
Subject: [PATCH] Placeholder coding attempt

---
 packages/nc-gui/components/smartsheet/Form.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 02ee8353c6..9242787a2c 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -100,6 +100,8 @@ const activeRow = ref('')
 
 const editEnabled = ref<boolean[]>([])
 
+const isHeaderContentSet = ref(false);
+
 const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
@@ -549,17 +551,25 @@ function selectAll(event: KeyboardEvent) {
             <div v-if="isEditable" class="px-4 lg:px-12">
               <a-form-item v-if="isEditable">
                 <div
-                  class="input w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
+                  class="nc-form-heading input w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
                   role="textbox"
                   contenteditable="true"
                   :style="{ borderRightWidth: '0px !important' }"
-                  hide-details
-                  :bordered="false"
                   data-testid="nc-form-heading"
                   @keydown="selectAll"
+                  @focus="isHeaderContentSet = false"
                   @blur="updateView"
                   @keydown.enter.prevent="updateView"
-                >Form Title</div>
+                >
+                  <span
+                    v-if="!isHeaderContentSet"
+                    class="placeholder"
+                    :style="{ color: '#A9A9A9' }"
+                  >
+                    Form Title
+                  </span>
+                  <span v-else>{{  formViewData.heading  }}</span>
+              </div>
               </a-form-item>
             </div>
             <div v-else class="px-4 ml-3 w-full text-bold text-4xl">{{ formViewData.heading }}</div>