From a73badb09103cf4212d023991986bccdcab18d36 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Fri, 23 Aug 2024 15:02:09 +0530
Subject: [PATCH] Autofocus first field as settings option (#536)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 app/Http/Requests/UserFormRequest.php         |  1 +
 app/Models/Forms/Form.php                     |  1 +
 .../form-components/FormCustomization.vue     |  5 ++++
 client/composables/forms/initForm.js          |  1 +
 client/pages/forms/[slug]/index.vue           |  2 +-
 ...4_08_22_141621_add_auto_focus_to_forms.php | 27 +++++++++++++++++++
 6 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 database/migrations/2024_08_22_141621_add_auto_focus_to_forms.php

diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index c7ce75d6..8c20eeda 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -62,6 +62,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'confetti_on_submission' => 'boolean',
             'show_progress_bar' => 'boolean',
             'auto_save' => 'boolean',
+            'auto_focus' => 'boolean',
 
             // Properties
             'properties' => 'required|array',
diff --git a/app/Models/Forms/Form.php b/app/Models/Forms/Form.php
index cbd5f34c..49d3c3c1 100644
--- a/app/Models/Forms/Form.php
+++ b/app/Models/Forms/Form.php
@@ -88,6 +88,7 @@ class Form extends Model implements CachableAttributes
         'confetti_on_submission',
         'show_progress_bar',
         'auto_save',
+        'auto_focus',
 
         // Security & Privacy
         'can_be_indexed',
diff --git a/client/components/open/forms/components/form-components/FormCustomization.vue b/client/components/open/forms/components/form-components/FormCustomization.vue
index 0117c535..79045b41 100644
--- a/client/components/open/forms/components/form-components/FormCustomization.vue
+++ b/client/components/open/forms/components/form-components/FormCustomization.vue
@@ -185,6 +185,11 @@
       label="Auto save form response"
       help="Will save data in browser, if user not submit the form then next time will auto prefill last entered data"
     />
+    <ToggleSwitchInput
+      name="auto_focus"
+      :form="form"
+      label="Auto focus first input on page"
+    />
   </editor-options-panel>
 </template>
 
diff --git a/client/composables/forms/initForm.js b/client/composables/forms/initForm.js
index a75ed6cf..6d1f8a7a 100644
--- a/client/composables/forms/initForm.js
+++ b/client/composables/forms/initForm.js
@@ -22,6 +22,7 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
     closed_text:
       "This form has now been closed by its owner and does not accept submissions anymore.",
     auto_save: true,
+    auto_focus: true,
     border_radius: 'small',
     size: 'md',
 
diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index 48b1254b..96da09b7 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -161,7 +161,7 @@ onMounted(() => {
           console.error('Error appending custom code', e)
         }
       }
-      if (!isIframe) focusOnFirstFormElement()
+      if (!isIframe && form.value?.auto_focus) focusOnFirstFormElement()
     }
   }
 })
diff --git a/database/migrations/2024_08_22_141621_add_auto_focus_to_forms.php b/database/migrations/2024_08_22_141621_add_auto_focus_to_forms.php
new file mode 100644
index 00000000..ae9adbb2
--- /dev/null
+++ b/database/migrations/2024_08_22_141621_add_auto_focus_to_forms.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->boolean('auto_focus')->default(true);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('auto_focus');
+        });
+    }
+};