Autofocus first field as settings option (#536)

Co-authored-by: Julien Nahum <julien@nahum.net>

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',

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',

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>
 

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',
 

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()
     }
   }
 })

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');
+        });
+    }
+};