From 73225949aa4c9d300e8f88bc1ebccc81ce5dea49 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Thu, 4 Sep 2025 16:14:42 +0100
Subject: [PATCH 01/24] wip

---
 src/app/View/Components/DataFormModal.php     |  63 +++
 src/app/View/Components/Dataform.php          |   1 -
 .../components/dataform/modal-form.blade.php  | 364 ++++++++++++++++++
 .../views/crud/fields/summernote.blade.php    |   4 +
 .../views/crud/form_content.blade.php         |  20 +-
 .../views/crud/inc/show_fields.blade.php      |   5 +-
 6 files changed, 446 insertions(+), 11 deletions(-)
 create mode 100644 src/app/View/Components/DataFormModal.php
 create mode 100644 src/resources/views/crud/components/dataform/modal-form.blade.php

diff --git a/src/app/View/Components/DataFormModal.php b/src/app/View/Components/DataFormModal.php
new file mode 100644
index 0000000000..a66031edca
--- /dev/null
+++ b/src/app/View/Components/DataFormModal.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Backpack\CRUD\app\View\Components;
+use Closure;
+
+class FormModal extends DataForm
+{
+    /**
+     * Create a new component instance.
+     *
+     * @param  string  $controller  The CRUD controller class name
+     * @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 $hasUploadFields  Whether the form has upload fields
+     * @param  mixed|null  $entry  The model instance for update operations
+     * @param  Closure|null  $setup  A closure to customize the CRUD panel
+     * @param  string  $formRouteOperation  The operation to use for the form route (defaults to 'create')
+     * @param  string  $id  The ID for the form element (defaults to 'backpack-form')
+     * @param  bool  $focusOnFirstField  Whether to focus on the first field when form loads
+     * @param  string  $title  The title of the modal
+     * @param  string  $classes  CSS classes for the modal dialog
+     * @param  bool  $refreshDatatable  Whether to refresh the datatable after form submission
+     */
+    public function __construct(
+        public string $controller,
+        public string $id = 'backpack-form',
+        public string $operation = 'create',
+        public string $formRouteOperation = 'create',
+        public ?string $action = null,
+        public string $method = 'post',
+        public bool $hasUploadFields = false,
+        public $entry = null,
+        public ?Closure $setup = null,
+        public bool $focusOnFirstField = false,
+        public string $title = 'Form',
+        public string $classes = 'modal-dialog modal-lg',
+        public bool $refreshDatatable = false,
+    ) {
+        parent::__construct($controller, $id, $operation, $action, $method);
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('crud::components.dataform.modal-form', [
+            'crud' => $this->crud,
+            'id' => $this->id,
+            'operation' => $this->operation,
+            'formRouteOperation' => $this->formRouteOperation,
+            'hasUploadFields' => $this->hasUploadFields,
+            'refreshDatatable' => $this->refreshDatatable,
+            'action' => $this->action,
+            'method' => $this->method,
+            'title' => $this->title,
+            'classes' => $this->classes,
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index 42479f1bb8..62cae01c9a 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -30,7 +30,6 @@ public function __construct(
         public $entry = null,
         public ?Closure $setup = null,
         public bool $focusOnFirstField = false,
-
     ) {
         // Get CRUD panel instance from the controller
         CrudManager::setActiveController($controller);
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
new file mode 100644
index 0000000000..dd7fa1aa92
--- /dev/null
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -0,0 +1,364 @@
+    {{-- Modal HTML (initially hidden from DOM) --}}
+    @php
+        if(isset($formRouteOperation)) {
+            if(!\Str::isUrl($formRouteOperation)) {
+                $formRouteOperation = url($crud->route . '/' . $formRouteOperation);
+            }
+        }
+    @endphp
+@push('after_scripts') @if (request()->ajax()) @endpush @endif
+    <div class="d-none" id="modalTemplate{{ md5($controller.$id) }}">
+        <div class="modal fade" id="{{$id}}" tabindex="-1" role="dialog" data-bs-backdrop="static" data-backdrop="static" aria-labelledby="formModalLabel{{ md5($controller.$id) }}" aria-hidden="true">
+            <div class="{{$classes}}" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="formModalLabel{{ md5($controller.$id) }}">{{ $title }}</h5>
+                        <button type="button" class="btn-close close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"></button>
+                   </div>
+                    <div class="modal-body bg-light">
+                        <div id="modal-form-errors{{ md5($controller.$id) }}" class="alert alert-danger d-none">
+                            <ul id="modal-form-errors-list{{ md5($controller.$id) }}"></ul>
+                        </div>
+                        <div 
+                            id="modal-form-container{{ md5($controller.$id) }}" 
+                            data-form-load-route="{{ $formRouteOperation }}"
+                            data-form-action="{{ $action }}"
+                            data-form-method="{{ $method }}"
+                            data-has-upload-fields="{{ $hasUploadFields ? 'true' : 'false' }}"
+                            data-refresh-datatable="{{ $refreshDatatable ? 'true' : 'false' }}"
+                            >
+                            <div class="text-center">
+                                <i class="fa fa-spinner fa-spin fa-2x"></i>
+                                <p>Loading form...</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal" data-bs-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary" id="submitForm{{ md5($controller.$id) }}">Save</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@if (!request()->ajax()) @endpush @endif
+@push('after_scripts') @if (request()->ajax()) @endpush @endif
+<script>
+    !(function() {
+    // Initialize modals immediately when the script runs
+    initializeAllModals();
+    // Also listen for DataTable draw events which might add new modals
+    document.addEventListener('draw.dt', initializeAllModals);
+})();
+    function initializeAllModals() {
+    // First, track all initialized modals by their unique ID to avoid duplicates
+    const initializedModals = new Set();
+    
+    document.querySelectorAll('[id^="modalTemplate"]').forEach(modalTemplate => {
+        // Extract controller hash from the ID
+        const controllerId = modalTemplate.id.replace('modalTemplate', '');
+        const modalEl = modalTemplate.querySelector('.modal');
+        if(!modalEl) {
+            console.warn(`No modal found in template with ID ${modalTemplate.id}`);
+            return;
+        }
+        
+        const modalId = modalEl.id;
+        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+        
+        // Create a unique key for this modal
+        const modalKey = `${controllerId}-${modalId}`;
+        
+        // Skip if we've already processed an identical modal in this batch
+        if (initializedModals.has(modalKey)) {
+            modalTemplate.remove(); // Remove duplicate
+            return;
+        }
+        
+        initializedModals.add(modalKey);
+        
+        // Get other elements
+        const formContainer = document.getElementById(`modal-form-container${controllerId}`);
+        const submitButton = document.getElementById(`submitForm${controllerId}`);
+        if (!formContainer || !submitButton) {
+            console.warn(`Missing form elements for controller ID ${controllerId}`);
+            return;
+        }
+        
+        // Make modal template visible (but modal stays hidden until triggered)
+        modalTemplate.classList.remove('d-none');
+        
+        // Only set up the event handlers if they don't exist yet
+        if (!modalEl._loadHandler) {
+            modalEl._loadHandler = function() {
+                loadModalForm(controllerId, modalEl, formContainer, submitButton, scrollPosition);
+            };
+            modalEl.addEventListener('shown.bs.modal', modalEl._loadHandler);
+        }
+        
+        if (!submitButton._saveHandler) {
+            submitButton._saveHandler = function() {
+                submitModalForm(controllerId, formContainer, submitButton, modalEl);
+            };
+            submitButton.addEventListener('click', submitButton._saveHandler);
+        }
+        
+        // Mark as initialized
+        modalTemplate.setAttribute('data-initialized', 'true');
+        
+        // Initialize Bootstrap modal if it hasn't been initialized yet
+        if (typeof bootstrap !== 'undefined' && !bootstrap.Modal.getInstance(modalEl)) {
+            new bootstrap.Modal(modalEl);
+        }
+    });
+}
+    
+// Load form contents via AJAX
+function loadModalForm(controllerId, modalEl, formContainer, submitButton, scrollPosition) {
+    submitButton.disabled = true;
+    window.scrollTo(0, scrollPosition);
+    
+    if (formContainer && !formContainer.dataset.loaded) {
+        // Build URL from current path
+        const formUrl = formContainer.dataset.formLoadRoute || modalEl.dataset.formLoadRoute || '';
+
+        fetch(formUrl, {
+            method: 'GET',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+        .then(response => response.text())
+        .then(html => {
+            if (!html) {
+                console.error(`No HTML content returned for controller ID ${controllerId}`);
+                return;
+            }
+
+            // add the enctype to the form if it has upload fields
+            if (formContainer.dataset.hasUploadFields === 'true') {
+                html = html.replace(/<form /, '<form enctype="multipart/form-data" ');
+            }
+
+            // Replace form action in the HTML
+            const formAction = formContainer.dataset.formAction || '';
+            html = html.replace(/<form(\s+[^>]*?)(?:action="[^"]*")?([^>]*?)>/, (match, before, after) => {
+                return `<form${before} action="${formAction}"${after}>`;
+            });
+
+            formContainer.innerHTML = html;
+            formContainer.dataset.loaded = 'true';
+            
+            // Handle any scripts that came with the response
+            const scriptElements = formContainer.querySelectorAll('script');
+            const scriptsToLoad = [];
+
+            scriptElements.forEach(scriptElement => {
+                if (scriptElement.src) {
+                    // For external scripts with src attribute
+                    const srcUrl = scriptElement.src;
+                    
+                    // Only load the script if it's not already loaded
+                    if (!document.querySelector(`script[src="${srcUrl}"]`)) {
+                        scriptsToLoad.push(new Promise((resolve, reject) => {
+                            const newScript = document.createElement('script');
+                            
+                            // Copy all attributes from the original script
+                            Array.from(scriptElement.attributes).forEach(attr => {
+                                newScript.setAttribute(attr.name, attr.value);
+                            });
+                            
+                            // Set up load and error handlers
+                            newScript.onload = resolve;
+                            newScript.onerror = reject;
+                            
+                            // Append to document to start loading
+                            document.head.appendChild(newScript);
+                        }));
+                    }
+                    
+                    // Remove the original script tag
+                    scriptElement.parentNode.removeChild(scriptElement);
+                } else {
+                    // For inline scripts
+                    const newScript = document.createElement('script');
+                    
+                    // Copy all attributes from the original script
+                    Array.from(scriptElement.attributes).forEach(attr => {
+                        newScript.setAttribute(attr.name, attr.value);
+                    });
+                    
+                    // Copy the content
+                    newScript.textContent = scriptElement.textContent;
+
+                    try {
+                        document.head.appendChild(newScript);
+                    }catch (e) {
+                        console.warn('Error appending inline script:', e);
+                    }
+                }
+            });
+    
+        // Wait for all external scripts to load before continuing
+        Promise.all(scriptsToLoad)
+            .then(() => {
+                // Initialize the form fields after all scripts are loaded
+                if (typeof initializeFieldsWithJavascript === 'function') {
+                    try {
+                        initializeFieldsWithJavascript(modalEl);
+                    } catch (e) {
+                        console.error('Error initializing form fields:', e);
+                    }
+                } 
+                submitButton.disabled = false;
+            })
+            .catch(error => {
+                submitButton.disabled = false;
+            });
+        
+        });
+    }else{
+        submitButton.disabled = false;
+    }
+}
+
+// Handle form submission
+function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
+    const form = formContainer.querySelector('form');
+    if (!form) {
+        console.error('Form not found in modal');
+        return; 
+    }
+    
+    const errorsContainer = document.getElementById(`modal-form-errors${controllerId}`);
+    const errorsList = document.getElementById(`modal-form-errors-list${controllerId}`);
+
+    // Clear previous errors
+    errorsContainer.classList.add('d-none');
+    errorsList.innerHTML = '';
+    form.querySelectorAll('.invalid-feedback').forEach(el => el.remove());
+    form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
+    
+    submitButton.disabled = true;
+
+    const formData = new FormData(form);
+    // change the form data _method to the one defined in the container
+    if (formContainer.dataset.formMethod) {
+        formData.set('_method', formContainer.dataset.formMethod);
+    }
+
+    // Submit form via AJAX
+    fetch(form.action, {
+        method: 'POST',
+        body: formData,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'Accept': 'application/json',
+        }
+    })
+    .then(response => {
+        if (response.headers.get('content-type') && response.headers.get('content-type').includes('application/json')) {
+            return response.json().then(data => ({ ok: response.ok, data, status: response.status }));
+        }
+        return response.text().then(text => ({ ok: response.ok, data: text, status: response.status }));
+    })
+    .then(result => {
+        if (result.ok) {
+            // Success
+            new Noty({
+                type: 'success',
+                text: 'Entry saved successfully!',
+                timeout: 3000
+            }).show();
+            
+            // Try to close the modal
+            try {
+                const bsModal = bootstrap.Modal.getInstance(modalEl);
+                if (bsModal) {
+                    bsModal.hide();
+                }
+            } catch (e) {
+                console.warn('Could not close modal automatically:', e);
+            }
+            
+            // Notify listeners with a specific event for this modal
+            document.dispatchEvent(new CustomEvent(`FormModalSaved_${controllerId}`, {
+                detail: { controllerId: controllerId, response: result.data }
+            }));
+            
+            // Also dispatch the general event for backward compatibility
+            document.dispatchEvent(new CustomEvent('FormModalSaved', {
+                detail: { controllerId: controllerId, response: result.data }
+            }));
+
+            // Reload the datatable if developer asked for it
+            if(formContainer.dataset.refreshDatatable === 'true') {
+                setTimeout(function() {
+                    try {
+                        // Find closest DataTable
+                        const triggerButton = document.querySelector(`[data-target="#${modalEl.id}"]`);
+                        const closestTable = triggerButton ? triggerButton.closest('.dataTable') : null;    
+                        if (closestTable && closestTable.id) {
+                            // Access the DataTable instance using the DataTables API
+                            const dataTable = window.DataTable.tables({ visible: true, api: true }).filter(
+                                table => table.getAttribute('id') === closestTable.id
+                            );
+                            if (dataTable) {
+                                dataTable.ajax.reload();
+                            }
+                        }
+                    } catch (e) {
+                        try {
+                            // Fallback approach if first method fails
+                            if (typeof table !== 'undefined') {
+                                table.draw(false);
+                            }
+                        } catch (e2) { }
+                    }
+                }, 100);
+            }    
+            } else if (result.status === 422) {
+            // Validation errors
+            errorsContainer.classList.remove('d-none');
+            
+            for (const field in result.data.errors) {
+                result.data.errors[field].forEach(message => {
+                    const li = document.createElement('li');
+                    li.textContent = message;
+                    errorsList.appendChild(li);
+                });
+                
+                const inputField = form.querySelector(`[name="${field}"]`);
+                if (inputField) {
+                    inputField.classList.add('is-invalid');
+                    
+                    const formGroup = inputField.closest('.form-group');
+                    if (formGroup) {
+                        result.data.errors[field].forEach(message => {
+                            const feedback = document.createElement('div');
+                            feedback.className = 'invalid-feedback d-block';
+                            feedback.textContent = message;
+                            formGroup.appendChild(feedback);
+                        });
+                    }
+                }
+            }
+        } else {
+            errorsContainer.classList.remove('d-none');
+            const li = document.createElement('li');
+            li.textContent = 'An error occurred while saving the form.';
+            errorsList.appendChild(li);
+        }
+        submitButton.disabled = false;
+    })
+    .catch(error => {
+        console.error('Form submission error:', error);
+        errorsContainer.classList.remove('d-none');
+        const li = document.createElement('li');
+        li.textContent = 'A network error occurred.';
+        errorsList.appendChild(li);
+        submitButton.disabled = false;
+    });
+}
+    </script>
+@if (!request()->ajax()) @endpush @endif
\ No newline at end of file
diff --git a/src/resources/views/crud/fields/summernote.blade.php b/src/resources/views/crud/fields/summernote.blade.php
index 4a8e08d4b8..8f53f8a468 100644
--- a/src/resources/views/crud/fields/summernote.blade.php
+++ b/src/resources/views/crud/fields/summernote.blade.php
@@ -41,6 +41,10 @@
         .note-editor.note-frame .note-status-output, .note-editor.note-airframe .note-status-output {
                 height: auto;
         }
+
+        .note-modal {
+            z-index: 1060 !important; /* Higher than Bootstrap's default modal z-index */
+        }
     </style>
     @endBassetBlock
 @endpush
diff --git a/src/resources/views/crud/form_content.blade.php b/src/resources/views/crud/form_content.blade.php
index 54c1e81eb2..0a173df67e 100644
--- a/src/resources/views/crud/form_content.blade.php
+++ b/src/resources/views/crud/form_content.blade.php
@@ -1,4 +1,4 @@
-<input type="hidden" name="_http_referrer" value={{ session('referrer_url_override') ?? old('_http_referrer') ?? \URL::previous() ?? url($crud->route) }}>
+<input type="hidden" name="_http_referrer" value="{{ session('referrer_url_override') ?? old('_http_referrer') ?? \URL::previous() ?? url($crud->route) }}">
 <input type="hidden" name="_form_id" value="{{ $id ?? 'crudForm' }}">
 
 {{-- See if we're using tabs --}}
@@ -100,8 +100,9 @@ function handleFocusOnSelect2Field(firstField){
 
     jQuery('document').ready(function($){
 
-      // trigger the javascript for all fields that have their js defined in a separate method
-      initializeFieldsWithJavascript('form');
+      @if(! isset($initFields) || $initFields !== false)
+        initializeFieldsWithJavascript('form');
+      @endif
 
       // Retrieves the current form data
       function getFormData() {
@@ -215,14 +216,15 @@ function preventUnload(event) {
         @else
             focusField = getFirstFocusableField($('form'));
         @endif
+        if(focusField.length !== 0) {
+          const fieldOffset = focusField.offset().top;
+          const scrollTolerance = $(window).height() / 2;
 
-        const fieldOffset = focusField.offset().top;
-        const scrollTolerance = $(window).height() / 2;
-
-        triggerFocusOnFirstInputField(focusField);
+          triggerFocusOnFirstInputField(focusField);
 
-        if( fieldOffset > scrollTolerance ){
-            $('html, body').animate({scrollTop: (fieldOffset - 30)});
+          if( fieldOffset > scrollTolerance ){
+              $('html, body').animate({scrollTop: (fieldOffset - 30)});
+          }
         }
       @endif
 
diff --git a/src/resources/views/crud/inc/show_fields.blade.php b/src/resources/views/crud/inc/show_fields.blade.php
index 74a05da7b9..0557f5ce74 100644
--- a/src/resources/views/crud/inc/show_fields.blade.php
+++ b/src/resources/views/crud/inc/show_fields.blade.php
@@ -1,5 +1,8 @@
 {{-- Show the inputs --}}
 @foreach ($fields as $field)
-    @include($crud->getFirstFieldView($field['type'], $field['view_namespace'] ?? false), $field)
+    @include($crud->getFirstFieldView($field['type'], $field['view_namespace'] ?? false), [
+        'field' => $field,
+        'inlineCreate' => $inlineCreate ?? false,
+    ])
 @endforeach
 

From 4a8fda0a3e2c09ef0cc9c0474327a4a29348e1f8 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Thu, 4 Sep 2025 15:15:01 +0000
Subject: [PATCH 02/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/app/View/Components/DataFormModal.php | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/View/Components/DataFormModal.php b/src/app/View/Components/DataFormModal.php
index a66031edca..5e6e8aea70 100644
--- a/src/app/View/Components/DataFormModal.php
+++ b/src/app/View/Components/DataFormModal.php
@@ -1,6 +1,7 @@
 <?php
 
 namespace Backpack\CRUD\app\View\Components;
+
 use Closure;
 
 class FormModal extends DataForm
@@ -12,7 +13,7 @@ class FormModal extends DataForm
      * @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 $hasUploadFields  Whether the form has upload fields
+     * @param  bool  $hasUploadFields  Whether the form has upload fields
      * @param  mixed|null  $entry  The model instance for update operations
      * @param  Closure|null  $setup  A closure to customize the CRUD panel
      * @param  string  $formRouteOperation  The operation to use for the form route (defaults to 'create')
@@ -60,4 +61,4 @@ public function render()
             'classes' => $this->classes,
         ]);
     }
-}
\ No newline at end of file
+}

From 642c1204bc8c723b71173d005eee458a2749b470 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Thu, 4 Sep 2025 16:26:35 +0100
Subject: [PATCH 03/24] wip

---
 .../dataform/ajax_response.blade.php          | 24 +++++++++++++++++++
 .../datatable/datatable_logic.blade.php       |  6 +++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/resources/views/crud/components/dataform/ajax_response.blade.php

diff --git a/src/resources/views/crud/components/dataform/ajax_response.blade.php b/src/resources/views/crud/components/dataform/ajax_response.blade.php
new file mode 100644
index 0000000000..9a18e2fedc
--- /dev/null
+++ b/src/resources/views/crud/components/dataform/ajax_response.blade.php
@@ -0,0 +1,24 @@
+@php
+\Alert::flush();
+@endphp 
+ <form method="post"
+        action="#"
+>
+{!! csrf_field() !!}
+@include('crud::form_content', ['fields' => $crud->fields(), 'action' => 'edit', 'inlineCreate' => true, 'initFields' => false])
+<div class="d-none" id="parentLoadedAssets">{{ json_encode(Basset::loaded()) }}</div>
+ </form>
+
+
+@foreach (app('widgets')->toArray() as $currentWidget)
+@php
+    $currentWidget = \Backpack\CRUD\app\Library\Widget::add($currentWidget);
+@endphp
+    @if($currentWidget->getAttribute('inline'))
+        @include($currentWidget->getFinalViewPath(), ['widget' => $currentWidget->toArray()])
+    @endif
+@endforeach
+
+
+@stack('after_styles')
+@stack('after_scripts')
\ No newline at end of file
diff --git a/src/resources/views/crud/components/datatable/datatable_logic.blade.php b/src/resources/views/crud/components/datatable/datatable_logic.blade.php
index ca64d1def6..0a7862a16f 100644
--- a/src/resources/views/crud/components/datatable/datatable_logic.blade.php
+++ b/src/resources/views/crud/components/datatable/datatable_logic.blade.php
@@ -613,6 +613,12 @@ function setupTableEvents(tableId, config) {
 
     // on DataTable draw event run all functions in the queue
     $(`#${tableId}`).on('draw.dt', function() {
+        
+        document.getElementById(tableId).querySelectorAll('[id^="modalTemplate"]').forEach(function(modal) {
+            const newModal = modal.cloneNode(true);
+            document.body.appendChild(newModal);
+            modal.remove();
+        });
         // in datatables 2.0.3 the implementation was changed to use `replaceChildren`, for that reason scripts 
         // that came with the response are no longer executed, like the delete button script or any other ajax 
         // button created by the developer. For that reason, we move them to the end of the body

From 52b042a3f9f0a1f6db6a941fb51a22d086fa927a Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Mon, 8 Sep 2025 12:47:50 +0100
Subject: [PATCH 04/24] wip

---
 .../Controllers/Operations/CreateOperation.php     |  4 +++-
 .../Controllers/Operations/UpdateOperation.php     |  5 ++++-
 src/app/View/Components/DataFormModal.php          |  5 +++--
 src/resources/assets/css/common.css                |  5 ++++-
 .../crud/components/dataform/modal-form.blade.php  | 14 +++++++-------
 5 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/app/Http/Controllers/Operations/CreateOperation.php b/src/app/Http/Controllers/Operations/CreateOperation.php
index e6282ff68f..06cbc3108e 100644
--- a/src/app/Http/Controllers/Operations/CreateOperation.php
+++ b/src/app/Http/Controllers/Operations/CreateOperation.php
@@ -60,7 +60,9 @@ public function create()
         $this->data['title'] = $this->crud->getTitle() ?? trans('backpack::crud.add').' '.$this->crud->entity_name;
 
         // load the view from /resources/views/vendor/backpack/crud/ if it exists, otherwise load the one in the package
-        return view($this->crud->getCreateView(), $this->data);
+        return  request()->ajax() ?
+            view('crud::components.dataform.ajax_response', $this->data) :
+            view($this->crud->getCreateView(), $this->data);
     }
 
     /**
diff --git a/src/app/Http/Controllers/Operations/UpdateOperation.php b/src/app/Http/Controllers/Operations/UpdateOperation.php
index f0c656092c..1b17d48578 100644
--- a/src/app/Http/Controllers/Operations/UpdateOperation.php
+++ b/src/app/Http/Controllers/Operations/UpdateOperation.php
@@ -82,9 +82,12 @@ public function edit($id)
         $this->data['id'] = $id;
 
         // load the view from /resources/views/vendor/backpack/crud/ if it exists, otherwise load the one in the package
-        return view($this->crud->getEditView(), $this->data);
+       return  request()->ajax() ?
+            view('crud::components.dataform.ajax_response', $this->data) :
+            view($this->crud->getEditView(), $this->data);
     }
 
+
     /**
      * Update the specified resource in the database.
      *
diff --git a/src/app/View/Components/DataFormModal.php b/src/app/View/Components/DataFormModal.php
index 5e6e8aea70..98d2872591 100644
--- a/src/app/View/Components/DataFormModal.php
+++ b/src/app/View/Components/DataFormModal.php
@@ -4,7 +4,7 @@
 
 use Closure;
 
-class FormModal extends DataForm
+class DataformModal extends DataForm
 {
     /**
      * Create a new component instance.
@@ -27,6 +27,7 @@ public function __construct(
         public string $controller,
         public string $id = 'backpack-form',
         public string $operation = 'create',
+        public string $name = '',
         public string $formRouteOperation = 'create',
         public ?string $action = null,
         public string $method = 'post',
@@ -38,7 +39,7 @@ public function __construct(
         public string $classes = 'modal-dialog modal-lg',
         public bool $refreshDatatable = false,
     ) {
-        parent::__construct($controller, $id, $operation, $action, $method);
+        parent::__construct($controller, $id, $name, $operation, $action, $method, $hasUploadFields, $entry, $setup, $focusOnFirstField);
     }
 
     /**
diff --git a/src/resources/assets/css/common.css b/src/resources/assets/css/common.css
index 4c6a13ac23..d73e2ef735 100644
--- a/src/resources/assets/css/common.css
+++ b/src/resources/assets/css/common.css
@@ -2,6 +2,7 @@
     --table-row-hover: #f2f1ff;
     --select2-selected-item-background: #7c69ef;
     --select2-selected-item-color: #fff;
+    --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
 }
 
 .sidebar .nav-dropdown-items .nav-dropdown {
@@ -254,7 +255,9 @@ div[id$="_wrapper"] .dt-processing {
 .modal .details-control {
     display: none;
 }
-
+.modal .btn-close, .modal .close {
+    background: transparent var(--btn-close-bg) center / .75rem auto no-repeat;
+}
 .dtr-bs-modal .modal-body {
     padding: 0;
 }
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index dd7fa1aa92..f17378657f 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -1,11 +1,11 @@
-    {{-- Modal HTML (initially hidden from DOM) --}}
-    @php
-        if(isset($formRouteOperation)) {
-            if(!\Str::isUrl($formRouteOperation)) {
-                $formRouteOperation = url($crud->route . '/' . $formRouteOperation);
-            }
+{{-- Modal HTML (initially hidden from DOM) --}}
+@php
+    if(isset($formRouteOperation)) {
+        if(!\Str::isUrl($formRouteOperation)) {
+            $formRouteOperation = url($crud->route . '/' . $formRouteOperation);
         }
-    @endphp
+    }
+@endphp
 @push('after_scripts') @if (request()->ajax()) @endpush @endif
     <div class="d-none" id="modalTemplate{{ md5($controller.$id) }}">
         <div class="modal fade" id="{{$id}}" tabindex="-1" role="dialog" data-bs-backdrop="static" data-backdrop="static" aria-labelledby="formModalLabel{{ md5($controller.$id) }}" aria-hidden="true">

From 18ec4c8a7aebbc7c4aa8629f59c6be6ee4db87c6 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Mon, 8 Sep 2025 11:48:09 +0000
Subject: [PATCH 05/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/app/Http/Controllers/Operations/UpdateOperation.php | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/Http/Controllers/Operations/UpdateOperation.php b/src/app/Http/Controllers/Operations/UpdateOperation.php
index 1b17d48578..8727e4205e 100644
--- a/src/app/Http/Controllers/Operations/UpdateOperation.php
+++ b/src/app/Http/Controllers/Operations/UpdateOperation.php
@@ -82,12 +82,11 @@ public function edit($id)
         $this->data['id'] = $id;
 
         // load the view from /resources/views/vendor/backpack/crud/ if it exists, otherwise load the one in the package
-       return  request()->ajax() ?
-            view('crud::components.dataform.ajax_response', $this->data) :
-            view($this->crud->getEditView(), $this->data);
+        return  request()->ajax() ?
+             view('crud::components.dataform.ajax_response', $this->data) :
+             view($this->crud->getEditView(), $this->data);
     }
 
-
     /**
      * Update the specified resource in the database.
      *

From 9a6d8fe1a9d2a6df2dd21d8dad438d9aae6e873f Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 16 Sep 2025 11:25:20 +0100
Subject: [PATCH 06/24] wip

---
 src/CrudPanelManager.php                      | 157 +++++++++++++++-
 src/app/Library/CrudPanel/Traits/Search.php   |  18 +-
 src/app/View/Components/Dataform.php          |   2 +
 .../dataform/ajax_response.blade.php          |   1 +
 .../crud/components/dataform/form.blade.php   |   1 -
 .../components/dataform/modal-form.blade.php  | 167 ++++++++++++++---
 .../datatable/datatable_logic.blade.php       | 176 +++++++++++++-----
 .../crud/inc/form_fields_script.blade.php     |   2 +-
 8 files changed, 436 insertions(+), 88 deletions(-)

diff --git a/src/CrudPanelManager.php b/src/CrudPanelManager.php
index 86ca718d10..ba5d6e61dc 100644
--- a/src/CrudPanelManager.php
+++ b/src/CrudPanelManager.php
@@ -66,14 +66,36 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
 
         // Use provided operation or default to 'list'
         $operation = $operation ?? 'list';
-        $crud->setOperation($operation);
-
+        
+        $shouldIsolate = $this->shouldIsolateOperation($controller::class, $operation);
+        
         $primaryControllerRequest = $this->cruds[array_key_first($this->cruds)]->getRequest();
+        
+        // Check if we need to initialize this specific operation
         if (! $crud->isInitialized() || ! $this->isOperationInitialized($controller::class, $operation)) {
             self::setActiveController($controller::class);
-            $crud->initialized = false;
-            self::setActiveController($controller::class);
-            $controller->initializeCrudPanel($primaryControllerRequest, $crud);
+            
+            // If the panel isn't initialized at all, do full initialization
+            if (! $crud->isInitialized()) {
+                // Set the operation for full initialization
+                $crud->setOperation($operation);
+                $crud->initialized = false;
+                $controller->initializeCrudPanel($primaryControllerRequest, $crud);
+            } else {
+                // Panel is initialized, just setup this specific operation
+                // Use operation isolation for non-primary operations
+                if ($shouldIsolate) {
+                    $this->setupIsolatedOperation($controller, $operation, $crud);
+                } else {
+                    // Set the operation for standard setup
+                    $crud->setOperation($operation);
+                    $this->setupSpecificOperation($controller, $operation, $crud);
+                }
+            }
+            
+            // Mark this operation as initialized
+            $this->storeInitializedOperation($controller::class, $operation);
+            
             self::unsetActiveController();
             $crud = $this->cruds[$controller::class];
 
@@ -83,6 +105,131 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
         return $this->cruds[$controller::class];
     }
 
+    /**
+     * Determine if an operation should be isolated to prevent state interference.
+     * 
+     * @param string $controller
+     * @param string $operation
+     * @return bool
+     */
+    private function shouldIsolateOperation(string $controller, string $operation): bool
+    {
+        $currentCrud = $this->cruds[$controller] ?? null;
+        if (!$currentCrud) {
+            return false;
+        }
+        
+        $currentOperation = $currentCrud->getOperation();
+        
+        // Always isolate when switching between different operations
+        // This prevents any operation from interfering with another operation's state
+        if ($currentOperation && $currentOperation !== $operation) {
+            return true;
+        }
+        
+        return false;
+    }
+
+    /**
+     * Setup an operation in isolation without affecting the main CRUD panel state.
+     * This creates a temporary context for operation setup without state interference.
+     *
+     * @param  object  $controller  The controller instance
+     * @param  string  $operation  The operation to setup
+     * @param  CrudPanel  $crud  The CRUD panel instance
+     */
+    private function setupIsolatedOperation($controller, string $operation, CrudPanel $crud): void
+    {
+        // Store the complete current state with detailed logging
+        $originalOperation = $crud->getOperation();
+        $originalSettings = $crud->settings();
+        $originalButtons = $crud->getOperationSetting('buttons') ?? collect();
+        $originalColumns = $crud->columns(); // Use the direct method, not operation setting
+        $originalFields = $crud->getOperationSetting('fields') ?? [];
+        $originalRoute = $crud->route ?? null;
+        $originalEntityName = $crud->entity_name ?? null;
+        $originalEntityNamePlural = $crud->entity_name_plural ?? null;
+        
+        // Store operation settings
+        $originalOperationSettings = $crud->get($originalOperation) ?? [];
+
+        // Temporarily setup the requested operation
+        $crud->setOperation($operation);
+        
+        // Use the controller's own method to setup the operation properly
+        $reflection = new \ReflectionClass($controller);
+        $method = $reflection->getMethod('setupConfigurationForCurrentOperation');
+        $method->setAccessible(true);
+        $method->invoke($controller, $operation);
+        
+        // Completely restore the original state
+        $crud->setOperation($originalOperation);
+        
+        // CRITICAL: Properly restore columns by clearing and re-adding them
+        // This is essential to preserve list operation columns
+        $crud->removeAllColumns();
+        foreach ($originalColumns as $column) {
+            $crud->addColumn($column);
+        }
+        
+        // Restore all original settings one by one, but skip complex objects
+        foreach ($originalSettings as $key => $value) {
+            try {
+                // Skip complex objects that Laravel generates dynamically
+                if (is_object($value) && (
+                    $value instanceof \Illuminate\Routing\UrlGenerator ||
+                    $value instanceof \Illuminate\Http\Request ||
+                    $value instanceof \Illuminate\Contracts\Foundation\Application ||
+                    $value instanceof \Closure ||
+                    method_exists($value, '__toString') === false
+                )) {
+                    continue;
+                }
+                
+                $crud->set($key, $value);
+            } catch (\Exception $e) {
+                // Silently continue with restoration
+            }
+        }
+        
+        // Restore original operation settings completely
+        $crud->set($originalOperation, $originalOperationSettings);
+        
+        // Specifically restore critical state
+        $crud->setOperationSetting('buttons', $originalButtons);
+        $crud->setOperationSetting('fields', $originalFields);
+        
+        // Restore core properties if they were changed
+        if ($originalRoute !== null) {
+            $crud->route = $originalRoute;
+        }
+        if ($originalEntityName !== null) {
+            $crud->entity_name = $originalEntityName;
+        }
+        if ($originalEntityNamePlural !== null) {
+            $crud->entity_name_plural = $originalEntityNamePlural;
+        }
+    }
+
+    /**
+     * Setup a specific operation without reinitializing the entire CRUD panel.
+     *
+     * @param  object  $controller  The controller instance
+     * @param  string  $operation  The operation to setup
+     * @param  CrudPanel  $crud  The CRUD panel instance
+     */
+    private function setupSpecificOperation($controller, string $operation, CrudPanel $crud): void
+    {
+        // Setup the specific operation using the existing CrudController infrastructure
+        $crud->setOperation($operation);
+        
+        // Use the controller's own method to setup the operation properly
+        $reflection = new \ReflectionClass($controller);
+        $method = $reflection->getMethod('setupConfigurationForCurrentOperation');
+        $method->setAccessible(true);
+        $method->invoke($controller, $operation);
+    }
+
     /**
      * Check if a specific operation has been initialized for a controller.
      */
diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php
index c3c253f384..75d9a1a279 100644
--- a/src/app/Library/CrudPanel/Traits/Search.php
+++ b/src/app/Library/CrudPanel/Traits/Search.php
@@ -4,7 +4,7 @@
 
 use Backpack\CRUD\ViewNamespaces;
 use Carbon\Carbon;
-use Validator;
+use Illuminate\Support\Facades\Validator;
 
 trait Search
 {
@@ -275,14 +275,14 @@ public function getRowViews($entry, $rowNumber = false)
                                 ->render();
         }
 
-        // add the bulk actions checkbox to the first column
-        if ($this->getOperationSetting('bulkActions')) {
+        // add the bulk actions checkbox to the first column - but only if we have columns
+        if ($this->getOperationSetting('bulkActions') && !empty($row_items)) {
             $bulk_actions_checkbox = \View::make('crud::columns.inc.bulk_actions_checkbox', ['entry' => $entry])->render();
             $row_items[0] = $bulk_actions_checkbox.$row_items[0];
         }
 
-        // add the details_row button to the first column
-        if ($this->getOperationSetting('detailsRow')) {
+        // add the details_row button to the first column - but only if we have columns
+        if ($this->getOperationSetting('detailsRow') && !empty($row_items)) {
             $details_row_button = \View::make('crud::columns.inc.details_row_button')
                                            ->with('crud', $this)
                                            ->with('entry', $entry)
@@ -291,7 +291,7 @@ public function getRowViews($entry, $rowNumber = false)
             $row_items[0] = $details_row_button.$row_items[0];
         }
 
-        if ($this->getResponsiveTable()) {
+        if ($this->getResponsiveTable() && !empty($row_items)) {
             $responsiveTableTrigger = '<div class="dtr-control d-none cursor-pointer"></div>';
             $row_items[0] = $responsiveTableTrigger.$row_items[0];
         }
@@ -398,16 +398,18 @@ public function getEntriesAsJsonForDatatables($entries, $totalRows, $filteredRow
     {
         $rows = [];
 
-        foreach ($entries as $row) {
+        foreach ($entries as $index => $row) {
             $rows[] = $this->getRowViews($row, $startIndex === false ? false : ++$startIndex);
         }
 
-        return [
+        $result = [
             'draw' => (isset($this->getRequest()['draw']) ? (int) $this->getRequest()['draw'] : 0),
             'recordsTotal' => $totalRows,
             'recordsFiltered' => $filteredRows,
             'data' => $rows,
         ];
+
+        return $result;
     }
 
     /**
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index 62cae01c9a..d1ca631646 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -5,6 +5,7 @@
 use Backpack\CRUD\CrudManager;
 use Closure;
 use Illuminate\View\Component;
+use Illuminate\Support\Facades\Log;
 
 class Dataform extends Component
 {
@@ -35,6 +36,7 @@ public function __construct(
         CrudManager::setActiveController($controller);
 
         $this->crud = CrudManager::setupCrudPanel($controller, $operation);
+        
 
         $this->crud->setAutoFocusOnFirstField($this->focusOnFirstField);
 
diff --git a/src/resources/views/crud/components/dataform/ajax_response.blade.php b/src/resources/views/crud/components/dataform/ajax_response.blade.php
index 9a18e2fedc..b2b6c29899 100644
--- a/src/resources/views/crud/components/dataform/ajax_response.blade.php
+++ b/src/resources/views/crud/components/dataform/ajax_response.blade.php
@@ -21,4 +21,5 @@
 
 
 @stack('after_styles')
+@stack('before_scripts')
 @stack('after_scripts')
\ No newline at end of file
diff --git a/src/resources/views/crud/components/dataform/form.blade.php b/src/resources/views/crud/components/dataform/form.blade.php
index 023f2bb8cc..1dbb73d7c6 100644
--- a/src/resources/views/crud/components/dataform/form.blade.php
+++ b/src/resources/views/crud/components/dataform/form.blade.php
@@ -1,7 +1,6 @@
 <div class="backpack-form">
     @include('crud::inc.grouped_errors', ['id' => $id])
 
-
     <form method="post"
         action="{{ $action }}"
         id="{{ $id }}"
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index f17378657f..47ccef04a2 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -44,17 +44,52 @@
 @if (!request()->ajax()) @endpush @endif
 @push('after_scripts') @if (request()->ajax()) @endpush @endif
 <script>
-    !(function() {
-    // Initialize modals immediately when the script runs
-    initializeAllModals();
-    // Also listen for DataTable draw events which might add new modals
-    document.addEventListener('draw.dt', initializeAllModals);
-})();
-    function initializeAllModals() {
-    // First, track all initialized modals by their unique ID to avoid duplicates
-    const initializedModals = new Set();
-    
-    document.querySelectorAll('[id^="modalTemplate"]').forEach(modalTemplate => {
+    // Ensure initializeAllModals is available immediately
+    if (typeof window.initializeAllModals === 'undefined') {
+        window.initializeAllModals = function() {
+            // This will be replaced by the full implementation below
+        };
+    }
+
+    // Make initializeAllModals available globally
+    window.initializeAllModals = function() {
+
+        // First, track all initialized modals by their unique ID to avoid duplicates
+        const initializedModals = new Set();
+        
+        // Check for modal templates
+        const modalTemplates = document.querySelectorAll('[id^="modalTemplate"]');
+        
+        // Check for modal buttons (support both Bootstrap 4 and 5 attributes)
+        const modalButtons = document.querySelectorAll('[data-bs-target], [data-target]');
+        
+        modalButtons.forEach((button, index) => {
+            const target = button.getAttribute('data-bs-target') || button.getAttribute('data-target');
+        });
+        
+        // Also check specifically for update modal buttons (support both attributes)
+        const updateButtons = document.querySelectorAll('[data-bs-target*="update_modal"], [data-target*="update_modal"]');
+        
+        // Check what's in the table rows specifically (look for any CRUD table)
+        const tableRows = document.querySelectorAll('table.crud-table tbody tr, [id^="crudTable"] tbody tr');
+        
+        tableRows.forEach((row, index) => {
+            const buttonsInRow = row.querySelectorAll('[data-bs-target*="modal"], [data-target*="modal"]');
+            const updateButtonsInRow = row.querySelectorAll('[data-bs-target*="update_modal"], [data-target*="update_modal"]');
+            const modalTemplatesInRow = row.querySelectorAll('[id^="modalTemplate"]');
+            
+            if (modalTemplatesInRow.length > 0) {
+                modalTemplatesInRow.forEach((template, tIndex) => {
+                });
+            }
+        });
+        
+        // Check all elements with class containing modal
+        const allModalElements = document.querySelectorAll('[id*="modal"]');
+        allModalElements.forEach((el, index) => {
+            if (index < 10) { // Log first 10 to avoid spam
+            }
+        });    modalTemplates.forEach(modalTemplate => {
         // Extract controller hash from the ID
         const controllerId = modalTemplate.id.replace('modalTemplate', '');
         const modalEl = modalTemplate.querySelector('.modal');
@@ -91,6 +126,7 @@ function initializeAllModals() {
         // Only set up the event handlers if they don't exist yet
         if (!modalEl._loadHandler) {
             modalEl._loadHandler = function() {
+                
                 loadModalForm(controllerId, modalEl, formContainer, submitButton, scrollPosition);
             };
             modalEl.addEventListener('shown.bs.modal', modalEl._loadHandler);
@@ -128,10 +164,26 @@ function loadModalForm(controllerId, modalEl, formContainer, submitButton, scrol
                 'X-Requested-With': 'XMLHttpRequest'
             }
         })
-        .then(response => response.text())
+        .then(response => {
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            return response.text();
+        })
+        .then(data => {
+            formContainer.innerHTML = data;
+            formContainer.dataset.loaded = 'true';
+            
+            // Check if form loaded properly
+            const loadedForm = formContainer.querySelector('form');
+            if (loadedForm) {
+                // Form loaded successfully
+            }
+            return response.text();
+        })
         .then(html => {
             if (!html) {
-                console.error(`No HTML content returned for controller ID ${controllerId}`);
                 return;
             }
 
@@ -209,7 +261,7 @@ function loadModalForm(controllerId, modalEl, formContainer, submitButton, scrol
                     } catch (e) {
                         console.error('Error initializing form fields:', e);
                     }
-                } 
+                }
                 submitButton.disabled = false;
             })
             .catch(error => {
@@ -226,10 +278,9 @@ function loadModalForm(controllerId, modalEl, formContainer, submitButton, scrol
 function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
     const form = formContainer.querySelector('form');
     if (!form) {
-        console.error('Form not found in modal');
         return; 
     }
-    
+
     const errorsContainer = document.getElementById(`modal-form-errors${controllerId}`);
     const errorsList = document.getElementById(`modal-form-errors-list${controllerId}`);
 
@@ -264,6 +315,7 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
     })
     .then(result => {
         if (result.ok) {
+            
             // Success
             new Noty({
                 type: 'success',
@@ -295,25 +347,53 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
             if(formContainer.dataset.refreshDatatable === 'true') {
                 setTimeout(function() {
                     try {
-                        // Find closest DataTable
-                        const triggerButton = document.querySelector(`[data-target="#${modalEl.id}"]`);
-                        const closestTable = triggerButton ? triggerButton.closest('.dataTable') : null;    
+                        // Find the modal trigger button using both old and new Bootstrap attributes
+                        const triggerButton = document.querySelector(`[data-bs-target="#${modalEl.id}"], [data-target="#${modalEl.id}"]`);
+                        
+                        // Find the closest table or use any CRUD table on the page
+                        let closestTable = triggerButton ? triggerButton.closest('table.crud-table, [id^="crudTable"]') : null;
+                        
+                        // If no closest table found, try to find any CRUD table on the page
+                        if (!closestTable) {
+                            closestTable = document.querySelector('table.crud-table, [id^="crudTable"]');
+                        }
+                        
                         if (closestTable && closestTable.id) {
-                            // Access the DataTable instance using the DataTables API
-                            const dataTable = window.DataTable.tables({ visible: true, api: true }).filter(
-                                table => table.getAttribute('id') === closestTable.id
-                            );
-                            if (dataTable) {
-                                dataTable.ajax.reload();
+                            // Try to get the DataTable instance for this specific table
+                            const tableId = closestTable.id;
+                            
+                            // Check if we have a global crud.tables object with this table
+                            if (window.crud && window.crud.tables && window.crud.tables[tableId]) {
+                                window.crud.tables[tableId].ajax.reload(null, false);
+                                return;
+                            }
+                            
+                            // Fallback: try to find the DataTable instance using jQuery
+                            if (typeof $ !== 'undefined' && $.fn.DataTable) {
+                                const dataTable = $(`#${tableId}`).DataTable();
+                                if (dataTable) {
+                                    dataTable.ajax.reload(null, false);
+                                    return;
+                                }
+                            }
+                            
+                            // Another fallback: use the DataTables API directly
+                            if (typeof DataTable !== 'undefined') {
+                                const dataTable = new DataTable(`#${tableId}`);
+                                if (dataTable) {
+                                    dataTable.ajax.reload();
+                                }
                             }
                         }
                     } catch (e) {
                         try {
-                            // Fallback approach if first method fails
+                            // Final fallback: try any global table variable
                             if (typeof table !== 'undefined') {
                                 table.draw(false);
                             }
-                        } catch (e2) { }
+                        } catch (e2) { 
+                            console.warn('Could not refresh datatable:', e2);
+                        }
                     }
                 }, 100);
             }    
@@ -360,5 +440,36 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
         submitButton.disabled = false;
     });
 }
+
+    // Initialize modals when the script loads
+    $(document).ready(function() {
+        
+        initializeAllModals();
+        
+        // Listen for proper DataTables draw events on any table
+        $(document).on('draw.dt', function(e, settings) {
+            
+            setTimeout(initializeAllModals, 100); // Small delay to ensure DOM is updated
+        });
+        
+        // Also listen for other common events that might indicate table updates
+        $(document).on('responsive-resize.dt responsive-display.dt', function(e, settings) {
+            setTimeout(initializeAllModals, 50);
+        });
+        
+        // Handle AJAX content updates
+        $(document).on('DOMNodeInserted', function(e) {
+            // Only trigger for significant DOM changes
+            if (e.target.nodeType === 1 && (
+                e.target.classList.contains('modal') ||
+                e.target.querySelector && e.target.querySelector('.modal') ||
+                e.target.classList.contains('crud-table') ||
+                e.target.querySelector && e.target.querySelector('.crud-table')
+            )) {
+                setTimeout(initializeAllModals, 50);
+            }
+        });
+    });
+    
     </script>
-@if (!request()->ajax()) @endpush @endif
\ No newline at end of file
+@if (!request()->ajax()) @endpush @endif
diff --git a/src/resources/views/crud/components/datatable/datatable_logic.blade.php b/src/resources/views/crud/components/datatable/datatable_logic.blade.php
index 0a7862a16f..d6d9635e2f 100644
--- a/src/resources/views/crud/components/datatable/datatable_logic.blade.php
+++ b/src/resources/views/crud/components/datatable/datatable_logic.blade.php
@@ -140,7 +140,8 @@ functionsToRunOnDataTablesDrawEvent: [],
 window.crud.executeFunctionByName = window.crud.defaultTableConfig.executeFunctionByName;
 window.crud.updateUrl = window.crud.defaultTableConfig.updateUrl;
 
-window.crud.initializeTable = function(tableId, customConfig = {}) {       
+window.crud.initializeTable = function(tableId, customConfig = {}) {
+    // Create a table-specific configuration
     if (!window.crud.tableConfigs[tableId]) {
         window.crud.tableConfigs[tableId] = {};
         
@@ -342,16 +343,54 @@ functionsToRunOnDataTablesDrawEvent: [],
                 target: '.dtr-control',
                 renderer: function(api, rowIdx, columns) {
                     var data = $.map(columns, function(col, i) {
+                        // Safety check for column index
+                        if (!col || col.columnIndex === undefined || col.columnIndex === null) {
+                            return '';
+                        }
+                        
+                        // Check if column is explicitly disabled for modal
+                        var isModalDisabled = false;
+                        
+                        try {
+                            var headerCell = table.column(col.columnIndex).header();
+                            isModalDisabled = $(headerCell).data('visible-in-modal') === false || $(headerCell).data('visible-in-modal') === 'false';
+                        } catch (e) {
+                            // Column header not accessible - default to showing the column
+                            isModalDisabled = false;
+                        }
+                        
+                        // Skip columns that are explicitly disabled for modal
+                        if (isModalDisabled) {
+                            return '';
+                        }
+                        
                         // Use the table instance from the API
                         var table = api.table().context[0].oInstance;
                         var tableId = table.attr('id');
-                        var columnHeading = window.crud.tables[tableId].columns().header()[col.columnIndex];
+                        
+                        // Check if we're in a modal context
+                        if (table.closest('.modal').length > 0) {
+                            return '';
+                        }
+                        
+                        var columnHeading;
+                        if (window.crud?.tables?.[tableId]?.columns) {
+                            columnHeading = window.crud.tables[tableId].columns().header()[col.columnIndex];
+                        } else {
+                            // Fallback: get column heading directly from table header
+                            columnHeading = table.find('thead th').eq(col.columnIndex)[0];
+                        }
                         
                         if ($(columnHeading).attr('data-visible-in-modal') == 'false') {
                             return '';
                         }
 
-                        if (col.data.indexOf('crud_bulk_actions_checkbox') !== -1) {
+                        // Skip if col is null or doesn't have required properties
+                        if (!col || col.columnIndex === undefined) {
+                            return '';
+                        }
+
+                        if (col.data && typeof col.data === 'string' && col.data.indexOf('crud_bulk_actions_checkbox') !== -1) {
                             col.data = col.data.replace('crud_bulk_actions_checkbox', 'crud_bulk_actions_checkbox d-none');
                         }
 
@@ -371,8 +410,8 @@ functionsToRunOnDataTablesDrawEvent: [],
                         }
 
                         return '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
-                                '<td style="vertical-align:top; border:none;"><strong>'+colTitle+':'+'<strong></td> '+
-                                '<td style="padding-left:10px;padding-bottom:10px; border:none;">'+col.data+'</td>'+
+                                '<td style="vertical-align:top; border:none;"><strong>'+colTitle+':'+'</strong></td> '+
+                                '<td style="padding-left:10px;padding-bottom:10px; border:none;">'+(col.data || '')+'</td>'+
                                 '</tr>';
                     }).join('');
 
@@ -394,6 +433,10 @@ functionsToRunOnDataTablesDrawEvent: [],
             var tableId = settings.sTableId;
             var table = window.crud.tables[tableId];
             
+            if (!table || typeof table.columns !== 'function') {
+                return;
+            }
+            
             data.columns.forEach(function(item, index) {
                 var columnHeading = table.columns().header()[index];
                 if ($(columnHeading).attr('data-visible-in-table') == 'true') {
@@ -444,6 +487,10 @@ functionsToRunOnDataTablesDrawEvent: [],
                 d.totalEntryCount = tableElement.getAttribute('data-total-entry-count') || false;
                 d.datatable_id = tableId;
                 return d;
+            },
+            "dataSrc": function(json) {
+                
+                return json.data;
             }
         };
     }
@@ -504,6 +551,11 @@ functionsToRunOnDataTablesDrawEvent: [],
         const tableId = $(this).attr('id');
         if (!tableId) return;
         
+        // Skip tables inside modals
+        if ($(this).closest('.modal').length > 0) {
+            return;
+        }
+        
         if ($.fn.DataTable.isDataTable('#' + tableId)) {
             return;
         }
@@ -614,24 +666,72 @@ function setupTableEvents(tableId, config) {
     // on DataTable draw event run all functions in the queue
     $(`#${tableId}`).on('draw.dt', function() {
         
-        document.getElementById(tableId).querySelectorAll('[id^="modalTemplate"]').forEach(function(modal) {
+        // Ensure initializeAllModals function is available before we try to call it
+        if (typeof window.initializeAllModals === 'undefined') {
+            window.initializeAllModals = function() {
+                // This is a basic fallback that will be replaced by the full implementation
+                // when the modal script loads
+            };
+        }
+        
+        const modalTemplatesInTable = document.getElementById(tableId).querySelectorAll('[id^="modalTemplate"]');
+        
+        modalTemplatesInTable.forEach(function(modal, index) {
             const newModal = modal.cloneNode(true);
             document.body.appendChild(newModal);
             modal.remove();
         });
+        
+        // After moving modals, check what's now in the DOM
+        const allModalTemplates = document.querySelectorAll('[id^="modalTemplate"]');
+        
+        // After moving modals, trigger initialization if the function exists
+        if (typeof window.initializeAllModals === 'function') {
+            window.initializeAllModals();
+        } else {
+            console.warn('window.initializeAllModals function not found');
+        }
         // in datatables 2.0.3 the implementation was changed to use `replaceChildren`, for that reason scripts 
         // that came with the response are no longer executed, like the delete button script or any other ajax 
         // button created by the developer. For that reason, we move them to the end of the body
         // ensuring they are re-evaluated on each draw event.
-        document.getElementById(tableId).querySelectorAll('script').forEach(function(script) {
-            const scriptsToLoad = [];
-                    if (script.src) {
-                        // For external scripts with src attribute
-                        const srcUrl = script.src;
-
-                        // Only load the script if it's not already loaded
-                        if (!document.querySelector(`script[src="${srcUrl}"]`)) {
-                            scriptsToLoad.push(new Promise((resolve, reject) => {
+        try {
+            const tableElement = document.getElementById(tableId);
+            if (tableElement) {
+                document.getElementById(tableId).querySelectorAll('script').forEach(function(script) {
+                    const scriptsToLoad = [];
+                            if (script.src) {
+                                // For external scripts with src attribute
+                                const srcUrl = script.src;
+
+                                // Only load the script if it's not already loaded
+                                if (!document.querySelector(`script[src="${srcUrl}"]`)) {
+                                    scriptsToLoad.push(new Promise((resolve, reject) => {
+                                        const newScript = document.createElement('script');
+
+                                        // Copy all attributes from the original script
+                                        Array.from(script.attributes).forEach(attr => {
+                                            newScript.setAttribute(attr.name, attr.value);
+                                        });
+
+                                        // Set up load and error handlers
+                                        newScript.onload = resolve;
+                                        newScript.onerror = reject;
+
+                                        // Append to document to start loading
+                                        try {
+                                            document.head.appendChild(newScript);
+                                        } catch (e) {
+                                            console.warn('Error appending external script:', e);
+                                            reject(e);
+                                        }
+                                    }));
+                                }
+
+                                // Remove the original script tag
+                                script.parentNode.removeChild(script);
+                            } else {
+                                // For inline scripts
                                 const newScript = document.createElement('script');
 
                                 // Copy all attributes from the original script
@@ -639,37 +739,23 @@ function setupTableEvents(tableId, config) {
                                     newScript.setAttribute(attr.name, attr.value);
                                 });
 
-                                // Set up load and error handlers
-                                newScript.onload = resolve;
-                                newScript.onerror = reject;
-
-                                // Append to document to start loading
-                                document.head.appendChild(newScript);
-                            }));
-                        }
-
-                        // Remove the original script tag
-                        script.parentNode.removeChild(script);
-                    } else {
-                        // For inline scripts
-                        const newScript = document.createElement('script');
-
-                        // Copy all attributes from the original script
-                        Array.from(script.attributes).forEach(attr => {
-                            newScript.setAttribute(attr.name, attr.value);
-                        });
-
-                        // Copy the content
-                        newScript.textContent = script.textContent;
+                                // Copy the content
+                                newScript.textContent = script.textContent;
 
-                        try {
-                            document.head.appendChild(newScript);
-                        }catch (e) {
-                            console.warn('Error appending inline script:', e);
-                        }
-                    }
-                
-        });
+                                try {
+                                    document.head.appendChild(newScript);
+                                }catch (e) {
+                                    console.warn('Error appending inline script:', e);
+                                }
+                            }
+                        
+                });
+            } else {
+                console.warn('Table element not found:', tableId);
+            }
+        } catch (e) {
+            console.warn('Error processing scripts for table:', tableId, e);
+        }
 
         // Run table-specific functions and pass the tableId
         // to the function
diff --git a/src/resources/views/crud/inc/form_fields_script.blade.php b/src/resources/views/crud/inc/form_fields_script.blade.php
index 82ee9d101a..f2758ca33c 100644
--- a/src/resources/views/crud/inc/form_fields_script.blade.php
+++ b/src/resources/views/crud/inc/form_fields_script.blade.php
@@ -190,7 +190,7 @@ class CrudField {
         action: "{{ $action ?? '' }}",
 
         // Subfields callbacks holder
-        subfieldsCallbacks: [],
+        subfieldsCallbacks: {},
 
         // Create a field from a given name
         field: name => new CrudField(name),

From 8dee927de9f4fa9a5af60a3a05bec4e3f6ee4afd Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Tue, 16 Sep 2025 10:25:35 +0000
Subject: [PATCH 07/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/CrudPanelManager.php                    | 46 ++++++++++-----------
 src/app/Library/CrudPanel/Traits/Search.php |  6 +--
 src/app/View/Components/Dataform.php        |  2 -
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/CrudPanelManager.php b/src/CrudPanelManager.php
index ba5d6e61dc..8ecbf59e9f 100644
--- a/src/CrudPanelManager.php
+++ b/src/CrudPanelManager.php
@@ -66,15 +66,15 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
 
         // Use provided operation or default to 'list'
         $operation = $operation ?? 'list';
-        
+
         $shouldIsolate = $this->shouldIsolateOperation($controller::class, $operation);
-        
+
         $primaryControllerRequest = $this->cruds[array_key_first($this->cruds)]->getRequest();
-        
+
         // Check if we need to initialize this specific operation
         if (! $crud->isInitialized() || ! $this->isOperationInitialized($controller::class, $operation)) {
             self::setActiveController($controller::class);
-            
+
             // If the panel isn't initialized at all, do full initialization
             if (! $crud->isInitialized()) {
                 // Set the operation for full initialization
@@ -92,10 +92,10 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
                     $this->setupSpecificOperation($controller, $operation, $crud);
                 }
             }
-            
+
             // Mark this operation as initialized
             $this->storeInitializedOperation($controller::class, $operation);
-            
+
             self::unsetActiveController();
             $crud = $this->cruds[$controller::class];
 
@@ -107,26 +107,26 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
 
     /**
      * Determine if an operation should be isolated to prevent state interference.
-     * 
-     * @param string $controller
-     * @param string $operation
+     *
+     * @param  string  $controller
+     * @param  string  $operation
      * @return bool
      */
     private function shouldIsolateOperation(string $controller, string $operation): bool
     {
         $currentCrud = $this->cruds[$controller] ?? null;
-        if (!$currentCrud) {
+        if (! $currentCrud) {
             return false;
         }
-        
+
         $currentOperation = $currentCrud->getOperation();
-        
+
         // Always isolate when switching between different operations
         // This prevents any operation from interfering with another operation's state
         if ($currentOperation && $currentOperation !== $operation) {
             return true;
         }
-        
+
         return false;
     }
 
@@ -149,29 +149,29 @@ private function setupIsolatedOperation($controller, string $operation, CrudPane
         $originalRoute = $crud->route ?? null;
         $originalEntityName = $crud->entity_name ?? null;
         $originalEntityNamePlural = $crud->entity_name_plural ?? null;
-        
+
         // Store operation settings
         $originalOperationSettings = $crud->get($originalOperation) ?? [];
 
         // Temporarily setup the requested operation
         $crud->setOperation($operation);
-        
+
         // Use the controller's own method to setup the operation properly
         $reflection = new \ReflectionClass($controller);
         $method = $reflection->getMethod('setupConfigurationForCurrentOperation');
         $method->setAccessible(true);
         $method->invoke($controller, $operation);
-        
+
         // Completely restore the original state
         $crud->setOperation($originalOperation);
-        
+
         // CRITICAL: Properly restore columns by clearing and re-adding them
         // This is essential to preserve list operation columns
         $crud->removeAllColumns();
         foreach ($originalColumns as $column) {
             $crud->addColumn($column);
         }
-        
+
         // Restore all original settings one by one, but skip complex objects
         foreach ($originalSettings as $key => $value) {
             try {
@@ -185,20 +185,20 @@ private function setupIsolatedOperation($controller, string $operation, CrudPane
                 )) {
                     continue;
                 }
-                
+
                 $crud->set($key, $value);
             } catch (\Exception $e) {
                 // Silently continue with restoration
             }
         }
-        
+
         // Restore original operation settings completely
         $crud->set($originalOperation, $originalOperationSettings);
-        
+
         // Specifically restore critical state
         $crud->setOperationSetting('buttons', $originalButtons);
         $crud->setOperationSetting('fields', $originalFields);
-        
+
         // Restore core properties if they were changed
         if ($originalRoute !== null) {
             $crud->route = $originalRoute;
@@ -222,7 +222,7 @@ private function setupSpecificOperation($controller, string $operation, CrudPane
     {
         // Setup the specific operation using the existing CrudController infrastructure
         $crud->setOperation($operation);
-        
+
         // Use the controller's own method to setup the operation properly
         $reflection = new \ReflectionClass($controller);
         $method = $reflection->getMethod('setupConfigurationForCurrentOperation');
diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php
index 75d9a1a279..bbfe4a1d6e 100644
--- a/src/app/Library/CrudPanel/Traits/Search.php
+++ b/src/app/Library/CrudPanel/Traits/Search.php
@@ -276,13 +276,13 @@ public function getRowViews($entry, $rowNumber = false)
         }
 
         // add the bulk actions checkbox to the first column - but only if we have columns
-        if ($this->getOperationSetting('bulkActions') && !empty($row_items)) {
+        if ($this->getOperationSetting('bulkActions') && ! empty($row_items)) {
             $bulk_actions_checkbox = \View::make('crud::columns.inc.bulk_actions_checkbox', ['entry' => $entry])->render();
             $row_items[0] = $bulk_actions_checkbox.$row_items[0];
         }
 
         // add the details_row button to the first column - but only if we have columns
-        if ($this->getOperationSetting('detailsRow') && !empty($row_items)) {
+        if ($this->getOperationSetting('detailsRow') && ! empty($row_items)) {
             $details_row_button = \View::make('crud::columns.inc.details_row_button')
                                            ->with('crud', $this)
                                            ->with('entry', $entry)
@@ -291,7 +291,7 @@ public function getRowViews($entry, $rowNumber = false)
             $row_items[0] = $details_row_button.$row_items[0];
         }
 
-        if ($this->getResponsiveTable() && !empty($row_items)) {
+        if ($this->getResponsiveTable() && ! empty($row_items)) {
             $responsiveTableTrigger = '<div class="dtr-control d-none cursor-pointer"></div>';
             $row_items[0] = $responsiveTableTrigger.$row_items[0];
         }
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index d1ca631646..62cae01c9a 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -5,7 +5,6 @@
 use Backpack\CRUD\CrudManager;
 use Closure;
 use Illuminate\View\Component;
-use Illuminate\Support\Facades\Log;
 
 class Dataform extends Component
 {
@@ -36,7 +35,6 @@ public function __construct(
         CrudManager::setActiveController($controller);
 
         $this->crud = CrudManager::setupCrudPanel($controller, $operation);
-        
 
         $this->crud->setAutoFocusOnFirstField($this->focusOnFirstField);
 

From 35759769efd0a377a4c48b874d50ddbe4b9907dd Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 16 Sep 2025 11:38:32 +0100
Subject: [PATCH 08/24] remove specific settings initialization

---
 src/CrudPanelManager.php | 67 +++++++++++++++++++++++++++++++++-------
 1 file changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/CrudPanelManager.php b/src/CrudPanelManager.php
index ba5d6e61dc..89f41956e2 100644
--- a/src/CrudPanelManager.php
+++ b/src/CrudPanelManager.php
@@ -140,18 +140,16 @@ private function shouldIsolateOperation(string $controller, string $operation):
      */
     private function setupIsolatedOperation($controller, string $operation, CrudPanel $crud): void
     {
-        // Store the complete current state with detailed logging
+        // Store the complete current state
         $originalOperation = $crud->getOperation();
         $originalSettings = $crud->settings();
-        $originalButtons = $crud->getOperationSetting('buttons') ?? collect();
         $originalColumns = $crud->columns(); // Use the direct method, not operation setting
-        $originalFields = $crud->getOperationSetting('fields') ?? [];
         $originalRoute = $crud->route ?? null;
         $originalEntityName = $crud->entity_name ?? null;
         $originalEntityNamePlural = $crud->entity_name_plural ?? null;
         
-        // Store operation settings
-        $originalOperationSettings = $crud->get($originalOperation) ?? [];
+        // Store operation-specific settings generically
+        $originalOperationSettings = $this->extractOperationSettings($crud, $originalOperation);
 
         // Temporarily setup the requested operation
         $crud->setOperation($operation);
@@ -192,12 +190,8 @@ private function setupIsolatedOperation($controller, string $operation, CrudPane
             }
         }
         
-        // Restore original operation settings completely
-        $crud->set($originalOperation, $originalOperationSettings);
-        
-        // Specifically restore critical state
-        $crud->setOperationSetting('buttons', $originalButtons);
-        $crud->setOperationSetting('fields', $originalFields);
+        // Restore operation-specific settings generically
+        $this->restoreOperationSettings($crud, $originalOperation, $originalOperationSettings);
         
         // Restore core properties if they were changed
         if ($originalRoute !== null) {
@@ -211,6 +205,57 @@ private function setupIsolatedOperation($controller, string $operation, CrudPane
         }
     }
 
+    /**
+     * Extract all settings for a specific operation.
+     *
+     * @param  CrudPanel  $crud  The CRUD panel instance
+     * @param  string  $operation  The operation name
+     * @return array  Array of operation-specific settings
+     */
+    private function extractOperationSettings(CrudPanel $crud, string $operation): array
+    {
+        $settings = $crud->settings();
+        $operationSettings = [];
+        $operationPrefix = $operation . '.';
+        
+        foreach ($settings as $key => $value) {
+            if (str_starts_with($key, $operationPrefix)) {
+                $operationSettings[$key] = $value;
+            }
+        }
+        
+        return $operationSettings;
+    }
+
+    /**
+     * Restore all settings for a specific operation.
+     *
+     * @param  CrudPanel  $crud  The CRUD panel instance
+     * @param  string  $operation  The operation name
+     * @param  array  $operationSettings  The settings to restore
+     */
+    private function restoreOperationSettings(CrudPanel $crud, string $operation, array $operationSettings): void
+    {
+        foreach ($operationSettings as $key => $value) {
+            try {
+                // Skip complex objects that Laravel generates dynamically
+                if (is_object($value) && (
+                    $value instanceof \Illuminate\Routing\UrlGenerator ||
+                    $value instanceof \Illuminate\Http\Request ||
+                    $value instanceof \Illuminate\Contracts\Foundation\Application ||
+                    $value instanceof \Closure ||
+                    method_exists($value, '__toString') === false
+                )) {
+                    continue;
+                }
+                
+                $crud->set($key, $value);
+            } catch (\Exception $e) {
+                // Silently continue with restoration
+            }
+        }
+    }
+
     /**
      * Setup a specific operation without reinitializing the entire CRUD panel.
      *

From cb89781e91c99f716049f372540ebb0c24106a92 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Tue, 16 Sep 2025 10:40:15 +0000
Subject: [PATCH 09/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/CrudPanelManager.php | 54 ++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/CrudPanelManager.php b/src/CrudPanelManager.php
index 89f41956e2..09a2b326ed 100644
--- a/src/CrudPanelManager.php
+++ b/src/CrudPanelManager.php
@@ -66,15 +66,15 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
 
         // Use provided operation or default to 'list'
         $operation = $operation ?? 'list';
-        
+
         $shouldIsolate = $this->shouldIsolateOperation($controller::class, $operation);
-        
+
         $primaryControllerRequest = $this->cruds[array_key_first($this->cruds)]->getRequest();
-        
+
         // Check if we need to initialize this specific operation
         if (! $crud->isInitialized() || ! $this->isOperationInitialized($controller::class, $operation)) {
             self::setActiveController($controller::class);
-            
+
             // If the panel isn't initialized at all, do full initialization
             if (! $crud->isInitialized()) {
                 // Set the operation for full initialization
@@ -92,10 +92,10 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
                     $this->setupSpecificOperation($controller, $operation, $crud);
                 }
             }
-            
+
             // Mark this operation as initialized
             $this->storeInitializedOperation($controller::class, $operation);
-            
+
             self::unsetActiveController();
             $crud = $this->cruds[$controller::class];
 
@@ -107,26 +107,26 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
 
     /**
      * Determine if an operation should be isolated to prevent state interference.
-     * 
-     * @param string $controller
-     * @param string $operation
+     *
+     * @param  string  $controller
+     * @param  string  $operation
      * @return bool
      */
     private function shouldIsolateOperation(string $controller, string $operation): bool
     {
         $currentCrud = $this->cruds[$controller] ?? null;
-        if (!$currentCrud) {
+        if (! $currentCrud) {
             return false;
         }
-        
+
         $currentOperation = $currentCrud->getOperation();
-        
+
         // Always isolate when switching between different operations
         // This prevents any operation from interfering with another operation's state
         if ($currentOperation && $currentOperation !== $operation) {
             return true;
         }
-        
+
         return false;
     }
 
@@ -147,29 +147,29 @@ private function setupIsolatedOperation($controller, string $operation, CrudPane
         $originalRoute = $crud->route ?? null;
         $originalEntityName = $crud->entity_name ?? null;
         $originalEntityNamePlural = $crud->entity_name_plural ?? null;
-        
+
         // Store operation-specific settings generically
         $originalOperationSettings = $this->extractOperationSettings($crud, $originalOperation);
 
         // Temporarily setup the requested operation
         $crud->setOperation($operation);
-        
+
         // Use the controller's own method to setup the operation properly
         $reflection = new \ReflectionClass($controller);
         $method = $reflection->getMethod('setupConfigurationForCurrentOperation');
         $method->setAccessible(true);
         $method->invoke($controller, $operation);
-        
+
         // Completely restore the original state
         $crud->setOperation($originalOperation);
-        
+
         // CRITICAL: Properly restore columns by clearing and re-adding them
         // This is essential to preserve list operation columns
         $crud->removeAllColumns();
         foreach ($originalColumns as $column) {
             $crud->addColumn($column);
         }
-        
+
         // Restore all original settings one by one, but skip complex objects
         foreach ($originalSettings as $key => $value) {
             try {
@@ -183,16 +183,16 @@ private function setupIsolatedOperation($controller, string $operation, CrudPane
                 )) {
                     continue;
                 }
-                
+
                 $crud->set($key, $value);
             } catch (\Exception $e) {
                 // Silently continue with restoration
             }
         }
-        
+
         // Restore operation-specific settings generically
         $this->restoreOperationSettings($crud, $originalOperation, $originalOperationSettings);
-        
+
         // Restore core properties if they were changed
         if ($originalRoute !== null) {
             $crud->route = $originalRoute;
@@ -210,20 +210,20 @@ private function setupIsolatedOperation($controller, string $operation, CrudPane
      *
      * @param  CrudPanel  $crud  The CRUD panel instance
      * @param  string  $operation  The operation name
-     * @return array  Array of operation-specific settings
+     * @return array Array of operation-specific settings
      */
     private function extractOperationSettings(CrudPanel $crud, string $operation): array
     {
         $settings = $crud->settings();
         $operationSettings = [];
-        $operationPrefix = $operation . '.';
-        
+        $operationPrefix = $operation.'.';
+
         foreach ($settings as $key => $value) {
             if (str_starts_with($key, $operationPrefix)) {
                 $operationSettings[$key] = $value;
             }
         }
-        
+
         return $operationSettings;
     }
 
@@ -248,7 +248,7 @@ private function restoreOperationSettings(CrudPanel $crud, string $operation, ar
                 )) {
                     continue;
                 }
-                
+
                 $crud->set($key, $value);
             } catch (\Exception $e) {
                 // Silently continue with restoration
@@ -267,7 +267,7 @@ private function setupSpecificOperation($controller, string $operation, CrudPane
     {
         // Setup the specific operation using the existing CrudController infrastructure
         $crud->setOperation($operation);
-        
+
         // Use the controller's own method to setup the operation properly
         $reflection = new \ReflectionClass($controller);
         $method = $reflection->getMethod('setupConfigurationForCurrentOperation');

From 676f1c83a35c69e707f16260e87187d9248d03d7 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 16 Sep 2025 12:11:18 +0100
Subject: [PATCH 10/24] wip

---
 .../components/dataform/modal-form.blade.php  | 52 ++++++-------------
 1 file changed, 15 insertions(+), 37 deletions(-)

diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index 47ccef04a2..14e1df714d 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -60,36 +60,7 @@
         // Check for modal templates
         const modalTemplates = document.querySelectorAll('[id^="modalTemplate"]');
         
-        // Check for modal buttons (support both Bootstrap 4 and 5 attributes)
-        const modalButtons = document.querySelectorAll('[data-bs-target], [data-target]');
-        
-        modalButtons.forEach((button, index) => {
-            const target = button.getAttribute('data-bs-target') || button.getAttribute('data-target');
-        });
-        
-        // Also check specifically for update modal buttons (support both attributes)
-        const updateButtons = document.querySelectorAll('[data-bs-target*="update_modal"], [data-target*="update_modal"]');
-        
-        // Check what's in the table rows specifically (look for any CRUD table)
-        const tableRows = document.querySelectorAll('table.crud-table tbody tr, [id^="crudTable"] tbody tr');
-        
-        tableRows.forEach((row, index) => {
-            const buttonsInRow = row.querySelectorAll('[data-bs-target*="modal"], [data-target*="modal"]');
-            const updateButtonsInRow = row.querySelectorAll('[data-bs-target*="update_modal"], [data-target*="update_modal"]');
-            const modalTemplatesInRow = row.querySelectorAll('[id^="modalTemplate"]');
-            
-            if (modalTemplatesInRow.length > 0) {
-                modalTemplatesInRow.forEach((template, tIndex) => {
-                });
-            }
-        });
-        
-        // Check all elements with class containing modal
-        const allModalElements = document.querySelectorAll('[id*="modal"]');
-        allModalElements.forEach((el, index) => {
-            if (index < 10) { // Log first 10 to avoid spam
-            }
-        });    modalTemplates.forEach(modalTemplate => {
+        modalTemplates.forEach(modalTemplate => {
         // Extract controller hash from the ID
         const controllerId = modalTemplate.id.replace('modalTemplate', '');
         const modalEl = modalTemplate.querySelector('.modal');
@@ -347,15 +318,20 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
             if(formContainer.dataset.refreshDatatable === 'true') {
                 setTimeout(function() {
                     try {
-                        // Find the modal trigger button using both old and new Bootstrap attributes
-                        const triggerButton = document.querySelector(`[data-bs-target="#${modalEl.id}"], [data-target="#${modalEl.id}"]`);
+                        // Find all possible modal trigger buttons using both old and new Bootstrap attributes
+                        const triggerButtons = document.querySelectorAll(`[data-bs-target="#${modalEl.id}"], [data-target="#${modalEl.id}"]`);
                         
-                        // Find the closest table or use any CRUD table on the page
-                        let closestTable = triggerButton ? triggerButton.closest('table.crud-table, [id^="crudTable"]') : null;
+                        // Find the closest table from any trigger button
+                        let closestTable = null;
+                        triggerButtons.forEach(button => {
+                            if (!closestTable) {
+                                closestTable = button.closest('table.crud-table, [id^="crudTable"], table[id*="Table"], .dataTables_wrapper table');
+                            }
+                        });
                         
-                        // If no closest table found, try to find any CRUD table on the page
+                        // If no closest table found, try to find any CRUD or DataTable on the page
                         if (!closestTable) {
-                            closestTable = document.querySelector('table.crud-table, [id^="crudTable"]');
+                            closestTable = document.querySelector('table.crud-table, [id^="crudTable"], table[id*="Table"], .dataTables_wrapper table, table.dataTable');
                         }
                         
                         if (closestTable && closestTable.id) {
@@ -464,7 +440,9 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
                 e.target.classList.contains('modal') ||
                 e.target.querySelector && e.target.querySelector('.modal') ||
                 e.target.classList.contains('crud-table') ||
-                e.target.querySelector && e.target.querySelector('.crud-table')
+                e.target.querySelector && e.target.querySelector('table') ||
+                e.target.id && e.target.id.toLowerCase().includes('modal') ||
+                e.target.id && e.target.id.toLowerCase().includes('table')
             )) {
                 setTimeout(initializeAllModals, 50);
             }

From 945970f1f1777bc7063fb15f0d5bb1c291f92907 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Fri, 19 Sep 2025 14:47:37 +0100
Subject: [PATCH 11/24] fix modal response

---
 .../views/crud/components/dataform/modal-form.blade.php    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index 14e1df714d..7d56140e7d 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -151,10 +151,11 @@ function loadModalForm(controllerId, modalEl, formContainer, submitButton, scrol
             if (loadedForm) {
                 // Form loaded successfully
             }
-            return response.text();
-        })
-        .then(html => {
+            
+            // Process the loaded HTML
+            let html = data;
             if (!html) {
+                submitButton.disabled = false;
                 return;
             }
 

From c86a86e8df6c9525fb8621a116323970e40b863b Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Thu, 2 Oct 2025 10:58:53 +0100
Subject: [PATCH 12/24] wip

---
 src/config/backpack/operations/create.php     |   3 +
 src/config/backpack/operations/update.php     |   3 +
 .../views/crud/buttons/create.blade.php       |  35 +++++-
 .../views/crud/buttons/update.blade.php       | 100 +++++++++++++-----
 .../dataform/ajax_response.blade.php          |  95 ++++++++++++++++-
 .../dataform/form_content.blade.php           |  28 +++++
 .../components/dataform/modal-form.blade.php  |  75 +++++++++++--
 7 files changed, 297 insertions(+), 42 deletions(-)
 create mode 100644 src/resources/views/crud/components/dataform/form_content.blade.php

diff --git a/src/config/backpack/operations/create.php b/src/config/backpack/operations/create.php
index 2bdef21f18..66c4f267a4 100644
--- a/src/config/backpack/operations/create.php
+++ b/src/config/backpack/operations/create.php
@@ -21,6 +21,9 @@
     // when the page loads, put the cursor on the first input?
     'autoFocusOnFirstField' => true,
 
+    // when enabled, the create button will open a modal form instead of the create page
+    'createButtonWithModalForm' => false,
+
     // Where do you want to redirect the user by default, save?
     // options: save_and_back, save_and_edit, save_and_new
     'defaultSaveAction' => 'save_and_back',
diff --git a/src/config/backpack/operations/update.php b/src/config/backpack/operations/update.php
index 27fe127475..784bb17c6e 100644
--- a/src/config/backpack/operations/update.php
+++ b/src/config/backpack/operations/update.php
@@ -21,6 +21,9 @@
     // when the page loads, put the cursor on the first input?
     'autoFocusOnFirstField' => true,
 
+    // when enabled, the update button will open a modal form instead of the edit page
+    'updateButtonWithModalForm' => false,
+
     // Where do you want to redirect the user by default, save?
     // options: save_and_back, save_and_edit, save_and_new
     'defaultSaveAction' => 'save_and_back',
diff --git a/src/resources/views/crud/buttons/create.blade.php b/src/resources/views/crud/buttons/create.blade.php
index 483f62d703..ba687eead2 100644
--- a/src/resources/views/crud/buttons/create.blade.php
+++ b/src/resources/views/crud/buttons/create.blade.php
@@ -1,5 +1,34 @@
 @if ($crud->hasAccess('create'))
-    <a href="{{ url($crud->route.'/create') }}" class="btn btn-primary" bp-button="create" data-style="zoom-in">
-        <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
-    </a>
+    @php
+        $createButtonWithModalForm = $crud->getOperationSetting('createButtonWithModalForm', 'create') ?? false;
+        $controllerClass = get_class(app('request')->route()->getController());
+    @endphp
+    
+    @if($createButtonWithModalForm)
+        {{-- Create button that opens modal form --}}
+        <button 
+            type="button" 
+            class="btn btn-primary" 
+            data-bs-toggle="modal"
+            data-bs-target="#createModal{{ md5($controllerClass.'create') }}"
+            bp-button="create" 
+            data-style="zoom-in"
+        >
+            <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
+        </button>
+
+        {{-- Include the modal form component --}}
+        <x-backpack::dataform-modal
+            :controller="$controllerClass"
+            operation="create"
+            id="createModal{{ md5($controllerClass.'create') }}"
+            :title="trans('backpack::crud.add') . ' ' . $crud->entity_name"
+            refresh-datatable="true"
+        />
+    @else
+        {{-- Regular create button that redirects to create page --}}
+        <a href="{{ url($crud->route.'/create') }}" class="btn btn-primary" bp-button="create" data-style="zoom-in">
+            <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
+        </a>
+    @endif
 @endif
\ No newline at end of file
diff --git a/src/resources/views/crud/buttons/update.blade.php b/src/resources/views/crud/buttons/update.blade.php
index 3188c1898a..435ca47eef 100644
--- a/src/resources/views/crud/buttons/update.blade.php
+++ b/src/resources/views/crud/buttons/update.blade.php
@@ -1,28 +1,76 @@
 @if ($crud->hasAccess('update', $entry))
-	@if (!$crud->model->translationEnabled())
+    @php
+        $updateButtonWithModalForm = $crud->getOperationSetting('updateButtonWithModalForm', 'update') ?? false;
+        $controllerClass = get_class(app('request')->route()->getController());
+    @endphp
+    
+    @if($updateButtonWithModalForm)
+        {{-- Update button that opens modal form --}}
+        @if (!$crud->model->translationEnabled())
+            <button 
+                type="button" 
+                class="btn btn-sm btn-link" 
+                data-bs-toggle="modal"
+                data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+                bp-button="update"
+            >
+                <i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
+            </button>
+        @else
+            {{-- Edit button group for translated models --}}
+            <div class="btn-group">
+                <button 
+                    type="button" 
+                    class="btn btn-sm btn-link pr-0" 
+                    data-bs-toggle="modal"
+                    data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+                >
+                    <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
+                </button>
+                <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-right">
+                    <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
+                    @foreach ($crud->model->getAvailableLocales() as $key => $locale)
+                        <li><a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a></li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
 
-	{{-- Single edit button --}}
-	<a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" bp-button="update" class="btn btn-sm btn-link">
-		<i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
-	</a>
-
-	@else
-
-	{{-- Edit button group --}}
-	<div class="btn-group">
-	  <a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" class="btn btn-sm btn-link pr-0">
-	    <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
-	  </a>
-	  <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-	    <span class="caret"></span>
-	  </a>
-	  <ul class="dropdown-menu dropdown-menu-right">
-  	    <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
-	  	@foreach ($crud->model->getAvailableLocales() as $key => $locale)
-		  	<a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a>
-	  	@endforeach
-	  </ul>
-	</div>
-
-	@endif
-@endif
+        {{-- Include the modal form component --}}
+        <x-backpack::dataform-modal
+            :controller="$controllerClass"
+            operation="update"
+            :entry="$entry"
+            id="updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+            :title="trans('backpack::crud.edit') . ' ' . $crud->entity_name"
+            refresh-datatable="true"
+        />
+    @else
+        {{-- Regular update button that redirects to edit page --}}
+        @if (!$crud->model->translationEnabled())
+            {{-- Single edit button --}}
+            <a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" bp-button="update" class="btn btn-sm btn-link">
+                <i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
+            </a>
+        @else
+            {{-- Edit button group --}}
+            <div class="btn-group">
+                <a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" class="btn btn-sm btn-link pr-0">
+                    <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
+                </a>
+                <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-right">
+                    <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
+                    @foreach ($crud->model->getAvailableLocales() as $key => $locale)
+                        <a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+    @endif
+@endif
\ No newline at end of file
diff --git a/src/resources/views/crud/components/dataform/ajax_response.blade.php b/src/resources/views/crud/components/dataform/ajax_response.blade.php
index b2b6c29899..ebcc488d8f 100644
--- a/src/resources/views/crud/components/dataform/ajax_response.blade.php
+++ b/src/resources/views/crud/components/dataform/ajax_response.blade.php
@@ -1,11 +1,21 @@
 @php
 \Alert::flush();
+
+$loadedAssets = json_decode($parentLoadedAssets ?? '[]', true);
+
+//mark parent crud assets as loaded.
+foreach($loadedAssets as $asset) {
+    Basset::markAsLoaded($asset);
+}
+
 @endphp 
+
  <form method="post"
         action="#"
 >
 {!! csrf_field() !!}
-@include('crud::form_content', ['fields' => $crud->fields(), 'action' => 'edit', 'inlineCreate' => true, 'initFields' => false])
+@include('crud::components.dataform.form_content', ['fields' => $crud->fields(), 'action' => 'edit', 'inlineCreate' => true, 'initFields' => false, 'id' => request('_form_id')])
+        {{-- This makes sure that all field assets are loaded. --}}
 <div class="d-none" id="parentLoadedAssets">{{ json_encode(Basset::loaded()) }}</div>
  </form>
 
@@ -19,7 +29,86 @@
     @endif
 @endforeach
 
+@stack('before_scripts')
+
+@stack('crud_fields_scripts')
+
+@stack('crud_fields_styles')
+
+@stack('after_scripts')
 
 @stack('after_styles')
-@stack('before_scripts')
-@stack('after_scripts')
\ No newline at end of file
+
+<script>
+    // Define utility functions needed by field initialization scripts
+    // These are normally included in form_content.blade.php but missing in AJAX context
+
+    /**
+     * Initialize all fields with JavaScript based on their data-init-function attribute
+     * @param {jQuery|HTMLElement} container
+     */
+    function initializeFieldsWithJavascript(container) {
+        var selector;
+        if (container instanceof jQuery) {
+            selector = container;
+        } else {
+            selector = $(container);
+        }
+        
+        selector.find("[data-init-function]").not("[data-initialized=true]").each(function () {
+            var element = $(this);
+            var functionName = element.data('init-function');
+
+            if (typeof window[functionName] === "function") {
+                window[functionName](element);
+                // mark the element as initialized, so that its function is never called again
+                element.attr('data-initialized', 'true');
+            }
+        });
+    }
+
+    /**
+     * Auto-discover first focusable input
+     * @param {jQuery} form
+     * @return {jQuery}
+     */
+    function getFirstFocusableField(form) {
+        return form.find('input, select, textarea, button')
+            .not('.close')
+            .not('[disabled]')
+            .filter(':visible:first');
+    }
+
+    /**
+     *
+     * @param {jQuery} firstField
+     */
+    function triggerFocusOnFirstInputField(firstField) {
+        if (firstField.hasClass('select2-hidden-accessible')) {
+            return handleFocusOnSelect2Field(firstField);
+        }
+
+        firstField.trigger('focus');
+    }
+
+    /**
+     * 1- Make sure no other select2 input is open in other field to focus on the right one
+     * 2- Check until select2 is initialized
+     * 3- Open select2
+     *
+     * @param {jQuery} firstField
+     */
+    function handleFocusOnSelect2Field(firstField){
+        firstField.select2('focus');
+    }
+
+    /*
+    * Hacky fix for a bug in select2 with jQuery 3.6.0's new nested-focus "protection"
+    * see: https://github.com/select2/select2/issues/5993
+    * see: https://github.com/jquery/jquery/issues/4382
+    *
+    */
+    $(document).on('select2:open', () => {
+        setTimeout(() => document.querySelector('.select2-container--open .select2-search__field').focus(), 100);
+    });
+</script>
diff --git a/src/resources/views/crud/components/dataform/form_content.blade.php b/src/resources/views/crud/components/dataform/form_content.blade.php
new file mode 100644
index 0000000000..6e869a046c
--- /dev/null
+++ b/src/resources/views/crud/components/dataform/form_content.blade.php
@@ -0,0 +1,28 @@
+<input type="hidden" name="_http_referrer" value="{{ old('_http_referrer') ?? \URL::previous() ?? url($crud->route) }}">
+<input type="hidden" name="_form_id" value="{{ $id ?? 'crudForm' }}">
+
+{{-- See if we're using tabs --}}
+@if ($crud->tabsEnabled() && count($crud->getTabs()))
+    @include('crud::inc.show_tabbed_fields', ['fields' => $crud->fields()])
+    <input type="hidden" name="_current_tab" value="{{ Str::slug($crud->getTabs()[0], '') }}" />
+@else
+  <div class="card">
+    <div class="card-body row">
+      @include('crud::inc.show_fields', ['fields' => $crud->fields()])
+    </div>
+  </div>
+@endif
+
+@foreach (app('widgets')->toArray() as $currentWidget)
+@php
+    $currentWidget = \Backpack\CRUD\app\Library\Widget::add($currentWidget);
+@endphp
+    @if($currentWidget->getAttribute('inline'))
+        @include($currentWidget->getFinalViewPath(), ['widget' => $currentWidget->toArray()])
+    @endif
+@endforeach
+
+
+@push('before_scripts')
+  @include('crud::inc.form_fields_script')
+@endpush
\ No newline at end of file
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index 7d56140e7d..7bf3956163 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -6,9 +6,11 @@
         }
     }
 @endphp
+@push('after_styles') @if (request()->ajax()) @endpush @endif
+@if (!request()->ajax()) @endpush @endif
 @push('after_scripts') @if (request()->ajax()) @endpush @endif
     <div class="d-none" id="modalTemplate{{ md5($controller.$id) }}">
-        <div class="modal fade" id="{{$id}}" tabindex="-1" role="dialog" data-bs-backdrop="static" data-backdrop="static" aria-labelledby="formModalLabel{{ md5($controller.$id) }}" aria-hidden="true">
+        <div class="modal modal-blur fade" id="{{$id}}" tabindex="0" role="dialog" data-bs-backdrop="static" data-backdrop="static" aria-labelledby="formModalLabel{{ md5($controller.$id) }}" aria-hidden="true">
             <div class="{{$classes}}" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -44,13 +46,42 @@
 @if (!request()->ajax()) @endpush @endif
 @push('after_scripts') @if (request()->ajax()) @endpush @endif
 <script>
-    // Ensure initializeAllModals is available immediately
-    if (typeof window.initializeAllModals === 'undefined') {
-        window.initializeAllModals = function() {
-            // This will be replaced by the full implementation below
+    // Define initializeFieldsWithJavascript globally BEFORE modal content loads
+    if (typeof window.initializeFieldsWithJavascript === 'undefined') {
+        window.initializeFieldsWithJavascript = function(container) {
+            var selector;
+            if (container instanceof jQuery) {
+                selector = container;
+            } else {
+                selector = $(container);
+            }
+            
+            selector.find("[data-init-function]").not("[data-initialized=true]").each(function () {
+                var element = $(this);
+                var functionName = element.data('init-function');
+
+                if (typeof window[functionName] === "function") {
+                    window[functionName](element);
+                    // mark the element as initialized, so that its function is never called again
+                    element.attr('data-initialized', 'true');
+                }
+            });
         };
     }
 
+    if (!window._select2FocusFixInstalled) {
+        document.addEventListener('focusin', function(e) {
+            // Allow focus on Select2 elements even when modal is open
+            if (e.target.classList.contains('select2-search__field') ||
+                e.target.closest('.select2-container') ||
+                e.target.closest('.select2-dropdown')) {
+                e.stopImmediatePropagation();
+            }
+        }, true);
+        
+        window._select2FocusFixInstalled = true;
+    }
+
     // Make initializeAllModals available globally
     window.initializeAllModals = function() {
 
@@ -230,10 +261,38 @@ function loadModalForm(controllerId, modalEl, formContainer, submitButton, scrol
                 if (typeof initializeFieldsWithJavascript === 'function') {
                     try {
                         initializeFieldsWithJavascript(modalEl);
+                        
+                        $(modalEl).find('select[data-field-is-inline="true"]').on('select2:open', function(e) {
+                            const $field = $(this);
+                            
+                            setTimeout(function() {
+                                const $container = $field.next('.select2-container--open');
+                                
+                                const $dropdown = $('.select2-dropdown:visible').last();
+                                
+                                if ($dropdown.length && $container.length) {
+                                    const containerRect = $container[0].getBoundingClientRect();
+                                    
+                                    $dropdown.css({
+                                        'position': 'fixed',
+                                        'top': (containerRect.bottom) + 'px',
+                                        'left': containerRect.left + 'px',
+                                        'width': containerRect.width + 'px',
+                                        'z-index': 9999
+                                    });
+                                    
+                                    const $searchInput = $dropdown.find('.select2-search__field');
+                                    if ($searchInput.length) {
+                                        $searchInput.focus();
+                                    }
+                                }
+                            }, 1);
+                        });
                     } catch (e) {
                         console.error('Error initializing form fields:', e);
                     }
                 }
+                
                 submitButton.disabled = false;
             })
             .catch(error => {
@@ -345,7 +404,6 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
                                 return;
                             }
                             
-                            // Fallback: try to find the DataTable instance using jQuery
                             if (typeof $ !== 'undefined' && $.fn.DataTable) {
                                 const dataTable = $(`#${tableId}`).DataTable();
                                 if (dataTable) {
@@ -354,7 +412,6 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
                                 }
                             }
                             
-                            // Another fallback: use the DataTables API directly
                             if (typeof DataTable !== 'undefined') {
                                 const dataTable = new DataTable(`#${tableId}`);
                                 if (dataTable) {
@@ -423,13 +480,11 @@ function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
         
         initializeAllModals();
         
-        // Listen for proper DataTables draw events on any table
         $(document).on('draw.dt', function(e, settings) {
             
-            setTimeout(initializeAllModals, 100); // Small delay to ensure DOM is updated
+            setTimeout(initializeAllModals, 100); 
         });
         
-        // Also listen for other common events that might indicate table updates
         $(document).on('responsive-resize.dt responsive-display.dt', function(e, settings) {
             setTimeout(initializeAllModals, 50);
         });

From 6e8f3278a06e68fa76ca7c6f15b806f7992ddbbd Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Fri, 10 Oct 2025 17:43:31 +0100
Subject: [PATCH 13/24] add modal form

---
 .../Operations/CreateOperation.php            |  17 +-
 .../Operations/UpdateOperation.php            |  15 +
 src/app/Library/Support/DataformCache.php     | 219 ++++++
 src/app/View/Components/DataFormModal.php     |  44 ++
 src/app/View/Components/Dataform.php          |  43 +-
 src/resources/assets/css/common.css           |  15 +
 .../views/crud/buttons/create.blade.php       |  36 +-
 .../crud/buttons/create_modal_form.blade.php  |  26 +
 .../views/crud/buttons/update.blade.php       |  91 +--
 .../crud/buttons/update_modal_form.blade.php  |  49 ++
 .../dataform/modal-form-scripts.blade.php     | 650 ++++++++++++++++++
 .../components/dataform/modal-form.blade.php  | 464 +------------
 12 files changed, 1082 insertions(+), 587 deletions(-)
 create mode 100644 src/app/Library/Support/DataformCache.php
 create mode 100644 src/resources/views/crud/buttons/create_modal_form.blade.php
 create mode 100644 src/resources/views/crud/buttons/update_modal_form.blade.php
 create mode 100644 src/resources/views/crud/components/dataform/modal-form-scripts.blade.php

diff --git a/src/app/Http/Controllers/Operations/CreateOperation.php b/src/app/Http/Controllers/Operations/CreateOperation.php
index 06cbc3108e..7a959d1d22 100644
--- a/src/app/Http/Controllers/Operations/CreateOperation.php
+++ b/src/app/Http/Controllers/Operations/CreateOperation.php
@@ -43,6 +43,16 @@ protected function setupCreateDefaults()
         LifecycleHook::hookInto('list:before_setup', function () {
             $this->crud->addButton('top', 'create', 'view', 'crud::buttons.create');
         });
+
+        LifecycleHook::hookInto('list:after_setup', function () {
+            // Check if modal form is enabled and replace the button if needed
+            $useModalForm = $this->crud->get('create.createButtonWithModalForm') ?? config('backpack.operations.create.createButtonWithModalForm', false);
+            
+            if ($useModalForm) {
+                $this->crud->removeButton('create');
+                $this->crud->addButton('top', 'create', 'view', 'crud::buttons.create_modal_form', 'beginning');
+            }
+        });
     }
 
     /**
@@ -54,12 +64,17 @@ public function create()
     {
         $this->crud->hasAccessOrFail('create');
 
+        // Apply cached form setup if this is an AJAX request from a modal
+        if (request()->ajax() && request()->has('_form_id')) {
+            \Backpack\CRUD\app\Library\Support\DataformCache::applyFromRequest($this->crud);
+        }
+
         // prepare the fields you need to show
         $this->data['crud'] = $this->crud;
         $this->data['saveAction'] = $this->crud->getSaveAction();
         $this->data['title'] = $this->crud->getTitle() ?? trans('backpack::crud.add').' '.$this->crud->entity_name;
 
-        // load the view from /resources/views/vendor/backpack/crud/ if it exists, otherwise load the one in the package
+        // return the ajax response for modal forms, or the normal view for normal requests
         return  request()->ajax() ?
             view('crud::components.dataform.ajax_response', $this->data) :
             view($this->crud->getCreateView(), $this->data);
diff --git a/src/app/Http/Controllers/Operations/UpdateOperation.php b/src/app/Http/Controllers/Operations/UpdateOperation.php
index 8727e4205e..113d4a9fef 100644
--- a/src/app/Http/Controllers/Operations/UpdateOperation.php
+++ b/src/app/Http/Controllers/Operations/UpdateOperation.php
@@ -53,6 +53,16 @@ protected function setupUpdateDefaults()
         LifecycleHook::hookInto(['list:before_setup', 'show:before_setup'], function () {
             $this->crud->addButton('line', 'update', 'view', 'crud::buttons.update', 'end');
         });
+
+        LifecycleHook::hookInto(['list:after_setup', 'show:after_setup'], function () {
+            // Check if modal form is enabled and replace the button if needed
+            $useModalForm = $this->crud->get('update.updateButtonWithModalForm') ?? config('backpack.operations.update.updateButtonWithModalForm', false);
+            
+            if ($useModalForm) {
+                $this->crud->removeButton('update');
+                $this->crud->addButton('line', 'update', 'view', 'crud::buttons.update_modal_form', 'end');
+            }
+        });
     }
 
     /**
@@ -68,6 +78,11 @@ public function edit($id)
         // get entry ID from Request (makes sure its the last ID for nested resources)
         $id = $this->crud->getCurrentEntryId() ?? $id;
 
+        // Apply cached form setup if this is an AJAX request from a modal
+        if (request()->ajax() && request()->has('_form_id')) {
+            \Backpack\CRUD\app\Library\Support\DataformCache::applyFromRequest($this->crud);
+        }
+
         // register any Model Events defined on fields
         $this->crud->registerFieldEvents();
 
diff --git a/src/app/Library/Support/DataformCache.php b/src/app/Library/Support/DataformCache.php
new file mode 100644
index 0000000000..916fcc2e35
--- /dev/null
+++ b/src/app/Library/Support/DataformCache.php
@@ -0,0 +1,219 @@
+<?php
+
+namespace Backpack\CRUD\app\Library\Support;
+
+use Backpack\CRUD\app\Library\CrudPanel\CrudPanel;
+use Backpack\CRUD\app\Library\Widget;
+use Backpack\CRUD\CrudManager;
+
+final class DataformCache extends SetupCache
+{
+    public function __construct()
+    {
+        $this->cachePrefix = 'dataform_config_';
+        $this->cacheDuration = 60; // 1 hour
+    }
+
+    /**
+     * Cache setup closure for a dataform component.
+     *
+     * @param  string  $formId  The form ID to use as cache key
+     * @param  string  $controllerClass  The controller class
+     * @param  array  $fieldsConfig  The field configuration after setup was applied
+     * @param  string|null  $name  The element name
+     * @param  CrudPanel  $crud  The CRUD panel instance to update with form_id
+     * @return bool Whether the operation was successful
+     */
+    public function cacheForComponent(string $formId, string $controllerClass, array $fieldsConfig, ?string $name = null, ?CrudPanel $crud = null): bool
+    {
+        if (empty($fieldsConfig)) {
+            return false;
+        }
+
+        $cruds = CrudManager::getCrudPanels();
+        $parentCrud = reset($cruds);
+        
+        $parentEntry = null;
+        $parentController = null;
+
+        if ($parentCrud && $parentCrud->getCurrentEntry()) {
+            $parentEntry = $parentCrud->getCurrentEntry();
+            $parentController = $parentCrud->controller;
+        }
+
+        // Store metadata in cache (even without parent entry for standalone modal forms)
+        $this->store(
+            $formId,
+            $controllerClass,
+            $parentController,
+            $parentEntry,
+            $name
+        );
+        
+        // Store the field configuration in Laravel cache (persists across requests)
+        \Cache::put($this->cachePrefix . $formId . '_fields', $fieldsConfig, now()->addMinutes($this->cacheDuration));
+
+        // Set the form_id in the CRUD panel if provided
+        if ($crud) {
+            $crud->set('form.form_id', $formId);
+        }
+
+        return true;
+    }
+
+    public static function applyAndStoreSetupClosure(
+        string $formId,
+        string $controllerClass,
+        \Closure $setupClosure,
+        ?string $name = null,
+        ?CrudPanel $crud = null,
+        $parentEntry = null
+    ): bool {
+        $instance = new self();
+        // Apply the setup closure to the CrudPanel instance
+        if ($instance->applySetupClosure($crud, $controllerClass, $setupClosure, $parentEntry)) {
+            // Capture the resulting field configuration after setup
+            $fieldsAfterSetup = [];
+            foreach ($crud->fields() as $fieldName => $field) {
+                $fieldsAfterSetup[$fieldName] = $field;
+            }
+            
+            // Cache the field configuration (not the closure, since it won't persist across requests)
+            $cached = $instance->cacheForComponent($formId, $controllerClass, $fieldsAfterSetup, $name, $crud);
+            
+            return $cached;
+        }
+
+        return false;
+    }
+
+    /**
+     * Apply cached setup to a CRUD instance using the request's form_id.
+     *
+     * @param  CrudPanel  $crud  The CRUD panel instance
+     * @return bool Whether the operation was successful
+     */
+    public static function applyFromRequest(CrudPanel $crud): bool
+    {
+        $instance = new self();
+        // Check if the request has a _form_id parameter
+        $formId = request('_form_id');
+
+        if (! $formId) {
+            return false;
+        }
+
+        return $instance->apply($formId, $crud);
+    }
+
+    /**
+     * Apply a setup closure to a CrudPanel instance.
+     *
+     * @param  CrudPanel  $crud  The CRUD panel instance
+     * @param  string  $controllerClass  The controller class
+     * @param  \Closure  $setupClosure  The setup closure
+     * @param  mixed  $entry  The entry to pass to the setup closure
+     * @return bool Whether the operation was successful
+     */
+    public function applySetupClosure(CrudPanel $crud, string $controllerClass, \Closure $setupClosure, $entry = null): bool
+    {
+        $originalSetup = $setupClosure;
+        $modifiedSetup = function ($crud, $entry) use ($originalSetup, $controllerClass) {
+            CrudManager::setActiveController($controllerClass);
+
+            // Run the original closure
+            return ($originalSetup)($crud, $entry);
+        };
+
+        try {
+            // Execute the modified closure
+            ($modifiedSetup)($crud, $entry);
+
+            return true;
+        } catch (\Exception $e) {
+            return false;
+        } finally {
+            // Clean up
+            CrudManager::unsetActiveController();
+        }
+    }
+
+    /**
+     * Prepare dataform data for storage in the cache.
+     *
+     * @param  string  $controllerClass  The controller class
+     * @param  string  $parentController  The parent controller
+     * @param  mixed  $parentEntry  The parent entry
+     * @param  string|null  $elementName  The element name
+     * @return array The data to be cached
+     */
+    protected function prepareDataForStorage(...$args): array
+    {
+        [$controllerClass, $parentController, $parentEntry, $elementName] = $args;
+
+        return [
+            'controller' => $controllerClass,
+            'parentController' => $parentController,
+            'parent_entry' => $parentEntry,
+            'element_name' => $elementName,
+            'operations' => $parentController ? CrudManager::getInitializedOperations($parentController) : [],
+        ];
+    }
+
+    /**
+     * Apply data from the cache to configure a dataform.
+     *
+     * @param  array  $cachedData  The cached data
+     * @param  CrudPanel  $crud  The CRUD panel instance
+     * @return bool Whether the operation was successful
+     */
+    protected function applyFromCache($cachedData, ...$args): bool
+    {
+        [$crud] = $args;
+
+        try {
+            // Initialize operations for the parent controller (if it exists)
+            if (!empty($cachedData['parentController'])) {
+                $this->initializeOperations($cachedData['parentController'], $cachedData['operations']);
+            }
+            $entry = $cachedData['parent_entry'] ?? null;
+            
+            // Get the form_id from the cached data
+            $formId = $crud->get('form.form_id') ?? request()->input('_form_id');
+
+            // Retrieve the field configuration from Laravel cache
+            if ($formId) {
+                $fieldsConfig = \Cache::get($this->cachePrefix . $formId . '_fields');
+                
+                if ($fieldsConfig && is_array($fieldsConfig)) {
+                    // Clear all existing fields
+                    $crud->setOperationSetting('fields', []);
+                    
+                    // Restore the cached field configuration
+                    foreach ($fieldsConfig as $fieldName => $field) {
+                        $crud->addField($field);
+                    }
+                    
+                    return true;
+                }
+            }
+
+            return false;
+        } catch (\Exception $e) {
+            return false;
+        }
+    }
+
+    /**
+     * Initialize operations for a parent controller.
+     */
+    private function initializeOperations(string $parentController, $operations): void
+    {
+        $parentCrud = CrudManager::setupCrudPanel($parentController);
+
+        foreach ($operations as $operation) {
+            $parentCrud->initialized = false;
+            CrudManager::setupCrudPanel($parentController, $operation);
+        }
+    }
+}
diff --git a/src/app/View/Components/DataFormModal.php b/src/app/View/Components/DataFormModal.php
index 98d2872591..682b436629 100644
--- a/src/app/View/Components/DataFormModal.php
+++ b/src/app/View/Components/DataFormModal.php
@@ -23,6 +23,8 @@ class DataformModal extends DataForm
      * @param  string  $classes  CSS classes for the modal dialog
      * @param  bool  $refreshDatatable  Whether to refresh the datatable after form submission
      */
+    public string $hashedFormId;
+
     public function __construct(
         public string $controller,
         public string $id = 'backpack-form',
@@ -39,7 +41,47 @@ public function __construct(
         public string $classes = 'modal-dialog modal-lg',
         public bool $refreshDatatable = false,
     ) {
+        // Temporarily set up CRUD panel to get the route for hashed form ID generation
+        \Backpack\CRUD\CrudManager::setActiveController($controller);
+        $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($controller, $operation);
+        $action = $this->action ?? url($tempCrud->route);
+        \Backpack\CRUD\CrudManager::unsetActiveController();
+        
+        // Generate the SAME hashed form ID that the DataForm component uses
+        $this->hashedFormId = $this->id . md5($action . $this->operation . 'post' . $this->controller);
+        
+        // Cache the setup closure if provided (for retrieval during AJAX request)
+        if ($this->setup instanceof \Closure) {
+            $this->cacheSetupClosure();
+        }
+        
         parent::__construct($controller, $id, $name, $operation, $action, $method, $hasUploadFields, $entry, $setup, $focusOnFirstField);
+    
+        if($this->entry && $this->operation === 'update') {
+            $this->formRouteOperation = url($this->crud->route.'/'.$this->entry->getKey().'/edit');
+        }    
+    }
+
+    /**
+     * Cache the setup closure for later retrieval during AJAX form load.
+     */
+    protected function cacheSetupClosure(): void
+    {
+        // Create a temporary CRUD instance to apply and cache the setup
+        \Backpack\CRUD\CrudManager::setActiveController($this->controller);
+        $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($this->controller, $this->operation);
+        
+        // Apply and cache the setup closure using the HASHED ID
+        \Backpack\CRUD\app\Library\Support\DataformCache::applyAndStoreSetupClosure(
+            $this->hashedFormId,  // Use the hashed ID that matches what DataForm component generates
+            $this->controller,
+            $this->setup,
+            null,
+            $tempCrud,
+            null
+        );
+        
+        \Backpack\CRUD\CrudManager::unsetActiveController();
     }
 
     /**
@@ -60,6 +102,8 @@ public function render()
             'method' => $this->method,
             'title' => $this->title,
             'classes' => $this->classes,
+            'hashedFormId' => $this->hashedFormId,
+            'controller' => $this->controller,
         ]);
     }
 }
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index 62cae01c9a..d434bc0ad8 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -2,6 +2,7 @@
 
 namespace Backpack\CRUD\app\View\Components;
 
+use Backpack\CRUD\app\Library\Support\DataformCache;
 use Backpack\CRUD\CrudManager;
 use Closure;
 use Illuminate\View\Component;
@@ -37,7 +38,6 @@ public function __construct(
         $this->crud = CrudManager::setupCrudPanel($controller, $operation);
 
         $this->crud->setAutoFocusOnFirstField($this->focusOnFirstField);
-
         if ($this->entry && $this->operation === 'update') {
             $this->action = $action ?? url($this->crud->route.'/'.$this->entry->getKey());
             $this->method = 'put';
@@ -50,35 +50,36 @@ public function __construct(
         $this->id = $id.md5($this->action.$this->operation.$this->method.$this->controller);
 
         if ($this->setup) {
-            $this->applySetupClosure();
+            // Apply the configuration using DataformCache
+            DataformCache::applyAndStoreSetupClosure(
+                $this->id,
+                $this->controller,
+                $this->setup,
+                $this->name,
+                $this->crud,
+                $this->getParentCrudEntry()
+            );
         }
 
+        // Reset the active controller
         CrudManager::unsetActiveController();
     }
 
-    public function applySetupClosure(): bool
+    private function getParentCrudEntry()
     {
-        $originalSetup = $this->setup;
-        $controllerClass = $this->controller;
-        $crud = $this->crud;
-        $entry = $this->entry;
-
-        $modifiedSetup = function ($crud, $entry) use ($originalSetup, $controllerClass) {
-            CrudManager::setActiveController($controllerClass);
+        $cruds = CrudManager::getCrudPanels();
+        $parentCrud = reset($cruds);
 
-            // Run the original closure
-            return ($originalSetup)($crud, $entry);
-        };
+        if ($parentCrud && $parentCrud->getCurrentEntry()) {
+            CrudManager::storeInitializedOperation(
+                $parentCrud->controller,
+                $parentCrud->getCurrentOperation()
+            );
 
-        try {
-            // Execute the modified closure
-            ($modifiedSetup)($crud, $entry);
-
-            return true;
-        } finally {
-            // Clean up
-            CrudManager::unsetActiveController();
+            return $parentCrud->getCurrentEntry();
         }
+
+        return null;
     }
 
     /**
diff --git a/src/resources/assets/css/common.css b/src/resources/assets/css/common.css
index d73e2ef735..8d988d9ec0 100644
--- a/src/resources/assets/css/common.css
+++ b/src/resources/assets/css/common.css
@@ -124,6 +124,21 @@ div[id$="_wrapper"] .dt-processing {
     z-index: 999999 !important;
 }
 
+/* Ensure Select2 dropdowns are visible and properly positioned in all contexts */
+/* Bootstrap modals use z-index 1050-1055, so Select2 needs to be higher */
+.select2-container--open .select2-dropdown,
+.select2-dropdown {
+    z-index: 1060 !important;
+    position: fixed !important;
+}
+
+/* When Select2 is inside a modal, use absolute positioning to follow scroll */
+.modal .select2-container--open .select2-dropdown,
+.modal .select2-dropdown {
+    z-index: 1060 !important;
+    position: absolute !important;
+}
+
 .navbar-filters {
     min-height: 25px;
     border-radius: 0;
diff --git a/src/resources/views/crud/buttons/create.blade.php b/src/resources/views/crud/buttons/create.blade.php
index ba687eead2..1056708fdf 100644
--- a/src/resources/views/crud/buttons/create.blade.php
+++ b/src/resources/views/crud/buttons/create.blade.php
@@ -1,34 +1,6 @@
 @if ($crud->hasAccess('create'))
-    @php
-        $createButtonWithModalForm = $crud->getOperationSetting('createButtonWithModalForm', 'create') ?? false;
-        $controllerClass = get_class(app('request')->route()->getController());
-    @endphp
-    
-    @if($createButtonWithModalForm)
-        {{-- Create button that opens modal form --}}
-        <button 
-            type="button" 
-            class="btn btn-primary" 
-            data-bs-toggle="modal"
-            data-bs-target="#createModal{{ md5($controllerClass.'create') }}"
-            bp-button="create" 
-            data-style="zoom-in"
-        >
-            <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
-        </button>
-
-        {{-- Include the modal form component --}}
-        <x-backpack::dataform-modal
-            :controller="$controllerClass"
-            operation="create"
-            id="createModal{{ md5($controllerClass.'create') }}"
-            :title="trans('backpack::crud.add') . ' ' . $crud->entity_name"
-            refresh-datatable="true"
-        />
-    @else
-        {{-- Regular create button that redirects to create page --}}
-        <a href="{{ url($crud->route.'/create') }}" class="btn btn-primary" bp-button="create" data-style="zoom-in">
-            <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
-        </a>
-    @endif
+    {{-- Regular create button that redirects to create page --}}
+    <a href="{{ url($crud->route.'/create') }}" class="btn btn-primary" bp-button="create" data-style="zoom-in">
+        <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
+    </a>
 @endif
\ No newline at end of file
diff --git a/src/resources/views/crud/buttons/create_modal_form.blade.php b/src/resources/views/crud/buttons/create_modal_form.blade.php
new file mode 100644
index 0000000000..20368c3dbc
--- /dev/null
+++ b/src/resources/views/crud/buttons/create_modal_form.blade.php
@@ -0,0 +1,26 @@
+@if ($crud->hasAccess('create'))
+    @php
+        $controllerClass = get_class(app('request')->route()->getController());
+    @endphp
+    
+    {{-- Create button that opens modal form --}}
+    <button 
+        type="button" 
+        class="btn btn-primary" 
+        data-bs-toggle="modal"
+        data-bs-target="#createModal{{ md5($controllerClass.'create') }}"
+        bp-button="create" 
+        data-style="zoom-in"
+    >
+        <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
+    </button>
+
+    {{-- Include the modal form component --}}
+    <x-backpack::dataform-modal
+        :controller="$controllerClass"
+        operation="create"
+        id="createModal{{ md5($controllerClass.'create') }}"
+        :title="trans('backpack::crud.add') . ' ' . $crud->entity_name"
+        refresh-datatable="true"
+    />
+@endif
diff --git a/src/resources/views/crud/buttons/update.blade.php b/src/resources/views/crud/buttons/update.blade.php
index 435ca47eef..88b2d485d8 100644
--- a/src/resources/views/crud/buttons/update.blade.php
+++ b/src/resources/views/crud/buttons/update.blade.php
@@ -1,76 +1,25 @@
 @if ($crud->hasAccess('update', $entry))
-    @php
-        $updateButtonWithModalForm = $crud->getOperationSetting('updateButtonWithModalForm', 'update') ?? false;
-        $controllerClass = get_class(app('request')->route()->getController());
-    @endphp
-    
-    @if($updateButtonWithModalForm)
-        {{-- Update button that opens modal form --}}
-        @if (!$crud->model->translationEnabled())
-            <button 
-                type="button" 
-                class="btn btn-sm btn-link" 
-                data-bs-toggle="modal"
-                data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
-                bp-button="update"
-            >
-                <i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
-            </button>
-        @else
-            {{-- Edit button group for translated models --}}
-            <div class="btn-group">
-                <button 
-                    type="button" 
-                    class="btn btn-sm btn-link pr-0" 
-                    data-bs-toggle="modal"
-                    data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
-                >
-                    <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
-                </button>
-                <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-right">
-                    <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
-                    @foreach ($crud->model->getAvailableLocales() as $key => $locale)
-                        <li><a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a></li>
-                    @endforeach
-                </ul>
-            </div>
-        @endif
-
-        {{-- Include the modal form component --}}
-        <x-backpack::dataform-modal
-            :controller="$controllerClass"
-            operation="update"
-            :entry="$entry"
-            id="updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
-            :title="trans('backpack::crud.edit') . ' ' . $crud->entity_name"
-            refresh-datatable="true"
-        />
+    {{-- Regular update button that redirects to edit page --}}
+    @if (!$crud->model->translationEnabled())
+        {{-- Single edit button --}}
+        <a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" bp-button="update" class="btn btn-sm btn-link">
+            <i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
+        </a>
     @else
-        {{-- Regular update button that redirects to edit page --}}
-        @if (!$crud->model->translationEnabled())
-            {{-- Single edit button --}}
-            <a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" bp-button="update" class="btn btn-sm btn-link">
-                <i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
+        {{-- Edit button group --}}
+        <div class="btn-group">
+            <a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" class="btn btn-sm btn-link pr-0">
+                <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
             </a>
-        @else
-            {{-- Edit button group --}}
-            <div class="btn-group">
-                <a href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}" class="btn btn-sm btn-link pr-0">
-                    <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
-                </a>
-                <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-right">
-                    <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
-                    @foreach ($crud->model->getAvailableLocales() as $key => $locale)
-                        <a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a>
-                    @endforeach
-                </ul>
-            </div>
-        @endif
+            <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-right">
+                <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
+                @foreach ($crud->model->getAvailableLocales() as $key => $locale)
+                    <a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a>
+                @endforeach
+            </ul>
+        </div>
     @endif
 @endif
\ No newline at end of file
diff --git a/src/resources/views/crud/buttons/update_modal_form.blade.php b/src/resources/views/crud/buttons/update_modal_form.blade.php
new file mode 100644
index 0000000000..c0f52f3883
--- /dev/null
+++ b/src/resources/views/crud/buttons/update_modal_form.blade.php
@@ -0,0 +1,49 @@
+@if ($crud->hasAccess('update', $entry))
+    @php
+        $controllerClass = get_class(app('request')->route()->getController());
+    @endphp
+    
+    {{-- Update button that opens modal form --}}
+    @if (!$crud->model->translationEnabled())
+        <button 
+            type="button" 
+            class="btn btn-sm btn-link" 
+            data-bs-toggle="modal"
+            data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+            bp-button="update"
+        >
+            <i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
+        </button>
+    @else
+        {{-- Edit button group for translated models --}}
+        <div class="btn-group">
+            <button 
+                type="button" 
+                class="btn btn-sm btn-link pr-0" 
+                data-bs-toggle="modal"
+                data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+            >
+                <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
+            </button>
+            <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-right">
+                <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
+                @foreach ($crud->model->getAvailableLocales() as $key => $locale)
+                    <li><a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a></li>
+                @endforeach
+            </ul>
+        </div>
+    @endif
+
+    {{-- Include the modal form component --}}
+    <x-backpack::dataform-modal
+        :controller="$controllerClass"
+        operation="update"
+        :entry="$entry"
+        id="updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+        :title="trans('backpack::crud.edit') . ' ' . $crud->entity_name"
+        refresh-datatable="true"
+    />
+@endif
diff --git a/src/resources/views/crud/components/dataform/modal-form-scripts.blade.php b/src/resources/views/crud/components/dataform/modal-form-scripts.blade.php
new file mode 100644
index 0000000000..a845e9412a
--- /dev/null
+++ b/src/resources/views/crud/components/dataform/modal-form-scripts.blade.php
@@ -0,0 +1,650 @@
+<script>
+    if (typeof window.initializeFieldsWithJavascript === 'undefined') {
+        window.initializeFieldsWithJavascript = function(container) {
+            var selector;
+            if (container instanceof jQuery) {
+                selector = container;
+            } else {
+                selector = $(container);
+            }
+            
+            var fieldsToInit = selector.find("[data-init-function]").not("[data-initialized=true]");
+            
+            fieldsToInit.each(function () {
+                var element = $(this);
+                var functionName = element.data('init-function');
+
+                if (typeof window[functionName] === "function") {
+                    try {
+                        window[functionName](element);
+                        element.attr('data-initialized', 'true');
+                    } catch (error) {
+                        element.attr('data-initialized', 'true');
+                        console.error('[FieldInit] Error initializing field with function ' + functionName + ':', error);
+                    }
+                }
+            });
+        };
+    }
+
+    if (!window._select2FocusFixInstalled) {
+        document.addEventListener('focusin', function(e) {
+            if (e.target.classList.contains('select2-search__field') ||
+                e.target.closest('.select2-container') ||
+                e.target.closest('.select2-dropdown')) {
+                e.stopImmediatePropagation();
+            }
+        }, true);
+        
+        window._select2FocusFixInstalled = true;
+    }
+
+    if (!window._modalObservers) {
+        window._modalObservers = new Map();
+    }
+
+    /**
+     * Fix select2 fields to work properly in Bootstrap modals
+     * Ensures proper positioning even when modal is scrolled or field is in repeatable container
+     */
+    window.fixSelect2InModal = function($field) {
+        if (!$field.hasClass('select2-hidden-accessible')) {
+            return;
+        }
+        
+        const $modal = $field.closest('.modal');
+        if ($modal.length === 0) {
+            return;
+        }
+        
+        const select2Data = $field.data('select2');
+        if (!select2Data) {
+            return;
+        }
+        
+        const select2Options = select2Data.options.options;
+        const $dropdownParent = $(document.body);
+        
+        if (select2Options.dropdownParent && select2Options.dropdownParent[0] === document.body) {
+            attachSelect2PositioningFix($field, $modal);
+            return;
+        }
+        
+        $field.select2('destroy');
+        select2Options.dropdownParent = $dropdownParent;
+        $field.select2(select2Options);
+        
+        attachSelect2PositioningFix($field, $modal);
+    };
+    
+    /**
+     * Attach event handlers to fix Select2 dropdown positioning in modals
+     */
+    function attachSelect2PositioningFix($field, $modal) {
+        $field.off('select2:open.positionFix');
+        
+        $field.on('select2:open.positionFix', function() {
+            setTimeout(function() {
+                const $dropdown = $('.select2-dropdown:last');
+                if ($dropdown.length) {
+                    const modalZIndex = parseInt($modal.css('z-index')) || 1050;
+                    $dropdown.css('z-index', modalZIndex + 10);
+                    
+                    const $container = $field.next('.select2-container');
+                    if ($container.length) {
+                        const containerOffset = $container.offset();
+                        const containerHeight = $container.outerHeight();
+                        
+                        $dropdown.css({
+                            'top': (containerOffset.top + containerHeight) + 'px',
+                            'left': containerOffset.left + 'px',
+                            'width': $container.outerWidth() + 'px'
+                        });
+                    }
+                }
+            }, 1);
+        });
+    }
+
+    /**
+     * Set up MutationObserver for repeatable fields in a specific modal
+     * Watches for new rows and initializes their fields automatically
+     */
+    window.observeModalForRepeatable = function(modalElement) {
+        const modalId = modalElement.id;
+        
+        if (window._modalObservers.has(modalId)) {
+            return;
+        }
+
+        const modalBody = modalElement.querySelector('.modal-body');
+        if (!modalBody) {
+            return;
+        }
+
+        const processedRows = new Set();
+        
+        modalBody.querySelectorAll('.repeatable-element').forEach(row => {
+            const rowId = row.getAttribute('data-repeatable-holder') + '-' + row.getAttribute('data-row-number');
+            processedRows.add(rowId);
+        });
+
+        let debounceTimer;
+        const observer = new MutationObserver(() => {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                const allRows = modalBody.querySelectorAll('.repeatable-element');
+                
+                if (allRows.length === 0) return;
+                
+                allRows.forEach(row => {
+                    const rowId = row.getAttribute('data-repeatable-holder') + '-' + row.getAttribute('data-row-number');
+                    
+                    if (processedRows.has(rowId)) {
+                        return;
+                    }
+                    
+                    processedRows.add(rowId);
+                    
+                    row.querySelectorAll('[data-initialized="true"]').forEach(field => {
+                        field.removeAttribute('data-initialized');
+                    });
+                    
+                    const fieldsToInit = row.querySelectorAll('[data-init-function]:not([data-initialized="true"])');
+                    
+                    fieldsToInit.forEach(field => {
+                        const functionName = field.getAttribute('data-init-function');
+                        
+                        if (typeof window[functionName] === 'function') {
+                            try {
+                                window[functionName]($(field));
+                                field.setAttribute('data-initialized', 'true');
+                                
+                                if (functionName.includes('select2') || functionName.includes('Relationship')) {
+                                    setTimeout(() => {
+                                        const $field = $(field);
+                                        if ($field.hasClass('select2-hidden-accessible')) {
+                                            const select2Data = $field.data('select2');
+                                            if (select2Data) {
+                                                const oldOptions = select2Data.options.options;
+                                                const newOptions = $.extend({}, oldOptions, {
+                                                    dropdownParent: $(document.body)
+                                                });
+                                                
+                                                $field.select2('destroy');
+                                                $field.select2(newOptions);
+                                                
+                                                const $modal = $field.closest('.modal');
+                                                if ($modal.length) {
+                                                    attachSelect2PositioningFix($field, $modal);
+                                                }
+                                            }
+                                        }
+                                    }, 50);
+                                }
+                            } catch (error) {
+                                field.setAttribute('data-initialized', 'true');
+                                console.error('[RepeatableObserver] Error initializing field:', functionName, error);
+                            }
+                        }
+                    });
+                });
+            }, 100);
+        });
+
+        observer.observe(modalBody, {
+            childList: true,
+            subtree: true
+        });
+
+        window._modalObservers.set(modalId, observer);
+    };
+
+    /**
+     * Disconnect and remove observer for a modal
+     */
+    window.disconnectModalObserver = function(modalElement) {
+        const modalId = modalElement.id || modalElement.getAttribute('id');
+        
+        if (window._modalObservers.has(modalId)) {
+            const observer = window._modalObservers.get(modalId);
+            observer.disconnect();
+            window._modalObservers.delete(modalId);
+        }
+    };
+
+    window.initializeAllModals = function() {
+        const initializedModals = new Set();
+        
+        const modalTemplates = document.querySelectorAll('[id^="modalTemplate"]');
+        
+        modalTemplates.forEach(modalTemplate => {
+        const controllerId = modalTemplate.id.replace('modalTemplate', '');
+        const modalEl = modalTemplate.querySelector('.modal');
+        if(!modalEl) {
+            console.warn(`No modal found in template with ID ${modalTemplate.id}`);
+            return;
+        }
+        
+        const modalId = modalEl.id;
+        const modalKey = `${controllerId}-${modalId}`;
+        
+        if (initializedModals.has(modalKey)) {
+            modalTemplate.remove();
+            return;
+        }
+        
+        initializedModals.add(modalKey);
+        
+        const formContainer = document.getElementById(`modal-form-container${controllerId}`);
+        const submitButton = document.getElementById(`submitForm${controllerId}`);
+        if (!formContainer || !submitButton) {
+            console.warn(`Missing form elements for controller ID ${controllerId}`);
+            return;
+        }
+        
+        modalTemplate.classList.remove('d-none');
+        
+        if (!modalEl._loadHandler) {
+            modalEl._loadHandler = function() {
+                loadModalForm(controllerId, modalEl, formContainer, submitButton);
+            };
+            modalEl.addEventListener('shown.bs.modal', modalEl._loadHandler);
+        }
+
+        if (!modalEl._cleanupHandler) {
+            modalEl._cleanupHandler = function() {
+                disconnectModalObserver(modalEl);
+            };
+            modalEl.addEventListener('hidden.bs.modal', modalEl._cleanupHandler);
+        }
+        
+        if (!submitButton._saveHandler) {
+            submitButton._saveHandler = function() {
+                submitModalForm(controllerId, formContainer, submitButton, modalEl);
+            };
+            submitButton.addEventListener('click', submitButton._saveHandler);
+        }
+        
+        modalTemplate.setAttribute('data-initialized', 'true');
+        
+        if (typeof bootstrap !== 'undefined' && !bootstrap.Modal.getInstance(modalEl)) {
+            new bootstrap.Modal(modalEl);
+        }
+    });
+}
+    
+function loadModalForm(controllerId, modalEl, formContainer, submitButton) {
+    submitButton.disabled = true;
+    
+    if (formContainer && !formContainer.dataset.loaded) {
+        const formUrl = formContainer.dataset.formLoadRoute || modalEl.dataset.formLoadRoute || '';
+        const hashedFormId = modalEl.dataset.hashedFormId;
+        
+        const url = new URL(formUrl, window.location.origin);
+        url.searchParams.append('_form_id', hashedFormId);
+
+        fetch(url.toString(), {
+            method: 'GET',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            return response.text();
+        })
+        .then(data => {
+            formContainer.innerHTML = data;
+            formContainer.dataset.loaded = 'true';
+            
+            let html = data;
+            if (!html) {
+                submitButton.disabled = false;
+                return;
+            }
+
+            if (formContainer.dataset.hasUploadFields === 'true') {
+                html = html.replace(/<form /, '<form enctype="multipart/form-data" ');
+            }
+
+            const formAction = formContainer.dataset.formAction || '';
+            html = html.replace(/<form(\s+[^>]*?)(?:action="[^"]*")?([^>]*?)>/, (match, before, after) => {
+                return `<form${before} action="${formAction}"${after}>`;
+            });
+
+            formContainer.innerHTML = html;
+            formContainer.dataset.loaded = 'true';
+            
+            const scriptElements = formContainer.querySelectorAll('script');
+            const scriptsToLoad = [];
+            const inlineScripts = [];
+
+            scriptElements.forEach((scriptElement, index) => {
+                if (scriptElement.src) {
+                    const srcUrl = scriptElement.src;
+                    
+                    if (!document.querySelector(`script[src="${srcUrl}"]`)) {
+                        scriptsToLoad.push(new Promise((resolve, reject) => {
+                            const newScript = document.createElement('script');
+                            
+                            Array.from(scriptElement.attributes).forEach(attr => {
+                                newScript.setAttribute(attr.name, attr.value);
+                            });
+                            
+                            newScript.onload = () => {
+                                resolve();
+                            };
+                            newScript.onerror = (error) => {
+                                console.error('[ModalForm] Error loading external script:', srcUrl, error);
+                                reject(error);
+                            };
+                            
+                            document.head.appendChild(newScript);
+                        }));
+                    }
+                    
+                    scriptElement.parentNode.removeChild(scriptElement);
+                } else {
+                    const scriptContent = scriptElement.textContent;
+                    
+                    const scriptData = {
+                        content: scriptContent,
+                        attributes: Array.from(scriptElement.attributes)
+                    };
+                    inlineScripts.push(scriptData);
+                    
+                    scriptElement.parentNode.removeChild(scriptElement);
+                }
+            });
+    
+        Promise.all(scriptsToLoad)
+            .then(() => {
+                inlineScripts.forEach((scriptData, index) => {
+                    try {
+                        const newScript = document.createElement('script');
+                        
+                        scriptData.attributes.forEach(attr => {
+                            newScript.setAttribute(attr.name, attr.value);
+                        });
+                        
+                        const wrappedContent = `
+                            try {
+                                ${scriptData.content}
+                            } catch (error) {
+                                console.error('Error in inline script ${index + 1}:', error);
+                            }
+                        `;
+                        
+                        newScript.textContent = wrappedContent;
+                        
+                        document.head.appendChild(newScript);
+                    } catch (e) {
+                        console.error('[ModalForm] Error executing inline script ' + (index + 1) + ':', e);
+                    }
+                });
+                
+                if (typeof initializeFieldsWithJavascript === 'function') {
+                    try {
+                        initializeFieldsWithJavascript(modalEl);
+                        
+                        $(modalEl).find('select.select2-hidden-accessible').each(function() {
+                            fixSelect2InModal($(this));
+                        });
+                        
+                        setTimeout(() => {
+                            $(modalEl).find('.repeatable-element select.select2-hidden-accessible').each(function() {
+                                const $field = $(this);
+                                const select2Data = $field.data('select2');
+                                
+                                if (select2Data) {
+                                    const oldOptions = select2Data.options.options;
+                                    const newOptions = $.extend({}, oldOptions, {
+                                        dropdownParent: $(document.body)
+                                    });
+                                    
+                                    $field.select2('destroy');
+                                    $field.select2(newOptions);
+                                    
+                                    const $modal = $field.closest('.modal');
+                                    if ($modal.length) {
+                                        attachSelect2PositioningFix($field, $modal);
+                                    }
+                                }
+                            });
+                        }, 100);
+                        
+                        observeModalForRepeatable(modalEl);
+                        
+                        $(modalEl).find('select[data-field-is-inline="true"]').on('select2:open', function(e) {
+                            const $field = $(this);
+                            
+                            setTimeout(function() {
+                                const $container = $field.next('.select2-container--open');
+                                
+                                const $dropdown = $('.select2-dropdown:visible').last();
+                                
+                                if ($dropdown.length && $container.length) {
+                                    const containerRect = $container[0].getBoundingClientRect();
+                                    
+                                    $dropdown.css({
+                                        'position': 'fixed',
+                                        'top': (containerRect.bottom) + 'px',
+                                        'left': containerRect.left + 'px',
+                                        'width': containerRect.width + 'px',
+                                        'z-index': 9999
+                                    });
+                                    
+                                    const $searchInput = $dropdown.find('.select2-search__field');
+                                    if ($searchInput.length) {
+                                        $searchInput.focus();
+                                    }
+                                }
+                            }, 1);
+                        });
+                    } catch (e) {
+                        console.error('[ModalForm] Error initializing form fields:', e);
+                    }
+                } else {
+                    console.error('[ModalForm] initializeFieldsWithJavascript function not found!');
+                }
+                
+                submitButton.disabled = false;
+            })
+            .catch(error => {
+                console.error('[ModalForm] Error loading external scripts:', error);
+                submitButton.disabled = false;
+            });
+        
+        })
+        .catch(error => {
+            console.error('[ModalForm] Error fetching form:', error);
+            formContainer.innerHTML = '<div class="alert alert-danger">Error loading form. Please try again.</div>';
+            submitButton.disabled = false;
+        });
+    } else {
+        submitButton.disabled = false;
+    }
+}
+
+function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
+    const form = formContainer.querySelector('form');
+    if (!form) {
+        return; 
+    }
+
+    const errorsContainer = document.getElementById(`modal-form-errors${controllerId}`);
+    const errorsList = document.getElementById(`modal-form-errors-list${controllerId}`);
+
+    errorsContainer.classList.add('d-none');
+    errorsList.innerHTML = '';
+    form.querySelectorAll('.invalid-feedback').forEach(el => el.remove());
+    form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
+    
+    submitButton.disabled = true;
+
+    const formData = new FormData(form);
+    if (formContainer.dataset.formMethod) {
+        formData.set('_method', formContainer.dataset.formMethod);
+    }
+
+    fetch(form.action, {
+        method: 'POST',
+        body: formData,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'Accept': 'application/json',
+        }
+    })
+    .then(response => {
+        if (response.headers.get('content-type') && response.headers.get('content-type').includes('application/json')) {
+            return response.json().then(data => ({ ok: response.ok, data, status: response.status }));
+        }
+        return response.text().then(text => ({ ok: response.ok, data: text, status: response.status }));
+    })
+    .then(result => {
+        if (result.ok) {
+            new Noty({
+                type: 'success',
+                text: 'Entry saved successfully!',
+                timeout: 3000
+            }).show();
+            
+            try {
+                const bsModal = bootstrap.Modal.getInstance(modalEl);
+                if (bsModal) {
+                    bsModal.hide();
+                }
+            } catch (e) {
+                console.warn('Could not close modal automatically:', e);
+            }
+            
+            document.dispatchEvent(new CustomEvent(`FormModalSaved_${controllerId}`, {
+                detail: { controllerId: controllerId, response: result.data }
+            }));
+            
+            document.dispatchEvent(new CustomEvent('FormModalSaved', {
+                detail: { controllerId: controllerId, response: result.data }
+            }));
+
+            if(formContainer.dataset.refreshDatatable === 'true') {
+                setTimeout(function() {
+                    try {
+                        const triggerButtons = document.querySelectorAll(`[data-bs-target="#${modalEl.id}"], [data-target="#${modalEl.id}"]`);
+                        
+                        let closestTable = null;
+                        triggerButtons.forEach(button => {
+                            if (!closestTable) {
+                                closestTable = button.closest('table.crud-table, [id^="crudTable"], table[id*="Table"], .dataTables_wrapper table');
+                            }
+                        });
+                        
+                        if (!closestTable) {
+                            closestTable = document.querySelector('table.crud-table, [id^="crudTable"], table[id*="Table"], .dataTables_wrapper table, table.dataTable');
+                        }
+                        
+                        if (closestTable && closestTable.id) {
+                            const tableId = closestTable.id;
+                            
+                            if (window.crud && window.crud.tables && window.crud.tables[tableId]) {
+                                window.crud.tables[tableId].ajax.reload(null, false);
+                                return;
+                            }
+                            
+                            if (typeof $ !== 'undefined' && $.fn.DataTable) {
+                                const dataTable = $(`#${tableId}`).DataTable();
+                                if (dataTable) {
+                                    dataTable.ajax.reload(null, false);
+                                    return;
+                                }
+                            }
+                            
+                            if (typeof DataTable !== 'undefined') {
+                                const dataTable = new DataTable(`#${tableId}`);
+                                if (dataTable) {
+                                    dataTable.ajax.reload();
+                                }
+                            }
+                        }
+                    } catch (e) {
+                        try {
+                            if (typeof table !== 'undefined') {
+                                table.draw(false);
+                            }
+                        } catch (e2) { 
+                            console.warn('Could not refresh datatable:', e2);
+                        }
+                    }
+                }, 100);
+            }    
+            } else if (result.status === 422) {
+            errorsContainer.classList.remove('d-none');
+            
+            for (const field in result.data.errors) {
+                result.data.errors[field].forEach(message => {
+                    const li = document.createElement('li');
+                    li.textContent = message;
+                    errorsList.appendChild(li);
+                });
+                
+                const inputField = form.querySelector(`[name="${field}"]`);
+                if (inputField) {
+                    inputField.classList.add('is-invalid');
+                    
+                    const formGroup = inputField.closest('.form-group');
+                    if (formGroup) {
+                        result.data.errors[field].forEach(message => {
+                            const feedback = document.createElement('div');
+                            feedback.className = 'invalid-feedback d-block';
+                            feedback.textContent = message;
+                            formGroup.appendChild(feedback);
+                        });
+                    }
+                }
+            }
+        } else {
+            errorsContainer.classList.remove('d-none');
+            const li = document.createElement('li');
+            li.textContent = 'An error occurred while saving the form.';
+            errorsList.appendChild(li);
+        }
+        submitButton.disabled = false;
+    })
+    .catch(error => {
+        console.error('Form submission error:', error);
+        errorsContainer.classList.remove('d-none');
+        const li = document.createElement('li');
+        li.textContent = 'A network error occurred.';
+        errorsList.appendChild(li);
+        submitButton.disabled = false;
+    });
+}
+
+    $(document).ready(function() {
+        initializeAllModals();
+        
+        $(document).on('draw.dt', function(e, settings) {
+            setTimeout(initializeAllModals, 100); 
+        });
+        
+        $(document).on('responsive-resize.dt responsive-display.dt', function(e, settings) {
+            setTimeout(initializeAllModals, 50);
+        });
+        
+        $(document).on('DOMNodeInserted', function(e) {
+            if (e.target.nodeType === 1 && (
+                e.target.classList.contains('modal') ||
+                e.target.querySelector && e.target.querySelector('.modal') ||
+                e.target.classList.contains('crud-table') ||
+                e.target.querySelector && e.target.querySelector('table') ||
+                e.target.id && e.target.id.toLowerCase().includes('modal') ||
+                e.target.id && e.target.id.toLowerCase().includes('table')
+            )) {
+                setTimeout(initializeAllModals, 50);
+            }
+        });
+    });
+    
+    </script>
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index 7bf3956163..2a20f37b9a 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -10,7 +10,7 @@
 @if (!request()->ajax()) @endpush @endif
 @push('after_scripts') @if (request()->ajax()) @endpush @endif
     <div class="d-none" id="modalTemplate{{ md5($controller.$id) }}">
-        <div class="modal modal-blur fade" id="{{$id}}" tabindex="0" role="dialog" data-bs-backdrop="static" data-backdrop="static" aria-labelledby="formModalLabel{{ md5($controller.$id) }}" aria-hidden="true">
+        <div class="modal modal-blur fade" id="{{$id}}" tabindex="0" role="dialog" data-bs-backdrop="static" data-backdrop="static" aria-labelledby="formModalLabel{{ md5($controller.$id) }}" aria-hidden="true" data-hashed-form-id="{{ $hashedFormId }}">
             <div class="{{$classes}}" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -45,465 +45,5 @@
     </div>
 @if (!request()->ajax()) @endpush @endif
 @push('after_scripts') @if (request()->ajax()) @endpush @endif
-<script>
-    // Define initializeFieldsWithJavascript globally BEFORE modal content loads
-    if (typeof window.initializeFieldsWithJavascript === 'undefined') {
-        window.initializeFieldsWithJavascript = function(container) {
-            var selector;
-            if (container instanceof jQuery) {
-                selector = container;
-            } else {
-                selector = $(container);
-            }
-            
-            selector.find("[data-init-function]").not("[data-initialized=true]").each(function () {
-                var element = $(this);
-                var functionName = element.data('init-function');
-
-                if (typeof window[functionName] === "function") {
-                    window[functionName](element);
-                    // mark the element as initialized, so that its function is never called again
-                    element.attr('data-initialized', 'true');
-                }
-            });
-        };
-    }
-
-    if (!window._select2FocusFixInstalled) {
-        document.addEventListener('focusin', function(e) {
-            // Allow focus on Select2 elements even when modal is open
-            if (e.target.classList.contains('select2-search__field') ||
-                e.target.closest('.select2-container') ||
-                e.target.closest('.select2-dropdown')) {
-                e.stopImmediatePropagation();
-            }
-        }, true);
-        
-        window._select2FocusFixInstalled = true;
-    }
-
-    // Make initializeAllModals available globally
-    window.initializeAllModals = function() {
-
-        // First, track all initialized modals by their unique ID to avoid duplicates
-        const initializedModals = new Set();
-        
-        // Check for modal templates
-        const modalTemplates = document.querySelectorAll('[id^="modalTemplate"]');
-        
-        modalTemplates.forEach(modalTemplate => {
-        // Extract controller hash from the ID
-        const controllerId = modalTemplate.id.replace('modalTemplate', '');
-        const modalEl = modalTemplate.querySelector('.modal');
-        if(!modalEl) {
-            console.warn(`No modal found in template with ID ${modalTemplate.id}`);
-            return;
-        }
-        
-        const modalId = modalEl.id;
-        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
-        
-        // Create a unique key for this modal
-        const modalKey = `${controllerId}-${modalId}`;
-        
-        // Skip if we've already processed an identical modal in this batch
-        if (initializedModals.has(modalKey)) {
-            modalTemplate.remove(); // Remove duplicate
-            return;
-        }
-        
-        initializedModals.add(modalKey);
-        
-        // Get other elements
-        const formContainer = document.getElementById(`modal-form-container${controllerId}`);
-        const submitButton = document.getElementById(`submitForm${controllerId}`);
-        if (!formContainer || !submitButton) {
-            console.warn(`Missing form elements for controller ID ${controllerId}`);
-            return;
-        }
-        
-        // Make modal template visible (but modal stays hidden until triggered)
-        modalTemplate.classList.remove('d-none');
-        
-        // Only set up the event handlers if they don't exist yet
-        if (!modalEl._loadHandler) {
-            modalEl._loadHandler = function() {
-                
-                loadModalForm(controllerId, modalEl, formContainer, submitButton, scrollPosition);
-            };
-            modalEl.addEventListener('shown.bs.modal', modalEl._loadHandler);
-        }
-        
-        if (!submitButton._saveHandler) {
-            submitButton._saveHandler = function() {
-                submitModalForm(controllerId, formContainer, submitButton, modalEl);
-            };
-            submitButton.addEventListener('click', submitButton._saveHandler);
-        }
-        
-        // Mark as initialized
-        modalTemplate.setAttribute('data-initialized', 'true');
-        
-        // Initialize Bootstrap modal if it hasn't been initialized yet
-        if (typeof bootstrap !== 'undefined' && !bootstrap.Modal.getInstance(modalEl)) {
-            new bootstrap.Modal(modalEl);
-        }
-    });
-}
-    
-// Load form contents via AJAX
-function loadModalForm(controllerId, modalEl, formContainer, submitButton, scrollPosition) {
-    submitButton.disabled = true;
-    window.scrollTo(0, scrollPosition);
-    
-    if (formContainer && !formContainer.dataset.loaded) {
-        // Build URL from current path
-        const formUrl = formContainer.dataset.formLoadRoute || modalEl.dataset.formLoadRoute || '';
-
-        fetch(formUrl, {
-            method: 'GET',
-            headers: {
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        })
-        .then(response => {
-            
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-            return response.text();
-        })
-        .then(data => {
-            formContainer.innerHTML = data;
-            formContainer.dataset.loaded = 'true';
-            
-            // Check if form loaded properly
-            const loadedForm = formContainer.querySelector('form');
-            if (loadedForm) {
-                // Form loaded successfully
-            }
-            
-            // Process the loaded HTML
-            let html = data;
-            if (!html) {
-                submitButton.disabled = false;
-                return;
-            }
-
-            // add the enctype to the form if it has upload fields
-            if (formContainer.dataset.hasUploadFields === 'true') {
-                html = html.replace(/<form /, '<form enctype="multipart/form-data" ');
-            }
-
-            // Replace form action in the HTML
-            const formAction = formContainer.dataset.formAction || '';
-            html = html.replace(/<form(\s+[^>]*?)(?:action="[^"]*")?([^>]*?)>/, (match, before, after) => {
-                return `<form${before} action="${formAction}"${after}>`;
-            });
-
-            formContainer.innerHTML = html;
-            formContainer.dataset.loaded = 'true';
-            
-            // Handle any scripts that came with the response
-            const scriptElements = formContainer.querySelectorAll('script');
-            const scriptsToLoad = [];
-
-            scriptElements.forEach(scriptElement => {
-                if (scriptElement.src) {
-                    // For external scripts with src attribute
-                    const srcUrl = scriptElement.src;
-                    
-                    // Only load the script if it's not already loaded
-                    if (!document.querySelector(`script[src="${srcUrl}"]`)) {
-                        scriptsToLoad.push(new Promise((resolve, reject) => {
-                            const newScript = document.createElement('script');
-                            
-                            // Copy all attributes from the original script
-                            Array.from(scriptElement.attributes).forEach(attr => {
-                                newScript.setAttribute(attr.name, attr.value);
-                            });
-                            
-                            // Set up load and error handlers
-                            newScript.onload = resolve;
-                            newScript.onerror = reject;
-                            
-                            // Append to document to start loading
-                            document.head.appendChild(newScript);
-                        }));
-                    }
-                    
-                    // Remove the original script tag
-                    scriptElement.parentNode.removeChild(scriptElement);
-                } else {
-                    // For inline scripts
-                    const newScript = document.createElement('script');
-                    
-                    // Copy all attributes from the original script
-                    Array.from(scriptElement.attributes).forEach(attr => {
-                        newScript.setAttribute(attr.name, attr.value);
-                    });
-                    
-                    // Copy the content
-                    newScript.textContent = scriptElement.textContent;
-
-                    try {
-                        document.head.appendChild(newScript);
-                    }catch (e) {
-                        console.warn('Error appending inline script:', e);
-                    }
-                }
-            });
-    
-        // Wait for all external scripts to load before continuing
-        Promise.all(scriptsToLoad)
-            .then(() => {
-                // Initialize the form fields after all scripts are loaded
-                if (typeof initializeFieldsWithJavascript === 'function') {
-                    try {
-                        initializeFieldsWithJavascript(modalEl);
-                        
-                        $(modalEl).find('select[data-field-is-inline="true"]').on('select2:open', function(e) {
-                            const $field = $(this);
-                            
-                            setTimeout(function() {
-                                const $container = $field.next('.select2-container--open');
-                                
-                                const $dropdown = $('.select2-dropdown:visible').last();
-                                
-                                if ($dropdown.length && $container.length) {
-                                    const containerRect = $container[0].getBoundingClientRect();
-                                    
-                                    $dropdown.css({
-                                        'position': 'fixed',
-                                        'top': (containerRect.bottom) + 'px',
-                                        'left': containerRect.left + 'px',
-                                        'width': containerRect.width + 'px',
-                                        'z-index': 9999
-                                    });
-                                    
-                                    const $searchInput = $dropdown.find('.select2-search__field');
-                                    if ($searchInput.length) {
-                                        $searchInput.focus();
-                                    }
-                                }
-                            }, 1);
-                        });
-                    } catch (e) {
-                        console.error('Error initializing form fields:', e);
-                    }
-                }
-                
-                submitButton.disabled = false;
-            })
-            .catch(error => {
-                submitButton.disabled = false;
-            });
-        
-        });
-    }else{
-        submitButton.disabled = false;
-    }
-}
-
-// Handle form submission
-function submitModalForm(controllerId, formContainer, submitButton, modalEl) {
-    const form = formContainer.querySelector('form');
-    if (!form) {
-        return; 
-    }
-
-    const errorsContainer = document.getElementById(`modal-form-errors${controllerId}`);
-    const errorsList = document.getElementById(`modal-form-errors-list${controllerId}`);
-
-    // Clear previous errors
-    errorsContainer.classList.add('d-none');
-    errorsList.innerHTML = '';
-    form.querySelectorAll('.invalid-feedback').forEach(el => el.remove());
-    form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
-    
-    submitButton.disabled = true;
-
-    const formData = new FormData(form);
-    // change the form data _method to the one defined in the container
-    if (formContainer.dataset.formMethod) {
-        formData.set('_method', formContainer.dataset.formMethod);
-    }
-
-    // Submit form via AJAX
-    fetch(form.action, {
-        method: 'POST',
-        body: formData,
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'Accept': 'application/json',
-        }
-    })
-    .then(response => {
-        if (response.headers.get('content-type') && response.headers.get('content-type').includes('application/json')) {
-            return response.json().then(data => ({ ok: response.ok, data, status: response.status }));
-        }
-        return response.text().then(text => ({ ok: response.ok, data: text, status: response.status }));
-    })
-    .then(result => {
-        if (result.ok) {
-            
-            // Success
-            new Noty({
-                type: 'success',
-                text: 'Entry saved successfully!',
-                timeout: 3000
-            }).show();
-            
-            // Try to close the modal
-            try {
-                const bsModal = bootstrap.Modal.getInstance(modalEl);
-                if (bsModal) {
-                    bsModal.hide();
-                }
-            } catch (e) {
-                console.warn('Could not close modal automatically:', e);
-            }
-            
-            // Notify listeners with a specific event for this modal
-            document.dispatchEvent(new CustomEvent(`FormModalSaved_${controllerId}`, {
-                detail: { controllerId: controllerId, response: result.data }
-            }));
-            
-            // Also dispatch the general event for backward compatibility
-            document.dispatchEvent(new CustomEvent('FormModalSaved', {
-                detail: { controllerId: controllerId, response: result.data }
-            }));
-
-            // Reload the datatable if developer asked for it
-            if(formContainer.dataset.refreshDatatable === 'true') {
-                setTimeout(function() {
-                    try {
-                        // Find all possible modal trigger buttons using both old and new Bootstrap attributes
-                        const triggerButtons = document.querySelectorAll(`[data-bs-target="#${modalEl.id}"], [data-target="#${modalEl.id}"]`);
-                        
-                        // Find the closest table from any trigger button
-                        let closestTable = null;
-                        triggerButtons.forEach(button => {
-                            if (!closestTable) {
-                                closestTable = button.closest('table.crud-table, [id^="crudTable"], table[id*="Table"], .dataTables_wrapper table');
-                            }
-                        });
-                        
-                        // If no closest table found, try to find any CRUD or DataTable on the page
-                        if (!closestTable) {
-                            closestTable = document.querySelector('table.crud-table, [id^="crudTable"], table[id*="Table"], .dataTables_wrapper table, table.dataTable');
-                        }
-                        
-                        if (closestTable && closestTable.id) {
-                            // Try to get the DataTable instance for this specific table
-                            const tableId = closestTable.id;
-                            
-                            // Check if we have a global crud.tables object with this table
-                            if (window.crud && window.crud.tables && window.crud.tables[tableId]) {
-                                window.crud.tables[tableId].ajax.reload(null, false);
-                                return;
-                            }
-                            
-                            if (typeof $ !== 'undefined' && $.fn.DataTable) {
-                                const dataTable = $(`#${tableId}`).DataTable();
-                                if (dataTable) {
-                                    dataTable.ajax.reload(null, false);
-                                    return;
-                                }
-                            }
-                            
-                            if (typeof DataTable !== 'undefined') {
-                                const dataTable = new DataTable(`#${tableId}`);
-                                if (dataTable) {
-                                    dataTable.ajax.reload();
-                                }
-                            }
-                        }
-                    } catch (e) {
-                        try {
-                            // Final fallback: try any global table variable
-                            if (typeof table !== 'undefined') {
-                                table.draw(false);
-                            }
-                        } catch (e2) { 
-                            console.warn('Could not refresh datatable:', e2);
-                        }
-                    }
-                }, 100);
-            }    
-            } else if (result.status === 422) {
-            // Validation errors
-            errorsContainer.classList.remove('d-none');
-            
-            for (const field in result.data.errors) {
-                result.data.errors[field].forEach(message => {
-                    const li = document.createElement('li');
-                    li.textContent = message;
-                    errorsList.appendChild(li);
-                });
-                
-                const inputField = form.querySelector(`[name="${field}"]`);
-                if (inputField) {
-                    inputField.classList.add('is-invalid');
-                    
-                    const formGroup = inputField.closest('.form-group');
-                    if (formGroup) {
-                        result.data.errors[field].forEach(message => {
-                            const feedback = document.createElement('div');
-                            feedback.className = 'invalid-feedback d-block';
-                            feedback.textContent = message;
-                            formGroup.appendChild(feedback);
-                        });
-                    }
-                }
-            }
-        } else {
-            errorsContainer.classList.remove('d-none');
-            const li = document.createElement('li');
-            li.textContent = 'An error occurred while saving the form.';
-            errorsList.appendChild(li);
-        }
-        submitButton.disabled = false;
-    })
-    .catch(error => {
-        console.error('Form submission error:', error);
-        errorsContainer.classList.remove('d-none');
-        const li = document.createElement('li');
-        li.textContent = 'A network error occurred.';
-        errorsList.appendChild(li);
-        submitButton.disabled = false;
-    });
-}
-
-    // Initialize modals when the script loads
-    $(document).ready(function() {
-        
-        initializeAllModals();
-        
-        $(document).on('draw.dt', function(e, settings) {
-            
-            setTimeout(initializeAllModals, 100); 
-        });
-        
-        $(document).on('responsive-resize.dt responsive-display.dt', function(e, settings) {
-            setTimeout(initializeAllModals, 50);
-        });
-        
-        // Handle AJAX content updates
-        $(document).on('DOMNodeInserted', function(e) {
-            // Only trigger for significant DOM changes
-            if (e.target.nodeType === 1 && (
-                e.target.classList.contains('modal') ||
-                e.target.querySelector && e.target.querySelector('.modal') ||
-                e.target.classList.contains('crud-table') ||
-                e.target.querySelector && e.target.querySelector('table') ||
-                e.target.id && e.target.id.toLowerCase().includes('modal') ||
-                e.target.id && e.target.id.toLowerCase().includes('table')
-            )) {
-                setTimeout(initializeAllModals, 50);
-            }
-        });
-    });
-    
-    </script>
+    @include('crud::components.dataform.modal-form-scripts')
 @if (!request()->ajax()) @endpush @endif

From bbe5763e06f97d2726324bef7be412b12e3f2bfd Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Fri, 10 Oct 2025 16:43:47 +0000
Subject: [PATCH 14/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 .../Operations/CreateOperation.php            |  2 +-
 .../Operations/UpdateOperation.php            |  2 +-
 src/app/Library/Support/DataformCache.php     | 23 +++++++++----------
 src/app/View/Components/DataFormModal.php     | 18 +++++++--------
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/app/Http/Controllers/Operations/CreateOperation.php b/src/app/Http/Controllers/Operations/CreateOperation.php
index 7a959d1d22..38151e91bd 100644
--- a/src/app/Http/Controllers/Operations/CreateOperation.php
+++ b/src/app/Http/Controllers/Operations/CreateOperation.php
@@ -47,7 +47,7 @@ protected function setupCreateDefaults()
         LifecycleHook::hookInto('list:after_setup', function () {
             // Check if modal form is enabled and replace the button if needed
             $useModalForm = $this->crud->get('create.createButtonWithModalForm') ?? config('backpack.operations.create.createButtonWithModalForm', false);
-            
+
             if ($useModalForm) {
                 $this->crud->removeButton('create');
                 $this->crud->addButton('top', 'create', 'view', 'crud::buttons.create_modal_form', 'beginning');
diff --git a/src/app/Http/Controllers/Operations/UpdateOperation.php b/src/app/Http/Controllers/Operations/UpdateOperation.php
index 113d4a9fef..e2babfc020 100644
--- a/src/app/Http/Controllers/Operations/UpdateOperation.php
+++ b/src/app/Http/Controllers/Operations/UpdateOperation.php
@@ -57,7 +57,7 @@ protected function setupUpdateDefaults()
         LifecycleHook::hookInto(['list:after_setup', 'show:after_setup'], function () {
             // Check if modal form is enabled and replace the button if needed
             $useModalForm = $this->crud->get('update.updateButtonWithModalForm') ?? config('backpack.operations.update.updateButtonWithModalForm', false);
-            
+
             if ($useModalForm) {
                 $this->crud->removeButton('update');
                 $this->crud->addButton('line', 'update', 'view', 'crud::buttons.update_modal_form', 'end');
diff --git a/src/app/Library/Support/DataformCache.php b/src/app/Library/Support/DataformCache.php
index 916fcc2e35..cada11ce78 100644
--- a/src/app/Library/Support/DataformCache.php
+++ b/src/app/Library/Support/DataformCache.php
@@ -3,7 +3,6 @@
 namespace Backpack\CRUD\app\Library\Support;
 
 use Backpack\CRUD\app\Library\CrudPanel\CrudPanel;
-use Backpack\CRUD\app\Library\Widget;
 use Backpack\CRUD\CrudManager;
 
 final class DataformCache extends SetupCache
@@ -32,7 +31,7 @@ public function cacheForComponent(string $formId, string $controllerClass, array
 
         $cruds = CrudManager::getCrudPanels();
         $parentCrud = reset($cruds);
-        
+
         $parentEntry = null;
         $parentController = null;
 
@@ -49,9 +48,9 @@ public function cacheForComponent(string $formId, string $controllerClass, array
             $parentEntry,
             $name
         );
-        
+
         // Store the field configuration in Laravel cache (persists across requests)
-        \Cache::put($this->cachePrefix . $formId . '_fields', $fieldsConfig, now()->addMinutes($this->cacheDuration));
+        \Cache::put($this->cachePrefix.$formId.'_fields', $fieldsConfig, now()->addMinutes($this->cacheDuration));
 
         // Set the form_id in the CRUD panel if provided
         if ($crud) {
@@ -77,10 +76,10 @@ public static function applyAndStoreSetupClosure(
             foreach ($crud->fields() as $fieldName => $field) {
                 $fieldsAfterSetup[$fieldName] = $field;
             }
-            
+
             // Cache the field configuration (not the closure, since it won't persist across requests)
             $cached = $instance->cacheForComponent($formId, $controllerClass, $fieldsAfterSetup, $name, $crud);
-            
+
             return $cached;
         }
 
@@ -173,27 +172,27 @@ protected function applyFromCache($cachedData, ...$args): bool
 
         try {
             // Initialize operations for the parent controller (if it exists)
-            if (!empty($cachedData['parentController'])) {
+            if (! empty($cachedData['parentController'])) {
                 $this->initializeOperations($cachedData['parentController'], $cachedData['operations']);
             }
             $entry = $cachedData['parent_entry'] ?? null;
-            
+
             // Get the form_id from the cached data
             $formId = $crud->get('form.form_id') ?? request()->input('_form_id');
 
             // Retrieve the field configuration from Laravel cache
             if ($formId) {
-                $fieldsConfig = \Cache::get($this->cachePrefix . $formId . '_fields');
-                
+                $fieldsConfig = \Cache::get($this->cachePrefix.$formId.'_fields');
+
                 if ($fieldsConfig && is_array($fieldsConfig)) {
                     // Clear all existing fields
                     $crud->setOperationSetting('fields', []);
-                    
+
                     // Restore the cached field configuration
                     foreach ($fieldsConfig as $fieldName => $field) {
                         $crud->addField($field);
                     }
-                    
+
                     return true;
                 }
             }
diff --git a/src/app/View/Components/DataFormModal.php b/src/app/View/Components/DataFormModal.php
index 682b436629..df96c0bd7d 100644
--- a/src/app/View/Components/DataFormModal.php
+++ b/src/app/View/Components/DataFormModal.php
@@ -46,20 +46,20 @@ public function __construct(
         $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($controller, $operation);
         $action = $this->action ?? url($tempCrud->route);
         \Backpack\CRUD\CrudManager::unsetActiveController();
-        
+
         // Generate the SAME hashed form ID that the DataForm component uses
-        $this->hashedFormId = $this->id . md5($action . $this->operation . 'post' . $this->controller);
-        
+        $this->hashedFormId = $this->id.md5($action.$this->operation.'post'.$this->controller);
+
         // Cache the setup closure if provided (for retrieval during AJAX request)
         if ($this->setup instanceof \Closure) {
             $this->cacheSetupClosure();
         }
-        
+
         parent::__construct($controller, $id, $name, $operation, $action, $method, $hasUploadFields, $entry, $setup, $focusOnFirstField);
-    
-        if($this->entry && $this->operation === 'update') {
+
+        if ($this->entry && $this->operation === 'update') {
             $this->formRouteOperation = url($this->crud->route.'/'.$this->entry->getKey().'/edit');
-        }    
+        }
     }
 
     /**
@@ -70,7 +70,7 @@ protected function cacheSetupClosure(): void
         // Create a temporary CRUD instance to apply and cache the setup
         \Backpack\CRUD\CrudManager::setActiveController($this->controller);
         $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($this->controller, $this->operation);
-        
+
         // Apply and cache the setup closure using the HASHED ID
         \Backpack\CRUD\app\Library\Support\DataformCache::applyAndStoreSetupClosure(
             $this->hashedFormId,  // Use the hashed ID that matches what DataForm component generates
@@ -80,7 +80,7 @@ protected function cacheSetupClosure(): void
             $tempCrud,
             null
         );
-        
+
         \Backpack\CRUD\CrudManager::unsetActiveController();
     }
 

From 79b31f770d16fe3ba39f7c515133b98fde0012a4 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Mon, 13 Oct 2025 16:00:38 +0100
Subject: [PATCH 15/24] wip

---
 src/CrudPanelManager.php                          |  4 ++++
 src/app/Library/CrudPanel/Traits/Read.php         | 10 ++++++++--
 src/app/View/Components/Dataform.php              |  6 ++++++
 src/app/View/Components/Datatable.php             | 15 ++++++++++++---
 .../crud/components/datatable/datatable.blade.php |  4 ++--
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/CrudPanelManager.php b/src/CrudPanelManager.php
index 09a2b326ed..e9228ed7d1 100644
--- a/src/CrudPanelManager.php
+++ b/src/CrudPanelManager.php
@@ -102,6 +102,10 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
             return $this->cruds[$controller::class];
         }
 
+        if ($crud->getOperation() !== $operation) {
+            $crud->setOperation($operation);
+        }
+
         return $this->cruds[$controller::class];
     }
 
diff --git a/src/app/Library/CrudPanel/Traits/Read.php b/src/app/Library/CrudPanel/Traits/Read.php
index fa30de949d..a5d3b82bd1 100644
--- a/src/app/Library/CrudPanel/Traits/Read.php
+++ b/src/app/Library/CrudPanel/Traits/Read.php
@@ -275,8 +275,14 @@ public function getDefaultPageLength()
      */
     public function addCustomPageLengthToPageLengthMenu()
     {
-        $values = $this->getOperationSetting('pageLengthMenu')[0];
-        $labels = $this->getOperationSetting('pageLengthMenu')[1];
+        $pageLengthMenu = $this->getOperationSetting('pageLengthMenu');
+        
+        if (is_null($pageLengthMenu)) {
+            return;
+        }
+        
+        $values = $pageLengthMenu[0];
+        $labels = $pageLengthMenu[1];
 
         if (array_search($this->getDefaultPageLength(), $values) === false) {
             for ($i = 0; $i < count($values); $i++) {
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index d434bc0ad8..b63c80480e 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -36,8 +36,13 @@ public function __construct(
         CrudManager::setActiveController($controller);
 
         $this->crud = CrudManager::setupCrudPanel($controller, $operation);
+        
+        if ($this->crud->getOperation() !== $operation) {
+            $this->crud->setOperation($operation);
+        }
 
         $this->crud->setAutoFocusOnFirstField($this->focusOnFirstField);
+        
         if ($this->entry && $this->operation === 'update') {
             $this->action = $action ?? url($this->crud->route.'/'.$this->entry->getKey());
             $this->method = 'put';
@@ -46,6 +51,7 @@ public function __construct(
         } else {
             $this->action = $action ?? url($this->crud->route);
         }
+        
         $this->hasUploadFields = $this->crud->hasUploadFields($operation, $this->entry?->getKey());
         $this->id = $id.md5($this->action.$this->operation.$this->method.$this->controller);
 
diff --git a/src/app/View/Components/Datatable.php b/src/app/View/Components/Datatable.php
index b906c1be04..00499a2a05 100644
--- a/src/app/View/Components/Datatable.php
+++ b/src/app/View/Components/Datatable.php
@@ -22,11 +22,14 @@ public function __construct(
         CrudManager::setActiveController($controller);
 
         $this->crud ??= CrudManager::setupCrudPanel($controller, 'list');
+        
+        if ($this->crud->getOperation() !== 'list') {
+            $this->crud->setOperation('list');
+        }
 
         $this->tableId = $this->generateTableId();
 
-        if ($this->setup) {
-            // Apply the configuration using DatatableCache
+        if ($this->setup) {            // Apply the configuration using DatatableCache
             DatatableCache::applyAndStoreSetupClosure(
                 $this->tableId,
                 $this->controller,
@@ -38,7 +41,12 @@ public function __construct(
         }
 
         if (! $this->crud->has('list.datatablesUrl')) {
-            $this->crud->set('list.datatablesUrl', $this->crud->getRoute());
+            $route = $this->crud->getRoute();
+            // If route is not set, generate it from the controller
+            if (empty($route)) {
+                $route = action([$this->controller, 'index']);
+            }
+            $this->crud->set('list.datatablesUrl', $route);
         }
 
         // Reset the active controller
@@ -77,6 +85,7 @@ public function render()
             'crud' => $this->crud,
             'modifiesUrl' => $this->modifiesUrl,
             'tableId' => $this->tableId,
+            'datatablesUrl' => url($this->crud->get('list.datatablesUrl')),
         ]);
     }
 }
diff --git a/src/resources/views/crud/components/datatable/datatable.blade.php b/src/resources/views/crud/components/datatable/datatable.blade.php
index 953b79440e..0ad285d9cb 100644
--- a/src/resources/views/crud/components/datatable/datatable.blade.php
+++ b/src/resources/views/crud/components/datatable/datatable.blade.php
@@ -33,7 +33,7 @@
   @include('crud::inc.filters_navbar', ['componentId' => $tableId])
 @endif
 <div class="{{ backpack_theme_config('classes.tableWrapper') }}">
-<table
+  <table
       id="{{ $tableId }}"
       class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-hover nowrap rounded card-table table-vcenter card d-table shadow-xs border-xs' }} crud-table"
       data-responsive-table="{{ (int) $crud->getOperationSetting('responsiveTable') }}"
@@ -42,7 +42,7 @@ class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-h
       data-has-line-buttons-as-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdown') }}"
       data-line-buttons-as-dropdown-minimum="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownMinimum') }}"
       data-line-buttons-as-dropdown-show-before-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownShowBefore') }}"
-      data-url-start="{{ url($crud->getOperationSetting('datatablesUrl')) }}"
+      data-url-start="{{ $datatablesUrl }}"
       data-responsive-table="{{ $crud->getResponsiveTable() ? 'true' : 'false' }}"
       data-persistent-table="{{ $crud->getPersistentTable() ? 'true' : 'false' }}"
       data-persistent-table-slug="{{ Str::slug($crud->getOperationSetting('datatablesUrl')) }}"

From 60cfbd5ced950b3be5a18c7d3d672260a9cf945a Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Mon, 13 Oct 2025 15:00:56 +0000
Subject: [PATCH 16/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/app/Library/CrudPanel/Traits/Read.php | 4 ++--
 src/app/View/Components/Dataform.php      | 6 +++---
 src/app/View/Components/Datatable.php     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/Library/CrudPanel/Traits/Read.php b/src/app/Library/CrudPanel/Traits/Read.php
index a5d3b82bd1..4175e9f8ff 100644
--- a/src/app/Library/CrudPanel/Traits/Read.php
+++ b/src/app/Library/CrudPanel/Traits/Read.php
@@ -276,11 +276,11 @@ public function getDefaultPageLength()
     public function addCustomPageLengthToPageLengthMenu()
     {
         $pageLengthMenu = $this->getOperationSetting('pageLengthMenu');
-        
+
         if (is_null($pageLengthMenu)) {
             return;
         }
-        
+
         $values = $pageLengthMenu[0];
         $labels = $pageLengthMenu[1];
 
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index b63c80480e..0ff9ff0247 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -36,13 +36,13 @@ public function __construct(
         CrudManager::setActiveController($controller);
 
         $this->crud = CrudManager::setupCrudPanel($controller, $operation);
-        
+
         if ($this->crud->getOperation() !== $operation) {
             $this->crud->setOperation($operation);
         }
 
         $this->crud->setAutoFocusOnFirstField($this->focusOnFirstField);
-        
+
         if ($this->entry && $this->operation === 'update') {
             $this->action = $action ?? url($this->crud->route.'/'.$this->entry->getKey());
             $this->method = 'put';
@@ -51,7 +51,7 @@ public function __construct(
         } else {
             $this->action = $action ?? url($this->crud->route);
         }
-        
+
         $this->hasUploadFields = $this->crud->hasUploadFields($operation, $this->entry?->getKey());
         $this->id = $id.md5($this->action.$this->operation.$this->method.$this->controller);
 
diff --git a/src/app/View/Components/Datatable.php b/src/app/View/Components/Datatable.php
index 00499a2a05..45b41f55a4 100644
--- a/src/app/View/Components/Datatable.php
+++ b/src/app/View/Components/Datatable.php
@@ -22,7 +22,7 @@ public function __construct(
         CrudManager::setActiveController($controller);
 
         $this->crud ??= CrudManager::setupCrudPanel($controller, 'list');
-        
+
         if ($this->crud->getOperation() !== 'list') {
             $this->crud->setOperation('list');
         }

From 58336212ec388a13ec8c8192ceeefeadb2a2a708 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Wed, 15 Oct 2025 12:12:05 +0100
Subject: [PATCH 17/24] wip

---
 src/CrudPanelManager.php                      | 45 +++++++++++++++----
 src/app/Library/CrudPanel/Traits/Columns.php  |  4 +-
 .../Contracts/IsolatesOperationSetup.php      | 29 ++++++++++++
 src/app/View/Components/DataFormModal.php     | 37 +++++++++++----
 src/app/View/Components/Dataform.php          | 24 +++++-----
 src/app/View/Components/Datatable.php         | 12 ++++-
 .../crud/buttons/create_modal_form.blade.php  |  1 +
 .../components/dataform/modal-form.blade.php  |  2 +-
 8 files changed, 120 insertions(+), 34 deletions(-)
 create mode 100644 src/app/View/Components/Contracts/IsolatesOperationSetup.php

diff --git a/src/CrudPanelManager.php b/src/CrudPanelManager.php
index e9228ed7d1..e0852bb1ca 100644
--- a/src/CrudPanelManager.php
+++ b/src/CrudPanelManager.php
@@ -71,6 +71,20 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
 
         $primaryControllerRequest = $this->cruds[array_key_first($this->cruds)]->getRequest();
 
+        if ($crud->isInitialized() && $crud->getOperation() !== $operation && !$shouldIsolate) {
+            self::setActiveController($controller::class);
+
+            $crud->setOperation($operation);
+            $this->setupSpecificOperation($controller, $operation, $crud);
+
+            // Mark this operation as initialized
+            $this->storeInitializedOperation($controller::class, $operation);
+
+            self::unsetActiveController();
+
+            return $this->cruds[$controller::class];
+        }
+
         // Check if we need to initialize this specific operation
         if (! $crud->isInitialized() || ! $this->isOperationInitialized($controller::class, $operation)) {
             self::setActiveController($controller::class);
@@ -102,10 +116,8 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
             return $this->cruds[$controller::class];
         }
 
-        if ($crud->getOperation() !== $operation) {
-            $crud->setOperation($operation);
-        }
-
+        // If we reach here, the panel and operation are both initialized
+        // and the operation matches what was requested, so just return it
         return $this->cruds[$controller::class];
     }
 
@@ -124,14 +136,27 @@ private function shouldIsolateOperation(string $controller, string $operation):
         }
 
         $currentOperation = $currentCrud->getOperation();
+        
+        // If operations don't differ, no need to isolate
+        if (!$currentOperation || $currentOperation === $operation) {
+            return false;
+        }
 
-        // Always isolate when switching between different operations
-        // This prevents any operation from interfering with another operation's state
-        if ($currentOperation && $currentOperation !== $operation) {
-            return true;
+        // Check backtrace for components implementing IsolatesOperationSetup
+        $backtrace = debug_backtrace(DEBUG_BACKTRACE_PROVIDE_OBJECT, 10);
+        
+        foreach ($backtrace as $trace) {
+            if (isset($trace['object'])) {
+                $object = $trace['object'];
+                
+                // If we find a component that implements the interface, use its declared behavior
+                if ($object instanceof \Backpack\CRUD\app\View\Components\Contracts\IsolatesOperationSetup) {
+                    return $object->shouldIsolateOperationSetup();
+                }
+            }
         }
 
-        return false;
+        return true;
     }
 
     /**
@@ -272,6 +297,8 @@ private function setupSpecificOperation($controller, string $operation, CrudPane
         // Setup the specific operation using the existing CrudController infrastructure
         $crud->setOperation($operation);
 
+        $controller->setup();
+
         // Use the controller's own method to setup the operation properly
         $reflection = new \ReflectionClass($controller);
         $method = $reflection->getMethod('setupConfigurationForCurrentOperation');
diff --git a/src/app/Library/CrudPanel/Traits/Columns.php b/src/app/Library/CrudPanel/Traits/Columns.php
index eccb24d53a..74b3bb75be 100644
--- a/src/app/Library/CrudPanel/Traits/Columns.php
+++ b/src/app/Library/CrudPanel/Traits/Columns.php
@@ -21,9 +21,7 @@ trait Columns
     public function columns()
     {
         return $this->getOperationSetting('columns') ?? [];
-    }
-
-    /**
+    }    /**
      * Add a bunch of column names and their details to the CRUD object.
      *
      * @param  array|string  $columns
diff --git a/src/app/View/Components/Contracts/IsolatesOperationSetup.php b/src/app/View/Components/Contracts/IsolatesOperationSetup.php
new file mode 100644
index 0000000000..8630694d08
--- /dev/null
+++ b/src/app/View/Components/Contracts/IsolatesOperationSetup.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Backpack\CRUD\app\View\Components\Contracts;
+
+/**
+ * Interface for Backpack components that need to control operation isolation behavior.
+ * 
+ * Components implementing this interface can declare whether the CRUD panel should
+ * isolate their operation setup from the parent context.
+ * 
+ * Use cases:
+ * - Modal forms: Isolate setup to prevent affecting the parent view's operation state
+ * - Standalone forms: Don't isolate, can switch operations permanently
+ * - Datatables: Don't isolate, manage their own operation state
+ */
+interface IsolatesOperationSetup
+{
+    /**
+     * Determine if this component's operation setup should be isolated.
+     * 
+     * When true, the CrudPanelManager will create a temporary isolated context
+     * for this component's operation setup, preserving the parent operation state.
+     * 
+     * When false, the component is allowed to permanently switch the operation.
+     * 
+     * @return bool True if operation should be isolated, false otherwise
+     */
+    public function shouldIsolateOperationSetup(): bool;
+}
diff --git a/src/app/View/Components/DataFormModal.php b/src/app/View/Components/DataFormModal.php
index df96c0bd7d..dafcff7f40 100644
--- a/src/app/View/Components/DataFormModal.php
+++ b/src/app/View/Components/DataFormModal.php
@@ -2,10 +2,19 @@
 
 namespace Backpack\CRUD\app\View\Components;
 
+use Backpack\CRUD\app\View\Components\Contracts\IsolatesOperationSetup;
 use Closure;
 
-class DataformModal extends DataForm
+class DataformModal extends DataForm implements IsolatesOperationSetup
 {
+    /**
+     * Modal forms ALWAYS isolate their operation setup.
+     * This prevents them from affecting the parent view's operation state.
+     */
+    public function shouldIsolateOperationSetup(): bool
+    {
+        return true;
+    }
     /**
      * Create a new component instance.
      *
@@ -27,6 +36,7 @@ class DataformModal extends DataForm
 
     public function __construct(
         public string $controller,
+        public ?string $route = null, // Accept route as an optional parameter
         public string $id = 'backpack-form',
         public string $operation = 'create',
         public string $name = '',
@@ -41,11 +51,17 @@ public function __construct(
         public string $classes = 'modal-dialog modal-lg',
         public bool $refreshDatatable = false,
     ) {
-        // Temporarily set up CRUD panel to get the route for hashed form ID generation
-        \Backpack\CRUD\CrudManager::setActiveController($controller);
-        $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($controller, $operation);
-        $action = $this->action ?? url($tempCrud->route);
-        \Backpack\CRUD\CrudManager::unsetActiveController();
+        // If route is not provided (e.g., when rendering via AJAX), get it from CRUD panel
+        if ($this->route === null) {
+            \Backpack\CRUD\CrudManager::setActiveController($controller);
+            $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($controller, $operation);
+            $this->route = $tempCrud->route;
+            \Backpack\CRUD\CrudManager::unsetActiveController();
+        }
+
+        // Use the provided/resolved route instead of calling setupCrudPanel on every render
+        // This avoids operation switching during page load when route is provided
+        $action = $this->action ?? url($this->route);
 
         // Generate the SAME hashed form ID that the DataForm component uses
         $this->hashedFormId = $this->id.md5($action.$this->operation.'post'.$this->controller);
@@ -55,10 +71,11 @@ public function __construct(
             $this->cacheSetupClosure();
         }
 
-        parent::__construct($controller, $id, $name, $operation, $action, $method, $hasUploadFields, $entry, $setup, $focusOnFirstField);
+        // DO NOT call parent::__construct() because we don't want to initialize
+        // the CRUD panel on page load - the form will be loaded via AJAX
 
         if ($this->entry && $this->operation === 'update') {
-            $this->formRouteOperation = url($this->crud->route.'/'.$this->entry->getKey().'/edit');
+            $this->formRouteOperation = url($action.'/'.$this->entry->getKey().'/edit');
         }
     }
 
@@ -91,8 +108,9 @@ protected function cacheSetupClosure(): void
      */
     public function render()
     {
+        // We don't need $crud here because the modal loads the form via AJAX
+        // The CRUD panel will be initialized when the AJAX request is made
         return view('crud::components.dataform.modal-form', [
-            'crud' => $this->crud,
             'id' => $this->id,
             'operation' => $this->operation,
             'formRouteOperation' => $this->formRouteOperation,
@@ -104,6 +122,7 @@ public function render()
             'classes' => $this->classes,
             'hashedFormId' => $this->hashedFormId,
             'controller' => $this->controller,
+            'route' => $this->route, // Pass the route for building URLs in the template
         ]);
     }
 }
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index b63c80480e..a97f422365 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -2,15 +2,24 @@
 
 namespace Backpack\CRUD\app\View\Components;
 
-use Backpack\CRUD\app\Library\Support\DataformCache;
+use Backpack\CRUD\app\View\Components\Contracts\IsolatesOperationSetup;
 use Backpack\CRUD\CrudManager;
 use Closure;
 use Illuminate\View\Component;
 
-class Dataform extends Component
+class Dataform extends Component implements IsolatesOperationSetup
 {
     public $crud;
 
+    /**
+     * Standalone forms do NOT isolate their operation setup.
+     * They are allowed to permanently switch operations.
+     */
+    public function shouldIsolateOperationSetup(): bool
+    {
+        return false;
+    }
+
     /**
      * Create a new component instance.
      *
@@ -56,15 +65,8 @@ public function __construct(
         $this->id = $id.md5($this->action.$this->operation.$this->method.$this->controller);
 
         if ($this->setup) {
-            // Apply the configuration using DataformCache
-            DataformCache::applyAndStoreSetupClosure(
-                $this->id,
-                $this->controller,
-                $this->setup,
-                $this->name,
-                $this->crud,
-                $this->getParentCrudEntry()
-            );
+            $parentEntry = $this->getParentCrudEntry();
+            call_user_func($this->setup, $this->crud, $parentEntry);
         }
 
         // Reset the active controller
diff --git a/src/app/View/Components/Datatable.php b/src/app/View/Components/Datatable.php
index 00499a2a05..8897ba31f2 100644
--- a/src/app/View/Components/Datatable.php
+++ b/src/app/View/Components/Datatable.php
@@ -4,13 +4,23 @@
 
 use Backpack\CRUD\app\Library\CrudPanel\CrudPanel;
 use Backpack\CRUD\app\Library\Support\DatatableCache;
+use Backpack\CRUD\app\View\Components\Contracts\IsolatesOperationSetup;
 use Backpack\CRUD\CrudManager;
 use Illuminate\View\Component;
 
-class Datatable extends Component
+class Datatable extends Component implements IsolatesOperationSetup
 {
     protected string $tableId;
 
+    /**
+     * Datatables do NOT isolate their operation setup.
+     * They manage their own operation state independently.
+     */
+    public function shouldIsolateOperationSetup(): bool
+    {
+        return false;
+    }
+
     public function __construct(
         private string $controller,
         private ?CrudPanel $crud = null,
diff --git a/src/resources/views/crud/buttons/create_modal_form.blade.php b/src/resources/views/crud/buttons/create_modal_form.blade.php
index 20368c3dbc..620a9f2a47 100644
--- a/src/resources/views/crud/buttons/create_modal_form.blade.php
+++ b/src/resources/views/crud/buttons/create_modal_form.blade.php
@@ -21,6 +21,7 @@ class="btn btn-primary"
         operation="create"
         id="createModal{{ md5($controllerClass.'create') }}"
         :title="trans('backpack::crud.add') . ' ' . $crud->entity_name"
+        :route="$crud->route"
         refresh-datatable="true"
     />
 @endif
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index 2a20f37b9a..190cc2a9a7 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -2,7 +2,7 @@
 @php
     if(isset($formRouteOperation)) {
         if(!\Str::isUrl($formRouteOperation)) {
-            $formRouteOperation = url($crud->route . '/' . $formRouteOperation);
+            $formRouteOperation = url($route . '/' . $formRouteOperation);
         }
     }
 @endphp

From f294e9a27a6b0cd36398ff0fa9d1759998f49e9e Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Wed, 15 Oct 2025 11:12:28 +0000
Subject: [PATCH 18/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/CrudPanelManager.php                               | 10 +++++-----
 src/app/Library/CrudPanel/Traits/Columns.php           |  4 +++-
 .../Components/Contracts/IsolatesOperationSetup.php    | 10 +++++-----
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/CrudPanelManager.php b/src/CrudPanelManager.php
index e0852bb1ca..d068069c08 100644
--- a/src/CrudPanelManager.php
+++ b/src/CrudPanelManager.php
@@ -71,7 +71,7 @@ public function setupCrudPanel(string $controller, ?string $operation = null): C
 
         $primaryControllerRequest = $this->cruds[array_key_first($this->cruds)]->getRequest();
 
-        if ($crud->isInitialized() && $crud->getOperation() !== $operation && !$shouldIsolate) {
+        if ($crud->isInitialized() && $crud->getOperation() !== $operation && ! $shouldIsolate) {
             self::setActiveController($controller::class);
 
             $crud->setOperation($operation);
@@ -136,19 +136,19 @@ private function shouldIsolateOperation(string $controller, string $operation):
         }
 
         $currentOperation = $currentCrud->getOperation();
-        
+
         // If operations don't differ, no need to isolate
-        if (!$currentOperation || $currentOperation === $operation) {
+        if (! $currentOperation || $currentOperation === $operation) {
             return false;
         }
 
         // Check backtrace for components implementing IsolatesOperationSetup
         $backtrace = debug_backtrace(DEBUG_BACKTRACE_PROVIDE_OBJECT, 10);
-        
+
         foreach ($backtrace as $trace) {
             if (isset($trace['object'])) {
                 $object = $trace['object'];
-                
+
                 // If we find a component that implements the interface, use its declared behavior
                 if ($object instanceof \Backpack\CRUD\app\View\Components\Contracts\IsolatesOperationSetup) {
                     return $object->shouldIsolateOperationSetup();
diff --git a/src/app/Library/CrudPanel/Traits/Columns.php b/src/app/Library/CrudPanel/Traits/Columns.php
index 74b3bb75be..eccb24d53a 100644
--- a/src/app/Library/CrudPanel/Traits/Columns.php
+++ b/src/app/Library/CrudPanel/Traits/Columns.php
@@ -21,7 +21,9 @@ trait Columns
     public function columns()
     {
         return $this->getOperationSetting('columns') ?? [];
-    }    /**
+    }
+
+    /**
      * Add a bunch of column names and their details to the CRUD object.
      *
      * @param  array|string  $columns
diff --git a/src/app/View/Components/Contracts/IsolatesOperationSetup.php b/src/app/View/Components/Contracts/IsolatesOperationSetup.php
index 8630694d08..7f905616bd 100644
--- a/src/app/View/Components/Contracts/IsolatesOperationSetup.php
+++ b/src/app/View/Components/Contracts/IsolatesOperationSetup.php
@@ -4,10 +4,10 @@
 
 /**
  * Interface for Backpack components that need to control operation isolation behavior.
- * 
+ *
  * Components implementing this interface can declare whether the CRUD panel should
  * isolate their operation setup from the parent context.
- * 
+ *
  * Use cases:
  * - Modal forms: Isolate setup to prevent affecting the parent view's operation state
  * - Standalone forms: Don't isolate, can switch operations permanently
@@ -17,12 +17,12 @@ interface IsolatesOperationSetup
 {
     /**
      * Determine if this component's operation setup should be isolated.
-     * 
+     *
      * When true, the CrudPanelManager will create a temporary isolated context
      * for this component's operation setup, preserving the parent operation state.
-     * 
+     *
      * When false, the component is allowed to permanently switch the operation.
-     * 
+     *
      * @return bool True if operation should be isolated, false otherwise
      */
     public function shouldIsolateOperationSetup(): bool;

From 524debf45a121a9c71778187609b0fe9db7c43a3 Mon Sep 17 00:00:00 2001
From: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
Date: Thu, 16 Oct 2025 13:16:03 +0300
Subject: [PATCH 19/24] fix DataformModal naming

---
 src/app/View/Components/{DataFormModal.php => DataformModal.php} | 1 +
 1 file changed, 1 insertion(+)
 rename src/app/View/Components/{DataFormModal.php => DataformModal.php} (99%)

diff --git a/src/app/View/Components/DataFormModal.php b/src/app/View/Components/DataformModal.php
similarity index 99%
rename from src/app/View/Components/DataFormModal.php
rename to src/app/View/Components/DataformModal.php
index dafcff7f40..ba76111425 100644
--- a/src/app/View/Components/DataFormModal.php
+++ b/src/app/View/Components/DataformModal.php
@@ -15,6 +15,7 @@ public function shouldIsolateOperationSetup(): bool
     {
         return true;
     }
+
     /**
      * Create a new component instance.
      *

From 3dcef896927a1b3b4038fbed9828da262061aad7 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Thu, 16 Oct 2025 16:08:59 +0100
Subject: [PATCH 20/24] wip

---
 .../Operations/CreateOperation.php            |  8 +-
 .../Operations/UpdateOperation.php            |  8 +-
 src/app/Library/Support/DataformCache.php     | 10 +--
 src/app/View/Components/Dataform.php          |  4 +-
 src/app/View/Components/DataformModal.php     | 34 ++------
 .../crud/buttons/create_in_modal.blade.php    | 27 ++++++
 .../crud/buttons/update_in_modal.blade.php    | 49 +++++++++++
 .../dataform/ajax_response.blade.php          | 72 +---------------
 .../components/dataform/common_js.blade.php   | 86 +++++++++++++++++++
 .../dataform/form_content.blade.php           |  2 +-
 .../dataform/modal-form-scripts.blade.php     | 42 +--------
 .../components/dataform/modal-form.blade.php  | 10 +--
 .../views/crud/form_content.blade.php         | 65 +-------------
 13 files changed, 192 insertions(+), 225 deletions(-)
 create mode 100644 src/resources/views/crud/buttons/create_in_modal.blade.php
 create mode 100644 src/resources/views/crud/buttons/update_in_modal.blade.php
 create mode 100644 src/resources/views/crud/components/dataform/common_js.blade.php

diff --git a/src/app/Http/Controllers/Operations/CreateOperation.php b/src/app/Http/Controllers/Operations/CreateOperation.php
index 38151e91bd..d0aeb47b8c 100644
--- a/src/app/Http/Controllers/Operations/CreateOperation.php
+++ b/src/app/Http/Controllers/Operations/CreateOperation.php
@@ -50,7 +50,7 @@ protected function setupCreateDefaults()
 
             if ($useModalForm) {
                 $this->crud->removeButton('create');
-                $this->crud->addButton('top', 'create', 'view', 'crud::buttons.create_modal_form', 'beginning');
+                $this->crud->addButton('top', 'create', 'view', 'crud::buttons.create_in_modal', 'beginning');
             }
         });
     }
@@ -65,8 +65,8 @@ public function create()
         $this->crud->hasAccessOrFail('create');
 
         // Apply cached form setup if this is an AJAX request from a modal
-        if (request()->ajax() && request()->has('_form_id')) {
-            \Backpack\CRUD\app\Library\Support\DataformCache::applyFromRequest($this->crud);
+        if (request()->ajax() && request()->has('_modal_form_id')) {
+            \Backpack\CRUD\app\Library\Support\DataformCache::applySetupClosure($this->crud);
         }
 
         // prepare the fields you need to show
@@ -75,7 +75,7 @@ public function create()
         $this->data['title'] = $this->crud->getTitle() ?? trans('backpack::crud.add').' '.$this->crud->entity_name;
 
         // return the ajax response for modal forms, or the normal view for normal requests
-        return  request()->ajax() ?
+        return  request()->ajax() && request()->has('_modal_form_id') ?
             view('crud::components.dataform.ajax_response', $this->data) :
             view($this->crud->getCreateView(), $this->data);
     }
diff --git a/src/app/Http/Controllers/Operations/UpdateOperation.php b/src/app/Http/Controllers/Operations/UpdateOperation.php
index e2babfc020..9d73836449 100644
--- a/src/app/Http/Controllers/Operations/UpdateOperation.php
+++ b/src/app/Http/Controllers/Operations/UpdateOperation.php
@@ -60,7 +60,7 @@ protected function setupUpdateDefaults()
 
             if ($useModalForm) {
                 $this->crud->removeButton('update');
-                $this->crud->addButton('line', 'update', 'view', 'crud::buttons.update_modal_form', 'end');
+                $this->crud->addButton('line', 'update', 'view', 'crud::buttons.update_in_modal', 'end');
             }
         });
     }
@@ -79,8 +79,8 @@ public function edit($id)
         $id = $this->crud->getCurrentEntryId() ?? $id;
 
         // Apply cached form setup if this is an AJAX request from a modal
-        if (request()->ajax() && request()->has('_form_id')) {
-            \Backpack\CRUD\app\Library\Support\DataformCache::applyFromRequest($this->crud);
+        if (request()->ajax() && request()->has('_modal_form_id')) {
+            \Backpack\CRUD\app\Library\Support\DataformCache::applySetupClosure($this->crud);
         }
 
         // register any Model Events defined on fields
@@ -97,7 +97,7 @@ public function edit($id)
         $this->data['id'] = $id;
 
         // load the view from /resources/views/vendor/backpack/crud/ if it exists, otherwise load the one in the package
-        return  request()->ajax() ?
+        return  request()->ajax() && request()->has('_modal_form_id') ?
              view('crud::components.dataform.ajax_response', $this->data) :
              view($this->crud->getEditView(), $this->data);
     }
diff --git a/src/app/Library/Support/DataformCache.php b/src/app/Library/Support/DataformCache.php
index cada11ce78..6661bc1d3c 100644
--- a/src/app/Library/Support/DataformCache.php
+++ b/src/app/Library/Support/DataformCache.php
@@ -70,7 +70,7 @@ public static function applyAndStoreSetupClosure(
     ): bool {
         $instance = new self();
         // Apply the setup closure to the CrudPanel instance
-        if ($instance->applySetupClosure($crud, $controllerClass, $setupClosure, $parentEntry)) {
+        if ($instance->applyClosure($crud, $controllerClass, $setupClosure, $parentEntry)) {
             // Capture the resulting field configuration after setup
             $fieldsAfterSetup = [];
             foreach ($crud->fields() as $fieldName => $field) {
@@ -92,11 +92,11 @@ public static function applyAndStoreSetupClosure(
      * @param  CrudPanel  $crud  The CRUD panel instance
      * @return bool Whether the operation was successful
      */
-    public static function applyFromRequest(CrudPanel $crud): bool
+    public static function applySetupClosure(CrudPanel $crud): bool
     {
         $instance = new self();
-        // Check if the request has a _form_id parameter
-        $formId = request('_form_id');
+        // Check if the request has a _modal_form_id parameter
+        $formId = request('_modal_form_id');
 
         if (! $formId) {
             return false;
@@ -114,7 +114,7 @@ public static function applyFromRequest(CrudPanel $crud): bool
      * @param  mixed  $entry  The entry to pass to the setup closure
      * @return bool Whether the operation was successful
      */
-    public function applySetupClosure(CrudPanel $crud, string $controllerClass, \Closure $setupClosure, $entry = null): bool
+    private function applyClosure(CrudPanel $crud, string $controllerClass, \Closure $setupClosure, $entry = null): bool
     {
         $originalSetup = $setupClosure;
         $modifiedSetup = function ($crud, $entry) use ($originalSetup, $controllerClass) {
diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index 3a8badf9ef..bdf9f7e945 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -97,8 +97,8 @@ private function getParentCrudEntry()
      */
     public function render()
     {
-        // Store the current form ID in the service container for form-aware old() helper
-        app()->instance('backpack.current_form_id', $this->id);
+    // Store the current form ID in the service container for form-aware old() helper
+    app()->instance('backpack.current_form_modal_id', $this->id);
 
         return view('crud::components.dataform.form', [
             'crud' => $this->crud,
diff --git a/src/app/View/Components/DataformModal.php b/src/app/View/Components/DataformModal.php
index ba76111425..ba2fedf331 100644
--- a/src/app/View/Components/DataformModal.php
+++ b/src/app/View/Components/DataformModal.php
@@ -5,7 +5,7 @@
 use Backpack\CRUD\app\View\Components\Contracts\IsolatesOperationSetup;
 use Closure;
 
-class DataformModal extends DataForm implements IsolatesOperationSetup
+class DataformModal extends Dataform implements IsolatesOperationSetup
 {
     /**
      * Modal forms ALWAYS isolate their operation setup.
@@ -16,28 +16,11 @@ public function shouldIsolateOperationSetup(): bool
         return true;
     }
 
-    /**
-     * Create a new component instance.
-     *
-     * @param  string  $controller  The CRUD controller class name
-     * @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  $hasUploadFields  Whether the form has upload fields
-     * @param  mixed|null  $entry  The model instance for update operations
-     * @param  Closure|null  $setup  A closure to customize the CRUD panel
-     * @param  string  $formRouteOperation  The operation to use for the form route (defaults to 'create')
-     * @param  string  $id  The ID for the form element (defaults to 'backpack-form')
-     * @param  bool  $focusOnFirstField  Whether to focus on the first field when form loads
-     * @param  string  $title  The title of the modal
-     * @param  string  $classes  CSS classes for the modal dialog
-     * @param  bool  $refreshDatatable  Whether to refresh the datatable after form submission
-     */
     public string $hashedFormId;
 
     public function __construct(
         public string $controller,
-        public ?string $route = null, // Accept route as an optional parameter
+        public ?string $route = null,
         public string $id = 'backpack-form',
         public string $operation = 'create',
         public string $name = '',
@@ -60,12 +43,10 @@ public function __construct(
             \Backpack\CRUD\CrudManager::unsetActiveController();
         }
 
-        // Use the provided/resolved route instead of calling setupCrudPanel on every render
-        // This avoids operation switching during page load when route is provided
-        $action = $this->action ?? url($this->route);
+    $this->action = $this->action ?? url($this->route);
 
-        // Generate the SAME hashed form ID that the DataForm component uses
-        $this->hashedFormId = $this->id.md5($action.$this->operation.'post'.$this->controller);
+    // Generate the SAME hashed form ID that the Dataform component uses
+    $this->hashedFormId = $this->id.md5($action.$this->operation.'post'.$this->controller);
 
         // Cache the setup closure if provided (for retrieval during AJAX request)
         if ($this->setup instanceof \Closure) {
@@ -76,7 +57,8 @@ public function __construct(
         // the CRUD panel on page load - the form will be loaded via AJAX
 
         if ($this->entry && $this->operation === 'update') {
-            $this->formRouteOperation = url($action.'/'.$this->entry->getKey().'/edit');
+            // Use the resolved action (base route) to build the edit URL for the entry
+            $this->formRouteOperation = url($this->action.'/'.$this->entry->getKey().'/edit');
         }
     }
 
@@ -91,7 +73,7 @@ protected function cacheSetupClosure(): void
 
         // Apply and cache the setup closure using the HASHED ID
         \Backpack\CRUD\app\Library\Support\DataformCache::applyAndStoreSetupClosure(
-            $this->hashedFormId,  // Use the hashed ID that matches what DataForm component generates
+            $this->hashedFormId,  // Use the hashed ID that matches what Dataform component generates
             $this->controller,
             $this->setup,
             null,
diff --git a/src/resources/views/crud/buttons/create_in_modal.blade.php b/src/resources/views/crud/buttons/create_in_modal.blade.php
new file mode 100644
index 0000000000..620a9f2a47
--- /dev/null
+++ b/src/resources/views/crud/buttons/create_in_modal.blade.php
@@ -0,0 +1,27 @@
+@if ($crud->hasAccess('create'))
+    @php
+        $controllerClass = get_class(app('request')->route()->getController());
+    @endphp
+    
+    {{-- Create button that opens modal form --}}
+    <button 
+        type="button" 
+        class="btn btn-primary" 
+        data-bs-toggle="modal"
+        data-bs-target="#createModal{{ md5($controllerClass.'create') }}"
+        bp-button="create" 
+        data-style="zoom-in"
+    >
+        <i class="la la-plus"></i> <span>{{ trans('backpack::crud.add') }} {{ $crud->entity_name }}</span>
+    </button>
+
+    {{-- Include the modal form component --}}
+    <x-backpack::dataform-modal
+        :controller="$controllerClass"
+        operation="create"
+        id="createModal{{ md5($controllerClass.'create') }}"
+        :title="trans('backpack::crud.add') . ' ' . $crud->entity_name"
+        :route="$crud->route"
+        refresh-datatable="true"
+    />
+@endif
diff --git a/src/resources/views/crud/buttons/update_in_modal.blade.php b/src/resources/views/crud/buttons/update_in_modal.blade.php
new file mode 100644
index 0000000000..c0f52f3883
--- /dev/null
+++ b/src/resources/views/crud/buttons/update_in_modal.blade.php
@@ -0,0 +1,49 @@
+@if ($crud->hasAccess('update', $entry))
+    @php
+        $controllerClass = get_class(app('request')->route()->getController());
+    @endphp
+    
+    {{-- Update button that opens modal form --}}
+    @if (!$crud->model->translationEnabled())
+        <button 
+            type="button" 
+            class="btn btn-sm btn-link" 
+            data-bs-toggle="modal"
+            data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+            bp-button="update"
+        >
+            <i class="la la-edit"></i> <span>{{ trans('backpack::crud.edit') }}</span>
+        </button>
+    @else
+        {{-- Edit button group for translated models --}}
+        <div class="btn-group">
+            <button 
+                type="button" 
+                class="btn btn-sm btn-link pr-0" 
+                data-bs-toggle="modal"
+                data-bs-target="#updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+            >
+                <span><i class="la la-edit"></i> {{ trans('backpack::crud.edit') }}</span>
+            </button>
+            <a class="btn btn-sm btn-link dropdown-toggle text-primary pl-1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-right">
+                <li class="dropdown-header">{{ trans('backpack::crud.edit_translations') }}:</li>
+                @foreach ($crud->model->getAvailableLocales() as $key => $locale)
+                    <li><a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a></li>
+                @endforeach
+            </ul>
+        </div>
+    @endif
+
+    {{-- Include the modal form component --}}
+    <x-backpack::dataform-modal
+        :controller="$controllerClass"
+        operation="update"
+        :entry="$entry"
+        id="updateModal{{ md5($controllerClass.'update'.$entry->getKey()) }}"
+        :title="trans('backpack::crud.edit') . ' ' . $crud->entity_name"
+        refresh-datatable="true"
+    />
+@endif
diff --git a/src/resources/views/crud/components/dataform/ajax_response.blade.php b/src/resources/views/crud/components/dataform/ajax_response.blade.php
index ebcc488d8f..9396c63636 100644
--- a/src/resources/views/crud/components/dataform/ajax_response.blade.php
+++ b/src/resources/views/crud/components/dataform/ajax_response.blade.php
@@ -40,75 +40,5 @@
 @stack('after_styles')
 
 <script>
-    // Define utility functions needed by field initialization scripts
-    // These are normally included in form_content.blade.php but missing in AJAX context
-
-    /**
-     * Initialize all fields with JavaScript based on their data-init-function attribute
-     * @param {jQuery|HTMLElement} container
-     */
-    function initializeFieldsWithJavascript(container) {
-        var selector;
-        if (container instanceof jQuery) {
-            selector = container;
-        } else {
-            selector = $(container);
-        }
-        
-        selector.find("[data-init-function]").not("[data-initialized=true]").each(function () {
-            var element = $(this);
-            var functionName = element.data('init-function');
-
-            if (typeof window[functionName] === "function") {
-                window[functionName](element);
-                // mark the element as initialized, so that its function is never called again
-                element.attr('data-initialized', 'true');
-            }
-        });
-    }
-
-    /**
-     * Auto-discover first focusable input
-     * @param {jQuery} form
-     * @return {jQuery}
-     */
-    function getFirstFocusableField(form) {
-        return form.find('input, select, textarea, button')
-            .not('.close')
-            .not('[disabled]')
-            .filter(':visible:first');
-    }
-
-    /**
-     *
-     * @param {jQuery} firstField
-     */
-    function triggerFocusOnFirstInputField(firstField) {
-        if (firstField.hasClass('select2-hidden-accessible')) {
-            return handleFocusOnSelect2Field(firstField);
-        }
-
-        firstField.trigger('focus');
-    }
-
-    /**
-     * 1- Make sure no other select2 input is open in other field to focus on the right one
-     * 2- Check until select2 is initialized
-     * 3- Open select2
-     *
-     * @param {jQuery} firstField
-     */
-    function handleFocusOnSelect2Field(firstField){
-        firstField.select2('focus');
-    }
-
-    /*
-    * Hacky fix for a bug in select2 with jQuery 3.6.0's new nested-focus "protection"
-    * see: https://github.com/select2/select2/issues/5993
-    * see: https://github.com/jquery/jquery/issues/4382
-    *
-    */
-    $(document).on('select2:open', () => {
-        setTimeout(() => document.querySelector('.select2-container--open .select2-search__field').focus(), 100);
-    });
+    @include('crud::components.dataform.common_js')
 </script>
diff --git a/src/resources/views/crud/components/dataform/common_js.blade.php b/src/resources/views/crud/components/dataform/common_js.blade.php
new file mode 100644
index 0000000000..49469b8ac0
--- /dev/null
+++ b/src/resources/views/crud/components/dataform/common_js.blade.php
@@ -0,0 +1,86 @@
+if (typeof window.initializeFieldsWithJavascript === 'undefined') {
+    window.initializeFieldsWithJavascript = function(container) {
+        var selector;
+        if (container instanceof jQuery) {
+            selector = container;
+        } else {
+            selector = $(container);
+        }
+        
+        var fieldsToInit = selector.find("[data-init-function]").not("[data-initialized=true]");
+        
+        fieldsToInit.each(function () {
+            var element = $(this);
+            var functionName = element.data('init-function');
+
+            if (typeof window[functionName] === "function") {
+                try {
+                    window[functionName](element);
+                    element.attr('data-initialized', 'true');
+                } catch (error) {
+                    element.attr('data-initialized', 'true');
+                    console.error('[FieldInit] Error initializing field with function ' + functionName + ':', error);
+                }
+            }
+        });
+    };
+}
+
+if (!window._select2FocusFixInstalled) {
+    document.addEventListener('focusin', function(e) {
+        if (e.target.classList.contains('select2-search__field') ||
+            e.target.closest('.select2-container') ||
+            e.target.closest('.select2-dropdown')) {
+            e.stopImmediatePropagation();
+        }
+    }, true);
+        
+    window._select2FocusFixInstalled = true;
+}
+
+/**
+ * Auto-discover first focusable input
+ * @param {jQuery} form
+ * @return {jQuery}
+ */
+function getFirstFocusableField(form) {
+    return form.find('input, select, textarea, button')
+        .not('.close')
+        .not('[disabled]')
+        .filter(':visible:first');
+}
+
+/**
+ *
+ * @param {jQuery} firstField
+ */
+function triggerFocusOnFirstInputField(firstField) {
+    if (firstField.hasClass('select2-hidden-accessible')) {
+        return handleFocusOnSelect2Field(firstField);
+    }
+
+    firstField.trigger('focus');
+}
+
+/**
+ * 1- Make sure no other select2 input is open in other field to focus on the right one
+ * 2- Check until select2 is initialized
+ * 3- Open select2
+ *
+ * @param {jQuery} firstField
+ */
+function handleFocusOnSelect2Field(firstField){
+    firstField.select2('focus');
+}
+
+/*
+* Hacky fix for a bug in select2 with jQuery 3.6.0's new nested-focus "protection"
+* see: https://github.com/select2/select2/issues/5993
+* see: https://github.com/jquery/jquery/issues/4382
+*
+*/
+$(document).on('select2:open', () => {
+    setTimeout(() => document.querySelector('.select2-container--open .select2-search__field').focus(), 100);
+});
+
+@endverbatim
diff --git a/src/resources/views/crud/components/dataform/form_content.blade.php b/src/resources/views/crud/components/dataform/form_content.blade.php
index 6e869a046c..8f8f6e9150 100644
--- a/src/resources/views/crud/components/dataform/form_content.blade.php
+++ b/src/resources/views/crud/components/dataform/form_content.blade.php
@@ -1,5 +1,5 @@
 <input type="hidden" name="_http_referrer" value="{{ old('_http_referrer') ?? \URL::previous() ?? url($crud->route) }}">
-<input type="hidden" name="_form_id" value="{{ $id ?? 'crudForm' }}">
+<input type="hidden" name="_modal_form_id" value="{{ $id ?? 'crudForm' }}">
 
 {{-- See if we're using tabs --}}
 @if ($crud->tabsEnabled() && count($crud->getTabs()))
diff --git a/src/resources/views/crud/components/dataform/modal-form-scripts.blade.php b/src/resources/views/crud/components/dataform/modal-form-scripts.blade.php
index a845e9412a..37515215f8 100644
--- a/src/resources/views/crud/components/dataform/modal-form-scripts.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form-scripts.blade.php
@@ -1,43 +1,5 @@
 <script>
-    if (typeof window.initializeFieldsWithJavascript === 'undefined') {
-        window.initializeFieldsWithJavascript = function(container) {
-            var selector;
-            if (container instanceof jQuery) {
-                selector = container;
-            } else {
-                selector = $(container);
-            }
-            
-            var fieldsToInit = selector.find("[data-init-function]").not("[data-initialized=true]");
-            
-            fieldsToInit.each(function () {
-                var element = $(this);
-                var functionName = element.data('init-function');
-
-                if (typeof window[functionName] === "function") {
-                    try {
-                        window[functionName](element);
-                        element.attr('data-initialized', 'true');
-                    } catch (error) {
-                        element.attr('data-initialized', 'true');
-                        console.error('[FieldInit] Error initializing field with function ' + functionName + ':', error);
-                    }
-                }
-            });
-        };
-    }
-
-    if (!window._select2FocusFixInstalled) {
-        document.addEventListener('focusin', function(e) {
-            if (e.target.classList.contains('select2-search__field') ||
-                e.target.closest('.select2-container') ||
-                e.target.closest('.select2-dropdown')) {
-                e.stopImmediatePropagation();
-            }
-        }, true);
-        
-        window._select2FocusFixInstalled = true;
-    }
+    @include('crud::components.dataform.common_js')
 
     if (!window._modalObservers) {
         window._modalObservers = new Map();
@@ -282,7 +244,7 @@ function loadModalForm(controllerId, modalEl, formContainer, submitButton) {
         const hashedFormId = modalEl.dataset.hashedFormId;
         
         const url = new URL(formUrl, window.location.origin);
-        url.searchParams.append('_form_id', hashedFormId);
+        url.searchParams.append('_modal_form_id', hashedFormId);
 
         fetch(url.toString(), {
             method: 'GET',
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index 190cc2a9a7..ef498032e4 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -1,11 +1,5 @@
 {{-- Modal HTML (initially hidden from DOM) --}}
-@php
-    if(isset($formRouteOperation)) {
-        if(!\Str::isUrl($formRouteOperation)) {
-            $formRouteOperation = url($route . '/' . $formRouteOperation);
-        }
-    }
-@endphp
+{{-- compute form load route inline where used --}}
 @push('after_styles') @if (request()->ajax()) @endpush @endif
 @if (!request()->ajax()) @endpush @endif
 @push('after_scripts') @if (request()->ajax()) @endpush @endif
@@ -23,7 +17,7 @@
                         </div>
                         <div 
                             id="modal-form-container{{ md5($controller.$id) }}" 
-                            data-form-load-route="{{ $formRouteOperation }}"
+                            data-form-load-route="{{ isset($formRouteOperation) ? (\Str::isUrl($formRouteOperation) ? $formRouteOperation : url($route . '/' . $formRouteOperation)) : '' }}"
                             data-form-action="{{ $action }}"
                             data-form-method="{{ $method }}"
                             data-has-upload-fields="{{ $hasUploadFields ? 'true' : 'false' }}"
diff --git a/src/resources/views/crud/form_content.blade.php b/src/resources/views/crud/form_content.blade.php
index 0a173df67e..8a195ca49b 100644
--- a/src/resources/views/crud/form_content.blade.php
+++ b/src/resources/views/crud/form_content.blade.php
@@ -33,70 +33,7 @@
     @stack('crud_fields_scripts')
 
     <script>
-    function initializeFieldsWithJavascript(container) {
-      var selector;
-      if (container instanceof jQuery) {
-        selector = container;
-      } else {
-        selector = $(container);
-      }
-      selector.find("[data-init-function]").not("[data-initialized=true]").each(function () {
-        var element = $(this);
-        var functionName = element.data('init-function');
-
-        if (typeof window[functionName] === "function") {
-          window[functionName](element);
-
-          // mark the element as initialized, so that its function is never called again
-          element.attr('data-initialized', 'true');
-        }
-      });
-    }
-
-    /**
-     * Auto-discover first focusable input
-     * @param {jQuery} form
-     * @return {jQuery}
-     */
-    function getFirstFocusableField(form) {
-        return form.find('input, select, textarea, button')
-            .not('.close')
-            .not('[disabled]')
-            .filter(':visible:first');
-    }
-
-    /**
-     *
-     * @param {jQuery} firstField
-     */
-    function triggerFocusOnFirstInputField(firstField) {
-        if (firstField.hasClass('select2-hidden-accessible')) {
-            return handleFocusOnSelect2Field(firstField);
-        }
-
-        firstField.trigger('focus');
-    }
-
-    /**
-     * 1- Make sure no other select2 input is open in other field to focus on the right one
-     * 2- Check until select2 is initialized
-     * 3- Open select2
-     *
-     * @param {jQuery} firstField
-     */
-    function handleFocusOnSelect2Field(firstField){
-        firstField.select2('focus');
-    }
-
-    /*
-    * Hacky fix for a bug in select2 with jQuery 3.6.0's new nested-focus "protection"
-    * see: https://github.com/select2/select2/issues/5993
-    * see: https://github.com/jquery/jquery/issues/4382
-    *
-    */
-    $(document).on('select2:open', () => {
-        setTimeout(() => document.querySelector('.select2-container--open .select2-search__field').focus(), 100);
-    });
+    @include('crud::components.dataform.common_js')
 
     jQuery('document').ready(function($){
 

From 0697c4cf1f6bc6894eb829211fa81ffbee19f8b6 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Thu, 16 Oct 2025 15:09:15 +0000
Subject: [PATCH 21/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/app/View/Components/Dataform.php      | 4 ++--
 src/app/View/Components/DataformModal.php | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index bdf9f7e945..c317fa53ae 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -97,8 +97,8 @@ private function getParentCrudEntry()
      */
     public function render()
     {
-    // Store the current form ID in the service container for form-aware old() helper
-    app()->instance('backpack.current_form_modal_id', $this->id);
+        // Store the current form ID in the service container for form-aware old() helper
+        app()->instance('backpack.current_form_modal_id', $this->id);
 
         return view('crud::components.dataform.form', [
             'crud' => $this->crud,
diff --git a/src/app/View/Components/DataformModal.php b/src/app/View/Components/DataformModal.php
index ba2fedf331..bf0b9a9f03 100644
--- a/src/app/View/Components/DataformModal.php
+++ b/src/app/View/Components/DataformModal.php
@@ -43,10 +43,10 @@ public function __construct(
             \Backpack\CRUD\CrudManager::unsetActiveController();
         }
 
-    $this->action = $this->action ?? url($this->route);
+        $this->action = $this->action ?? url($this->route);
 
-    // Generate the SAME hashed form ID that the Dataform component uses
-    $this->hashedFormId = $this->id.md5($action.$this->operation.'post'.$this->controller);
+        // Generate the SAME hashed form ID that the Dataform component uses
+        $this->hashedFormId = $this->id.md5($action.$this->operation.'post'.$this->controller);
 
         // Cache the setup closure if provided (for retrieval during AJAX request)
         if ($this->setup instanceof \Closure) {

From 1352a4c70ce3b8f4d2f76783d53835359ef80ed8 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Thu, 16 Oct 2025 16:52:38 +0100
Subject: [PATCH 22/24] wip

---
 src/app/View/Components/Dataform.php          | 30 +++++++++---------
 src/app/View/Components/DataformModal.php     | 31 ++++++++++---------
 .../components/dataform/common_js.blade.php   |  1 +
 .../crud/components/dataform/form.blade.php   |  9 +++---
 .../dataform/form_content.blade.php           |  4 +--
 .../components/dataform/modal-form.blade.php  |  6 ++--
 .../views/crud/fields/color.blade.php         | 15 +++++++++
 7 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/src/app/View/Components/Dataform.php b/src/app/View/Components/Dataform.php
index c317fa53ae..3dc7dd2f69 100644
--- a/src/app/View/Components/Dataform.php
+++ b/src/app/View/Components/Dataform.php
@@ -33,9 +33,9 @@ public function __construct(
         public string $controller,
         private string $id = 'backpack-form-',
         public string $name = '',
-        public string $operation = 'create',
-        public ?string $action = null,
-        public string $method = 'post',
+        public string $formOperation = 'create',
+        public ?string $formAction = null,
+        public string $formMethod = 'post',
         public bool $hasUploadFields = false,
         public $entry = null,
         public ?Closure $setup = null,
@@ -44,25 +44,25 @@ public function __construct(
         // Get CRUD panel instance from the controller
         CrudManager::setActiveController($controller);
 
-        $this->crud = CrudManager::setupCrudPanel($controller, $operation);
+        $this->crud = CrudManager::setupCrudPanel($controller, $this->formOperation);
 
-        if ($this->crud->getOperation() !== $operation) {
-            $this->crud->setOperation($operation);
+        if ($this->crud->getOperation() !== $this->formOperation) {
+            $this->crud->setOperation($this->formOperation);
         }
 
         $this->crud->setAutoFocusOnFirstField($this->focusOnFirstField);
 
-        if ($this->entry && $this->operation === 'update') {
-            $this->action = $action ?? url($this->crud->route.'/'.$this->entry->getKey());
-            $this->method = 'put';
+        if ($this->entry && $this->formOperation === 'update') {
+            $this->formAction = $formAction ?? url($this->crud->route.'/'.$this->entry->getKey());
+            $this->formMethod = 'put';
             $this->crud->entry = $this->entry;
             $this->crud->setOperationSetting('fields', $this->crud->getUpdateFields());
         } else {
-            $this->action = $action ?? url($this->crud->route);
+            $this->formAction = $formAction ?? url($this->crud->route);
         }
 
-        $this->hasUploadFields = $this->crud->hasUploadFields($operation, $this->entry?->getKey());
-        $this->id = $id.md5($this->action.$this->operation.$this->method.$this->controller);
+        $this->hasUploadFields = $this->crud->hasUploadFields($this->formOperation, $this->entry?->getKey());
+        $this->id = $id.md5($this->formAction.$this->formOperation.$this->formMethod.$this->controller);
 
         if ($this->setup) {
             $parentEntry = $this->getParentCrudEntry();
@@ -105,9 +105,9 @@ public function render()
             'saveAction' => $this->crud->getSaveAction(),
             'id' => $this->id,
             'name' => $this->name,
-            'operation' => $this->operation,
-            'action' => $this->action,
-            'method' => $this->method,
+            'formOperation' => $this->formOperation,
+            'formAction' => $this->formAction,
+            'formMethod' => $this->formMethod,
             'hasUploadFields' => $this->hasUploadFields,
             'entry' => $this->entry,
         ]);
diff --git a/src/app/View/Components/DataformModal.php b/src/app/View/Components/DataformModal.php
index bf0b9a9f03..b2f5f2a56a 100644
--- a/src/app/View/Components/DataformModal.php
+++ b/src/app/View/Components/DataformModal.php
@@ -22,11 +22,11 @@ public function __construct(
         public string $controller,
         public ?string $route = null,
         public string $id = 'backpack-form',
-        public string $operation = 'create',
+        public string $formOperation = 'create',
         public string $name = '',
-        public string $formRouteOperation = 'create',
-        public ?string $action = null,
-        public string $method = 'post',
+        public string $formUrl = 'create',
+        public ?string $formAction = null,
+        public string $formMethod = 'post',
         public bool $hasUploadFields = false,
         public $entry = null,
         public ?Closure $setup = null,
@@ -38,15 +38,16 @@ public function __construct(
         // If route is not provided (e.g., when rendering via AJAX), get it from CRUD panel
         if ($this->route === null) {
             \Backpack\CRUD\CrudManager::setActiveController($controller);
-            $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($controller, $operation);
+            $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($controller, $this->formOperation);
             $this->route = $tempCrud->route;
             \Backpack\CRUD\CrudManager::unsetActiveController();
         }
 
-        $this->action = $this->action ?? url($this->route);
+        // keep backwards compatible behavior for resolving route when not provided
+        $this->formAction = $this->formAction ?? url($this->route);
 
         // Generate the SAME hashed form ID that the Dataform component uses
-        $this->hashedFormId = $this->id.md5($action.$this->operation.'post'.$this->controller);
+        $this->hashedFormId = $this->id.md5($this->formAction.$this->formOperation.'post'.$this->controller);
 
         // Cache the setup closure if provided (for retrieval during AJAX request)
         if ($this->setup instanceof \Closure) {
@@ -56,9 +57,9 @@ public function __construct(
         // DO NOT call parent::__construct() because we don't want to initialize
         // the CRUD panel on page load - the form will be loaded via AJAX
 
-        if ($this->entry && $this->operation === 'update') {
+        if ($this->entry && $this->formOperation === 'update') {
             // Use the resolved action (base route) to build the edit URL for the entry
-            $this->formRouteOperation = url($this->action.'/'.$this->entry->getKey().'/edit');
+            $this->formUrl = url($this->formAction.'/'.$this->entry->getKey().'/edit');
         }
     }
 
@@ -68,8 +69,8 @@ public function __construct(
     protected function cacheSetupClosure(): void
     {
         // Create a temporary CRUD instance to apply and cache the setup
-        \Backpack\CRUD\CrudManager::setActiveController($this->controller);
-        $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($this->controller, $this->operation);
+    \Backpack\CRUD\CrudManager::setActiveController($this->controller);
+    $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($this->controller, $this->formOperation);
 
         // Apply and cache the setup closure using the HASHED ID
         \Backpack\CRUD\app\Library\Support\DataformCache::applyAndStoreSetupClosure(
@@ -95,12 +96,12 @@ public function render()
         // The CRUD panel will be initialized when the AJAX request is made
         return view('crud::components.dataform.modal-form', [
             'id' => $this->id,
-            'operation' => $this->operation,
-            'formRouteOperation' => $this->formRouteOperation,
+            'formOperation' => $this->formOperation,
+            'formUrl' => $this->formUrl,
             'hasUploadFields' => $this->hasUploadFields,
             'refreshDatatable' => $this->refreshDatatable,
-            'action' => $this->action,
-            'method' => $this->method,
+            'formAction' => $this->formAction,
+            'formMethod' => $this->formMethod,
             'title' => $this->title,
             'classes' => $this->classes,
             'hashedFormId' => $this->hashedFormId,
diff --git a/src/resources/views/crud/components/dataform/common_js.blade.php b/src/resources/views/crud/components/dataform/common_js.blade.php
index 49469b8ac0..b534c2326f 100644
--- a/src/resources/views/crud/components/dataform/common_js.blade.php
+++ b/src/resources/views/crud/components/dataform/common_js.blade.php
@@ -1,3 +1,4 @@
+@verbatim
 if (typeof window.initializeFieldsWithJavascript === 'undefined') {
     window.initializeFieldsWithJavascript = function(container) {
         var selector;
diff --git a/src/resources/views/crud/components/dataform/form.blade.php b/src/resources/views/crud/components/dataform/form.blade.php
index 1dbb73d7c6..cfc0c620b6 100644
--- a/src/resources/views/crud/components/dataform/form.blade.php
+++ b/src/resources/views/crud/components/dataform/form.blade.php
@@ -2,18 +2,17 @@
     @include('crud::inc.grouped_errors', ['id' => $id])
 
     <form method="post"
-        action="{{ $action }}"
+        action="{{ $formAction }}"
         id="{{ $id }}"
         @if(!empty($name)) name="{{ $name }}" @endif
         @if($hasUploadFields) enctype="multipart/form-data" @endif
     >
         {!! csrf_field() !!}
-
-        @if($method !== 'post')
-            @method($method)
+        @if($formMethod !== 'post')
+            @method($formMethod)
         @endif
         {{-- Include the form fields --}}
-        @include('crud::form_content', ['fields' => $crud->fields(), 'action' => $operation, 'id' => $id])
+        @include('crud::form_content', ['fields' => $crud->fields(), 'action' => $formOperation, 'id' => $id])
 
         {{-- This makes sure that all field assets are loaded. --}}
         <div class="d-none" id="parentLoadedAssets">{{ json_encode(Basset::loaded()) }}</div>
diff --git a/src/resources/views/crud/components/dataform/form_content.blade.php b/src/resources/views/crud/components/dataform/form_content.blade.php
index 8f8f6e9150..a1abea3704 100644
--- a/src/resources/views/crud/components/dataform/form_content.blade.php
+++ b/src/resources/views/crud/components/dataform/form_content.blade.php
@@ -1,4 +1,4 @@
-<input type="hidden" name="_http_referrer" value="{{ old('_http_referrer') ?? \URL::previous() ?? url($crud->route) }}">
+<input type="hidden" name="_http_referrer" value="{{ old('_http_referrer') ?? \URL::previous() ?? url($crud->route) }}">
 <input type="hidden" name="_modal_form_id" value="{{ $id ?? 'crudForm' }}">
 
 {{-- See if we're using tabs --}}
@@ -25,4 +25,4 @@
 
 @push('before_scripts')
   @include('crud::inc.form_fields_script')
-@endpush
\ No newline at end of file
+@endpush
diff --git a/src/resources/views/crud/components/dataform/modal-form.blade.php b/src/resources/views/crud/components/dataform/modal-form.blade.php
index ef498032e4..0c565726bc 100644
--- a/src/resources/views/crud/components/dataform/modal-form.blade.php
+++ b/src/resources/views/crud/components/dataform/modal-form.blade.php
@@ -17,9 +17,9 @@
                         </div>
                         <div 
                             id="modal-form-container{{ md5($controller.$id) }}" 
-                            data-form-load-route="{{ isset($formRouteOperation) ? (\Str::isUrl($formRouteOperation) ? $formRouteOperation : url($route . '/' . $formRouteOperation)) : '' }}"
-                            data-form-action="{{ $action }}"
-                            data-form-method="{{ $method }}"
+                            data-form-load-route="{{ isset($formUrl) ? (\Str::isUrl($formUrl) ? $formUrl : url($route . '/' . $formUrl)) : '' }}"
+                            data-form-action="{{ $formAction }}"
+                            data-form-method="{{ $formMethod }}"
                             data-has-upload-fields="{{ $hasUploadFields ? 'true' : 'false' }}"
                             data-refresh-datatable="{{ $refreshDatatable ? 'true' : 'false' }}"
                             >
diff --git a/src/resources/views/crud/fields/color.blade.php b/src/resources/views/crud/fields/color.blade.php
index 0ff88efc5c..f47c72b4df 100644
--- a/src/resources/views/crud/fields/color.blade.php
+++ b/src/resources/views/crud/fields/color.blade.php
@@ -1,6 +1,11 @@
 {{-- html5 color input --}}
 @php
 $value = old_empty_or_null($field['name'], '') ??  $field['value'] ?? $field['default'] ?? '';
+// HTML5 color input requires a valid hex color format (#rrggbb)
+// If the value is empty or invalid, default to black (#000000)
+if (empty($value) || !preg_match('/^#[0-9a-f]{6}$/i', $value)) {
+    $value = $field['default'] ?? '#000000';
+}
 @endphp
 
 
@@ -59,6 +64,16 @@ function bpFieldInitColorElement(element) {
             let inputText = element[0];
             let inputColor = inputText.nextElementSibling.querySelector('input');
 
+            // Ensure color input has a valid value (HTML5 requires #rrggbb format)
+            if (!inputColor.value || !inputColor.value.match(/^#[0-9a-f]{6}$/i)) {
+                inputColor.value = '#000000';
+            }
+            
+            // Ensure text input matches color input
+            if (!inputText.value || !inputText.value.match(/^#[0-9a-f]{6}$/i)) {
+                inputText.value = inputColor.value;
+            }
+
             inputText.addEventListener('input', () => inputText.value = inputColor.value = '#' + inputText.value.replace(/[^\da-f]/gi, '').toLowerCase());
             inputColor.addEventListener('input', () => inputText.value = inputColor.value);
         }

From 5938c353eba8d639616a6ec4f459b4ab79fce489 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Thu, 16 Oct 2025 15:52:51 +0000
Subject: [PATCH 23/24] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/app/View/Components/DataformModal.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/View/Components/DataformModal.php b/src/app/View/Components/DataformModal.php
index b2f5f2a56a..5b33f0c96f 100644
--- a/src/app/View/Components/DataformModal.php
+++ b/src/app/View/Components/DataformModal.php
@@ -69,8 +69,8 @@ public function __construct(
     protected function cacheSetupClosure(): void
     {
         // Create a temporary CRUD instance to apply and cache the setup
-    \Backpack\CRUD\CrudManager::setActiveController($this->controller);
-    $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($this->controller, $this->formOperation);
+        \Backpack\CRUD\CrudManager::setActiveController($this->controller);
+        $tempCrud = \Backpack\CRUD\CrudManager::setupCrudPanel($this->controller, $this->formOperation);
 
         // Apply and cache the setup closure using the HASHED ID
         \Backpack\CRUD\app\Library\Support\DataformCache::applyAndStoreSetupClosure(

From f72c6d5445d0d4092c31954fb2db4bed4c638e26 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Fri, 17 Oct 2025 17:37:58 +0100
Subject: [PATCH 24/24] wip

---
 src/resources/assets/css/common.css           | 10 +----
 .../components/dataform/common_js.blade.php   | 37 +++++++++++++++++++
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/resources/assets/css/common.css b/src/resources/assets/css/common.css
index 8d988d9ec0..77d8d7c79d 100644
--- a/src/resources/assets/css/common.css
+++ b/src/resources/assets/css/common.css
@@ -126,19 +126,11 @@ div[id$="_wrapper"] .dt-processing {
 
 /* Ensure Select2 dropdowns are visible and properly positioned in all contexts */
 /* Bootstrap modals use z-index 1050-1055, so Select2 needs to be higher */
-.select2-container--open .select2-dropdown,
-.select2-dropdown {
+.select2-in-modal-repeatable .select2-dropdown {
     z-index: 1060 !important;
     position: fixed !important;
 }
 
-/* When Select2 is inside a modal, use absolute positioning to follow scroll */
-.modal .select2-container--open .select2-dropdown,
-.modal .select2-dropdown {
-    z-index: 1060 !important;
-    position: absolute !important;
-}
-
 .navbar-filters {
     min-height: 25px;
     border-radius: 0;
diff --git a/src/resources/views/crud/components/dataform/common_js.blade.php b/src/resources/views/crud/components/dataform/common_js.blade.php
index b534c2326f..e2cdc2b69c 100644
--- a/src/resources/views/crud/components/dataform/common_js.blade.php
+++ b/src/resources/views/crud/components/dataform/common_js.blade.php
@@ -84,4 +84,41 @@ function handleFocusOnSelect2Field(firstField){
     setTimeout(() => document.querySelector('.select2-container--open .select2-search__field').focus(), 100);
 });
 
+// When Select2 opens inside a repeatable row that is itself inside a modal,
+// add a specific class to the open container so CSS/positioning logic can target it.
+// Also remove the class on close.
+$(document).on('select2:open', function(e) {
+    // The event target will be the original select element
+    try {
+        var $select = $(e.target);
+        var $repeatable = $select.closest('.repeatable-element');
+        var $modal = $select.closest('.modal');
+
+        if ($repeatable.length && $modal.length) {
+            // Wait briefly for Select2 to render the dropdown container
+            setTimeout(function() {
+                var $openContainer = $('.select2-container--open');
+                $openContainer.addClass('select2-in-modal-repeatable');
+            }, 0);
+        }
+    } catch (err) {
+        // fail silently
+    }
+});
+
+$(document).on('select2:close', function(e) {
+    try {
+        var $select = $(e.target);
+        var $repeatable = $select.closest('.repeatable-element');
+        var $modal = $select.closest('.modal');
+
+        if ($repeatable.length && $modal.length) {
+            // remove the class from any open containers
+            $('.select2-container--open').removeClass('select2-in-modal-repeatable');
+        }
+    } catch (err) {
+        // fail silently
+    }
+});
+
 @endverbatim