[Possible Bug] select2 width don't fit properly when form contains select2_from_array with mutiple allowed

[kiddtang]

trafficstars

Bug report

What I did

1. Any CRUD form which contains at least a field with type 'select2_from_array' with 'allows_multiple' => true,

[
        'name'            => 'supplier_types',
        'label'           => 'Supplier Type',
        'type'            => 'select2_from_array',
        'options'         => $this->supplier_options,
        'allows_null'     => false,
        'allows_multiple' => true,
        'wrapper' => ['class' => 'form-group col-md-4']
],

2. Browse the CRUD form for the first time (or Open Dev Tools and Refresh with Empty Cache with Hard Reload)

What I expected to happen

The select2 should fit 100% in the wrapper.

What happened

All select2 (single/multiple select) width does not fit 100% (quite easily reproduce if Refresh with Empty Cache with Hard Reload) The width not always calc properly, I afraid this might be a "racing issue"

Note: 'select2_multiple' has no issue like this

What I've already tried to fix it

Just try to refresh one few more time, then it will fit properly. if try to make 'allows_multiple' => false, then issue will not happen.

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there?

Yes

Backpack, Laravel, PHP, DB version

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

Using Homestead as Dev environment.

PHP VERSION:

PHP 8.0.16 (cli) (built: Feb 21 2022 14:42:00) ( NTS ) Copyright (c) The PHP Group Zend Engine v4.0.16, Copyright (c) Zend Technologies with Zend OPcache v8.0.16, Copyright (c), by Zend Technologies

LARAVEL VERSION:

v8.83.9@ac6e16bb56510eda2e373c6365d5c92da3fd559d

BACKPACK VERSION:

5.0.14@1e355c4c046a34423a1a3e3150120245a4bfd8e9

[pxpm]

Hello @kiddtang

I've been trying to reproduce this for the last 40m and I was not able to.

I am using this fields:

$this->crud->addField([ // select2_from_array
            'name'              => 'test',
            'label'             => 'input',
            'type'              => 'text',
            'fake' => true,     
            'wrapper' => ['class' => 'form-group col-md-3'],
        ]);

        $this->crud->addField([ // select2_from_array
            'name'              => 'test2',
            'label'             => 'input2',
            'type'              => 'text',
            'fake' => true,     
            'wrapper' => ['class' => 'form-group col-md-3'],
        ]);

        $this->crud->addField([
            'name'              => 'select2',
            'label'             => 'select2',
            'type'              => 'select2',
            'model' => \App\Models\Icon::class,
            'attribute' => 'name',
            'fake' => true,      
            'wrapper' => ['class' => 'form-group col-md-3'],
        ]);
        $this->crud->addField([ // select2_from_array
            'name'              => 'fake2',
            'label'             => 'select 2 from array',
            'type'              => 'select2_from_array',
            'options'           => ['one' => 'kjsdfn kjsadfj kekmrlg', 'two' => ' slkadflkas mdlkfm malsdmf ', 'three' => 's adlkfmlkams dlkfmlka msdlkfm as'],
            'allows_null'       => false,
            'allows_multiple'   => true,
            'wrapper' => ['class' => 'form-group col-md-3'],
            'fake' => true
        ]);

I've tried with hard reset too, and manually cleaned caches etc.

What I think it's more strange here is the fact that you say that if you refresh the page again they will fit properly, so .. can we be sure that is removing the multiple from the select2_from_array that fixes it ? In terms of interface they are quite different, one uses a text placeholder to show the selected option (when not multiple), the other show "chips" or "tags" as the selected options.

Any cutom javascript/blade files on your side ?

Let me know, cheers!

[kiddtang]

@pxpm really appreciate you taking so much time looking at it... this issue also puzzles me, and it seems like happening on this particular CRUD only... I tried to trim to the simplest form... this is the complete CrudController file

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Requests\SupplierCrudRequest;
use Backpack\CRUD\app\Http\Controllers\CrudController;
use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;

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

    /**
     * Configure the CrudPanel object. Apply settings to all operations.
     *
     * @return void
     */
    public function setup()
    {
        CRUD::setModel(\App\Models\Supplier::class);
        CRUD::setRoute(config('backpack.base.route_prefix') . '/suppliers');
        CRUD::setEntityNameStrings('Supplier', 'Suppliers');
    }

    /**
     * Define what happens when the List operation is loaded.
     *
     * @see  https://backpackforlaravel.com/docs/crud-operation-list-entries
     * @return void
     */
    protected function setupListOperation()
    {
        //
    }

    /**
     * Define what happens when the Create operation is loaded.
     *
     * @see https://backpackforlaravel.com/docs/crud-operation-create
     * @return void
     */
    protected function setupCreateOperation()
    {
        $this->addFields();
        CRUD::setValidation(SupplierCrudRequest::class);
    }

    /**
     * Define what happens when the Update operation is loaded.
     *
     * @see https://backpackforlaravel.com/docs/crud-operation-update
     * @return void
     */
    protected function setupUpdateOperation()
    {
        $this->addFields();
        CRUD::setValidation(SupplierCrudRequest::class);
    }



    /*
     * Add fields for the form
     */
    protected function addFields()
    {
        $this->crud->addFields([

            [
                'name'            => 'identification_type',
                'label'           => 'Identification Type',
                'type'            => 'select2_from_array',
                'options'         => [],
                'allows_null'     => false,
                'allows_multiple' => false,
                'wrapper'         => ['class' => 'form-group col-md-4']
            ],

            [
                'name'            => 'types',
                'label'           => 'Supplier Type',
                'type'            => 'select2_multiple',
                'model'           => "App\Models\SupplierType",
                'attribute'       => 'name',
                'pivot'           => true,
                'select_all'      => true,
                'wrapper'         => ['class' => 'form-group col-md-4']
            ],

        ]);
    }
}

but it is still behave weirdly ...

I am also suspecting it is some performance issue on Homestead. However, my other complex (multiple tab) with select2 has no such issue. Did you spot anything I did wrongly?

Ahh ... it is just so weird 😂

Btw, I will observe if it is reproducible on my Linux hosting server, if it really can't reproduce on my hosting site, I will just close it.

Appreciate your help!

[tvdr]

Hi,

do you know why your form card's width is animated? On my backpack instance it just fades in.

Initializing select2 while its parent containers width is changing can produce this kind of error. (see an example on codepen

[kiddtang]

@tvdr I got your point! I didn't closely observe it is actually animating and expanding to the right. I did not do anything to make it animate anyway, however, I don't see it animating and expanding while reloading for Backpack v5.3.0.

I think I will close it for now and look closely if it is happening again on another crud panel.