[4.1.15][Bug] Inline creation problems

Bug report

What I did

I’ve added some relationship fields to some creation forms that works fine (I still get an error about the id that is undefined if no objects are present in database), but only the first time I open it.

Every time next to the first (which has concluded successfully or not), the form wont show.

And, as stated in my comment, when inline creation is enabled or the field is in AJAX mode (needs more tests), the fetching doesn’t work.

These are my classes:

Models

App\Models\Contract

<?php

namespace App\Models;

use Backpack\CRUD\app\Models\Traits\CrudTrait;
use Illuminate\Database\Eloquent\Model;

class Contract extends Model
{
    use CrudTrait;

    public $identifiableAttribute = 'customer_code';

    protected $table = 'contracts';
 
    protected $guarded = ['id'];

    protected $fillable = [
        'customer_code',
        'grouping_code',
        'state',
        'notes',
        'agreed_at',
        'expires_on',
        'tariff_id',
        'consumer_id',
        'context_id',
    ];

    protected $dates = [
        'agreed_at',
        'expires_on',
    ];

    public function electricMeter() {
        return $this->hasMany('App\Models\ElectricMeter');
    }

    public function gasMeter() {
        return $this->hasMany('App\Models\GasMeter');
    }

    public function tariff() {
        return $this->belongsTo('App\Models\Tariff', 'tariff_id');
    }

    public function consumer() {
        return $this->belongsTo('App\Models\Consumer', 'consumer_id');
    }

    public function context() {
        return $this->belongsTo('App\Models\User', 'context_id');
    }
}

App\Models\Tariff

<?php

namespace App\Models;

use Backpack\CRUD\app\Models\Traits\CrudTrait;
use Illuminate\Database\Eloquent\Model;

class Tariff extends Model
{
    use CrudTrait;

    protected $table = 'tariffs';

    protected $guarded = ['id'];

    protected $fillable = [
        'name',
        'description',
        'price',
        'supplier_id'
    ];

    protected $with = [
        'supplier'
    ];

    public function contracts() {
        return $this->hasMany('App\Models\Contract', 'tariff_id');
    }

    public function supplier() {
        return $this->belongsTo('App\Models\Supplier', 'supplier_id');
    }
}

Controller

App\Http\Controllers\Admin\ContractCrudController

<?php

namespace App\Http\Controllers\Admin;

use App\Enums\ContractState;
use App\Enums\MeterType;
use App\Helpers\RelationshipCrudHelper;
use App\Http\Requests\ContractRequest;
use App\Models\Consumer;
use App\Models\Tariff;
use Backpack\CRUD\app\Http\Controllers\CrudController;
use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;

/**
 * Class ContractCrudController
 * @package App\Http\Controllers\Admin
 * @property-read \Backpack\CRUD\app\Library\CrudPanel\CrudPanel $crud
 */
class ContractCrudController extends CrudController
{
    use \Backpack\CRUD\app\Http\Controllers\Operations\ListOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\InlineCreateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\DeleteOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\ShowOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\FetchOperation;

    /**
     * Configure the CrudPanel object. Apply settings to all operations.
     *
     * @return void
     */
    public function setup()
    {
        $this->crud->setModel(\App\Models\Contract::class);
        $this->crud->setRoute(config('backpack.base.route_prefix') . '/contract');
        $this->crud->setEntityNameStrings('contratto', 'contratti');
    }

    protected function setupListOperation()
    {
        // Columns
    }

    protected function setupCreateOperation()
    {
        $this->crud->setValidation(ContractRequest::class);

        $this->crud->addField([
            'name' => 'customer_code',
            'label' => 'Numero Cliente',
            'type' => 'text',
            'wrapper' => [
                'class' => 'form-group col-md-5'
            ],
        ]);

        $this->crud->addField([
            'name' => 'grouping_code',
            'label' => 'Codice di raggruppamento',
            'type' => 'text',
            'wrapper' => [
                'class' => 'form-group col-md-4'
            ],
        ]);

        $this->crud->addField([
            'name' => 'state',
            'label' => 'Stato',
            'type' => 'select_from_array',
            'options' => ContractState::getAllWithNames(),
            'wrapper' => [
                'class' => 'form-group col-md-3'
            ],
        ]);

        $this->crud->addField([
            'name' => 'agreed_on',
            'label' => 'Stipulato il',
            'type' => 'date',
            'wrapper' => [
                'class' => 'form-group col-md-6'
            ],
        ]);

        $this->crud->addField([
            'name' => 'ceased_on',
            'label' => 'Cessa il',
            'type' => 'date',
            'wrapper' => [
                'class' => 'form-group col-md-6'
            ],
        ]);
        
        $this->crud->addField([
            'name' => 'tariff_id',
            'entity' => 'tariff',
            'model' => 'App\Models\Tariff',
            'type' => 'relationship',
            'label' => 'Tariffa',
            'placeholder' => 'Selezionare una tariffa',
            'wrapper' => [
                'class' => 'form-group col-md-4'
            ],
            //'ajax' => true,
            'inline_create' => true,
        ]);

        /*$this->crud->addField([
            'name' => 'consumer_id',
            'entity' => 'consumer',
            'model' => 'App\Models\Consumer',
            'type' => 'relationship',
            'label' => 'Utenza',
            'placeholder' => 'Selezionare un\'utenza',
            'inline_create' => true,
            'wrapper' => [
                'class' => 'form-group col-md-7 offset-md-1'
            ],
        ]);*/

        $this->crud->addField([
            'name' => 'notes',
            'label' => 'Note',
            'type' => 'textarea',
        ]);

        /*$this->crud->addField([
            'name' => 'context_id',
            'entity' => 'context',
            'model' => 'App\Models\User',
            'type' => 'relationship',
            'label' => 'Utente (Contesto)',
            'placeholder' => 'Selezionare un contesto'
        ]);*/
    }

    protected function setupUpdateOperation()
    {
        $this->setupCreateOperation();
    }

    protected function setupShowOperation() {
        $this->crud->set('show.setFromDb', false);

        $this->setupListOperation();
    }

    public function fetchTariff() {
        $this->fetch(Tariff::class);
    }

    public function fetchConsumer() {
        $this->fetch(Consumer::class);
    }
}

App\Controllers\Admin\TariffCrudController

<?php

namespace App\Http\Controllers\Admin;

use App\Helpers\RelationshipCrudHelper;
use App\Http\Requests\TariffRequest;
use App\Models\Supplier;
use Backpack\CRUD\app\Http\Controllers\CrudController;
use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;

/**
 * Class TariffCrudController
 * @package App\Http\Controllers\Admin
 * @property-read \Backpack\CRUD\app\Library\CrudPanel\CrudPanel $crud
 */
class TariffCrudController extends CrudController
{
    use \Backpack\CRUD\app\Http\Controllers\Operations\ListOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\InlineCreateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\DeleteOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\ShowOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\FetchOperation;

    /**
     * Configure the CrudPanel object. Apply settings to all operations.
     *
     * @return void
     */
    public function setup()
    {
        $this->crud->setModel(\App\Models\Tariff::class);
        $this->crud->setRoute(config('backpack.base.route_prefix') . '/tariff');
        $this->crud->setEntityNameStrings('tariffa', 'tariffe');
    }

    protected function setupListOperation()
    {
        // Columns
    }

    protected function setupCreateOperation()
    {
        $this->crud->setValidation(TariffRequest::class);

        $this->crud->addField([
            'name' => 'name',
            'label' => 'Nome',
            'type' => 'text'
        ]);

        $this->crud->addField([
            'name' => 'description',
            'label' => 'Descrizione',
            'type' => 'textarea'
        ]);

        $this->crud->addField([
            'name' => 'price',
            'label' => 'Prezzo',
            'type' => 'number',
            'attributes' => [
                'step' => 'any'
            ],
            'suffix' => '&euro;',
            'wrapper' => [
                'class' => 'form-group col-md-4'
            ]
        ]);

        $this->crud->addField([
            'name' => 'supplier_id',
            'entity' => 'supplier',
            'type' => 'relationship',
            'label'  => 'Fornitore',
            'model' => 'App\Models\Supplier',
            'placeholder' => 'Selezionare un fornitore',
            'inline_create' => true,
            'wrapper' => [
                'class' => 'form-group col-md-8'
            ],
        ]);
    }

    protected function setupUpdateOperation()
    {
        $this->setupCreateOperation();
    }

    protected function setupShowOperation() {
        $this->crud->set('show.setFromDb', false);

        $this->setupListOperation();
    }

    public function fetchSupplier() {
        return $this->fetch(Supplier::class);
    }
}

What I expected to happen

I expected that I could open and close the modal indefinite times.

What happened

In console I get these errors:

This is the error that I get when there aren’t objects available (no entries in the database):

create:572 Uncaught TypeError: Cannot read property 'id' of undefined
    at Object.success (create:572)
    at l (bundle.js?v=4.1.15@6c751de946a9c8511dd32eb7bfa3ca6a568849f5:2)
    at Object.fireWith [as resolveWith] (bundle.js?v=4.1.15@6c751de946a9c8511dd32eb7bfa3ca6a568849f5:2)
    at T (bundle.js?v=4.1.15@6c751de946a9c8511dd32eb7bfa3ca6a568849f5:2)
    at XMLHttpRequest.<anonymous> (bundle.js?v=4.1.15@6c751de946a9c8511dd32eb7bfa3ca6a568849f5:2)

This is the error that I get with the modal every time I want to add a new object (except for the first time):

create:498 Uncaught TypeError: $fields.forEach is not a function
    at HTMLButtonElement.<anonymous> (create:498)
    at HTMLButtonElement.dispatch (bundle.js?v=4.1.15@6c751de946a9c8511dd32eb7bfa3ca6a568849f5:2)
    at HTMLButtonElement.g.handle (bundle.js?v=4.1.15@6c751de946a9c8511dd32eb7bfa3ca6a568849f5:2)

What I’ve already tried to fix it

I tried to reach the file that should handle this logic, but I haven’t found it.

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

### PHP VERSION:
PHP 7.4.0 (cli) (built: Nov 27 2019 10:14:18) ( ZTS Visual C++ 2017 x64 )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.0, Copyright (c), by Zend Technologies

### LARAVEL VERSION:
v7.20.0@682ea946bc136aa686d5a64940ab3d4a24d5a613

### BACKPACK VERSION:
4.1.15@6c751de946a9c8511dd32eb7bfa3ca6a568849f5

[rinodrummer]

Thanks @tabacitu!

I successfully pushed on-top and created this PR: #3071.

[pxpm]

Hello @rinodrummer

Thanks for the report.

I could find one of the bugs, it was introduced by me in my previous update to inline create, when adding the ability to pass the main form fields along with the request to get the dialog for inline create.

I am sorry for that, I just pushed a PR with the proper fix #3064

Can you give it a test @rinodrummer ?

Thanks, Pedro