always focus on error field

Author: pxpm

src/app/View/Components/Dataform.php

@@ -17,6 +17,7 @@ class Dataform extends Component
      * @param  string  $operation  The operation to use (create, update, etc.)
      * @param  string|null  $action  Custom form action URL
      * @param  string  $method  Form method (post, put, etc.)
+     * @param  bool  $focusOnFirstField  Whether to focus on the first field when form loads
      */
     public function __construct(
         public string $controller,

src/resources/views/crud/form_content.blade.php

@@ -234,6 +234,9 @@ function preventUnload(event) {
 
         // Only display errors if this is the form that was submitted
         if (submittedFormId && submittedFormId === currentFormId) {
+          var firstErrorField = null;
+          var firstErrorTab = null;
+          
           $.each(errors, function(bag, errorMessages){
             $.each(errorMessages, function (inputName, messages) {
               var normalizedProperty = inputName.split('.').map(function(item, index){
@@ -246,6 +249,17 @@ function preventUnload(event) {
                           $('#' + currentFormId + ' [name="' + normalizedProperty + '"]'),
                           container = field.closest('.form-group');
 
+              // Store the first error field for focusing
+              if (firstErrorField === null && field.length > 0) {
+                firstErrorField = field.first();
+                @if ($crud->tabsEnabled())
+                var tab_container = $(container).closest('[role="tabpanel"]');
+                if (tab_container.length) {
+                  firstErrorTab = tab_container.attr('id');
+                }
+                @endif
+              }
+
               // iterate the inputs to add invalid classes to fields and red text to the field container.
               container.find('input, textarea, select').each(function() {
                   let containerField = $(this);
@@ -278,6 +292,28 @@ function preventUnload(event) {
               });
             });
           });
+
+          // Focus on the first error field
+          if (firstErrorField !== null) {
+            @if ($crud->tabsEnabled())
+            // Switch to the tab containing the first error if needed
+            if (firstErrorTab) {
+              $('.nav a[href="#' + firstErrorTab + '"]').tab('show');
+            }
+            @endif
+            
+            // Focus on the first error field
+            setTimeout(function() {
+              const fieldOffset = firstErrorField.offset().top;
+              const scrollTolerance = $(window).height() / 2;
+              
+              triggerFocusOnFirstInputField(firstErrorField);
+              
+              if (fieldOffset > scrollTolerance) {
+                $('html, body').animate({scrollTop: (fieldOffset - 30)});
+              }
+            }, 100);
+          }
         }
       @endif