dropdowns KO

[blondie63]

I racked my brain one day but I can't figure out why, suddenly in one of my webapps, all the dropdowns no longer work and don't show any elements.
Clearly I check the tables of the DB and I also used DD() to see the values of the linked tables and everything is fine!
Laravel.log has no errors !
Then I understand it was a Crud, instead everyone has the same problem, even some that I haven't modified for a long time!
Ah, I'm using everything updated:

PHP VERSION:

PHP 8.2.6 (cli) (built: May 10 2023 06:36:11) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.6, Copyright (c) Zend Technologies
 with Xdebug v3.2.1, Copyright (c) 2002-2023, by Derick Rethans
 with Zend OPcache v8.2.6, Copyright (c), by Zend Technologies

LARAVEL VERSION:

v10.12.0@9e6dcff23ab1d4b522bef56074c31625cf077576

BACKPACK PACKAGE VERSIONS:

backpack/crud: 5.6.0
backpack/devtools: 1.3.5
backpack/editable-columns: 2.1.4
backpack/generators: 3.3.16
backpack/pro: 1.6.4

attached part of my code
DropDownKO-Help.zip

Some ideas to help ?

[pxpm]

Hey @blondie63 can you help me a bit more here ?

What you mean that all dropdowns KO ?

Can you put some screenshots ? Also did you check browser console for Javascript errors ?

Cheers

[blondie63]

Hi @pxpm I've created two videos t
this is the first where you can see the problem:

pic-drop-down-ko.mp4

In this second video you can see another app where i can use the very same code and there's no problems:

Booking-dropdown-ok.mp4

What you think ?

[blondie63]

Thinking a js problem i've done this:
delete the public/packages directory and all its contents;
run php artisan vendor:publish --provider="Backpack\CRUD\BackpackServiceProvider" --tag=public

But the result remains the same!

So I decided to debug client side and look what I found! When the page loads there are some exceptions but going on at a certain point the DropDown is loaded and in fact I see the value (Country = Italy) but going on it still disappears!
I had already debugged the PHP side of the various Cruds before and I'm sure that the values to load in select2 are always there, among other things, sometimes I use select_from_array and other select2 but none work correctly! What can it be ?

pic-drop-down-ko-js-debug.mp4

[blondie63]

Here a new video showing some console errors

pic-drop-down-ko-js-debug-err.mp4

[blondie63]

I also view source page when selector is rendered empty...

[pxpm]

It seems that your select2 is not initialized:

It's missing some select2 classes, added by the select2 library.

You mentioned in other issue that you added a sidebar company select that also uses select2. There may be a conflict with those files when both inside the same page.

Can that be the issue ?

Cheers

[blondie63]

Hi @pxpm , thanks for your reply !
No is not possible because i've another project with same company selector, exacttly the same code and working fine
Now i saved that page as html and trying to debug locally, i've seen that cutting some parts the select2 start to works fine.
I'm trying to narrow down the offending piece of code..
select2-debug.html.zip

[blondie63]

Finally i've found the code block indicted:

<script>
    // if nullable, make sure the Clear button uses the translated string
    document.styleSheets[0].addRule('.select2-selection__clear::after','content:  "Pulisci";');


    /**
     *
     * This method gets called automatically by Backpack:
     *
     * @param  node element The jQuery-wrapped "select" element.
     * @return void
     */
    function bpFieldInitRelationshipSelectElement(element) {
        var $placeholder = element.attr('data-placeholder');
        var $multiple = element.attr('data-field-multiple')  == 'false' ? false : true;
        var $allows_null = (element.attr('data-column-nullable') == 'true') ? true : false;
        var $allowClear = $allows_null;
        var $isFieldInline = element.data('field-is-inline');
        var $isPivotSelect = element.data('is-pivot-select');
        
        const changePivotOptionState = function(pivotSelector, enable = true) {
            let containerName = getPivotContainerName(pivotSelector);
            let pivotsContainer = pivotSelector.closest('div[data-repeatable-holder="'+containerName+'"]');
            
            $(pivotsContainer).children().each(function(i,container) {
                $(container).find('select').each(function(i, el) {
                    
                    if(typeof $(el).attr('data-is-pivot-select') !== 'undefined' && $(el).attr('data-is-pivot-select')) {
                        if(pivotSelector.val()) {
                            if(enable) {
                                $(el).find('option[value="'+pivotSelector.val()+'"]').prop('disabled',false);   
                            }else{
                                if($(el).val() !== pivotSelector.val()) {
                                    $(el).find('option[value="'+pivotSelector.val()+'"]').prop('disabled',true);
                                }
                            }
                        }
                    }
                });
            });
        };

        const getPivotContainerName = function(pivotSelector) {
            let containerName = pivotSelector.data('repeatable-input-name')
            return containerName.substring(0, containerName.indexOf('['));
        }

        const disablePreviouslySelectedPivots = function(pivotSelector) {
            
            let containerName = getPivotContainerName(pivotSelector);
            let pivotsContainer = pivotSelector.closest('div[data-repeatable-holder="'+containerName+'"]');

            let selectedValues = [];
            let selectInputs = [];
            
            $(pivotsContainer).children().each(function(i,container) {
                $(container).find('select').each(function(i, el) {
                    if(typeof $(el).attr('data-is-pivot-select') !== 'undefined' && $(el).attr('data-is-pivot-select') != "false") {
                        selectInputs.push(el);
                        if($(el).val()) {
                            selectedValues.push($(el).val());
                        }
                    }
                });
            });

            selectInputs.forEach(function(input) {
                selectedValues.forEach(function(value) {
                    if(value !== $(input).val()) {
                        $(input).find('option[value="'+value+'"]').prop('disabled',true);
                    }
                });
            });
        };

        var $select2Settings = {
                theme: 'bootstrap',
                multiple: $multiple,
                placeholder: $placeholder,
                allowClear: $allowClear,
                dropdownParent: $isFieldInline ? $('#inline-create-dialog .modal-content') : $(document.body)
            };
        if (!$(element).hasClass("select2-hidden-accessible"))
        {
            $(element).select2($select2Settings);
            
            if($isPivotSelect) {
                disablePreviouslySelectedPivots($(element));
            }
        }

        if($isPivotSelect) {
            $(element).on('select2:selecting', function(e) {
                if($(this).val()) {
                    changePivotOptionState($(this)); 
                }
                return true;
            });

            $(element).on('select2:select', function(e) {
                changePivotOptionState($(this), false);
                return true;
            });

            $(element).on('CrudField:delete', function(e) {
                changePivotOptionState($(this));
                return true;
            });
        }

    }
</script>

@pxpm ,
Without this select2 function are rendered right ! but where does this code come from , do you have any idea ?

[pxpm]

That code comes from a relationship field, inside crud/fields/relationship/select.blade.php

Is possible that you have that file published in your resources folder or are you getting it from the vendor folder ?

I don't think the problem is with composer packages, I am 99% sure it's something with JS/CSS or similar.

[blondie63]

@pxpm I've seen another thing, running composer outdated on working project i've this result:
Direct dependencies required in composer.json:
Everything up to date

Transitive dependencies not required in composer.json:
Everything up to date

Instead running same command on project where crud select or select2 does'nt works i've this:
Direct dependencies required in composer.json:
Everything up to date

Transitive dependencies not required in composer.json:
creof/wkt-parser 2.0.0 2.2.0 Parser for well-known text (WKT) object strings
doctrine/lexer 2.1.0 3.0.0 PHP Doctrine Lexer parser library that can be used in Top-Down, Recursive Descent Parsers.
maennchen/zipstream-php v2.4.0 3.0.2 ZipStream is a library for dynamically streaming dynamic zip files from PHP without writing to the disk at all on the server.
psr/http-message 1.1 2.0 Common interface for HTTP messages

Could this be the problem?
But "composer update" does not update these packages !

[blondie63]

@pxpm Hi, deleting code you notify me in #517 this issue is fixed!
My fault, trying to add italian lang for select2..
Thanks a lot
Regards