From 705bff439ec48edb8370b6e275c5db5d8f7e8ce2 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Thu, 5 Jun 2025 21:08:58 +0530
Subject: [PATCH] Enhance FieldOptions Component with Conditional Placeholder
 Input (#773)

- Added a conditional rendering for a `text-area-input` for placeholder text when the field type is 'text' and supports multiple lines, improving user experience in form customization.
- Updated the existing `text-input` to use `v-else-if` for better logical flow in rendering based on the presence of a placeholder.

These changes aim to enhance the flexibility of the FieldOptions component by providing users with more options for input placeholders.

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 .../open/forms/fields/components/FieldOptions.vue        | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index e71a9d13..bd334c9c 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -501,8 +501,15 @@
       </div>
 
       <!--    Placeholder    -->
+      <text-area-input
+        v-if="hasPlaceholder && field.type === 'text' && field.multi_lines"
+        name="placeholder"
+        class="mt-3"
+        :form="field"
+        label="Empty Input Text (Placeholder)"
+      />
       <text-input
-        v-if="hasPlaceholder"
+        v-else-if="hasPlaceholder"
         name="placeholder"
         class="mt-3"
         :form="field"