Cannot read properties of undefined (reading 'nextElementSibling') but works all right with yii\grid\GridView

[mkraibt]

I am getting Cannot read properties of undefined (reading 'nextElementSibling') in the console. This is consistent when I used the same grid code with different data in tabs, I am using BootStrap5. The grid on the first Tab seems to be ok but the select2 from the second tabs onwards keeps loading. FYI: I have set a unique ID for all grids and select2 and filters as well.

This is complete console error:
jquery.js?v=1671572081:4123 Uncaught TypeError: Cannot read properties of undefined (reading 'nextElementSibling') at Object.next (selector-engine.js:63:24) at Dropdown._getMenuElement (dropdown.js:270:27) at new Dropdown (dropdown.js:103:23) at HTMLDocument.<anonymous> (dashboard:10709:2) at mightThrow (jquery.js?v=1671572081:3830:29) at process (jquery.js?v=1671572081:3898:12)

I have tried enabling and disabling pjax for all loaded grids but no go. The only page I created among the error list is dashboard I checked the code there and the error points to (new bootstrap.Dropdown('#w3-button', {})); which was never found in DOM hence error? I disabled all filters in the grid but couldn't get it to go.

I tried using yii\grid\GridView and the error disappeared and enabling all filter works alright. What could cause this in Kartik GridView?

[mkraibt]

I did some more testing and found this is particularly caused by the GridVIew export function. If I enable the panel and export menu, the error goes away. I didn't need an export function for this grid so I didn't enable them, but grid view JS tries to initialize the function to these export buttons which does not exist thus the error.

Also, I did some testing to get rid of an export menu on the demo page as well but it looks like the export menu is compulsory.

[Jonyx4]

Something pretty similar happened to me but error was:

jQuery.Deferred exception: can't access property "parentNode", this._element is undefined Dropdown@http://localhost/kyndryl/learningv3/web/assets/7e924d34/dist/js/bootstrap.bundle.js:3888:7

Seems to be a BUG. Got this error with bootstrap 5, only workaround was to enable "panel" attribute

        'panel' => [
            'type' => 'primary',
        ],

And export

        'toolbar' =>  [
            [
                'content' =>
                    Html::a('<i class="fas fa-plus"></i> Add Request', ['/ar-status/create'], [
                        'class' => 'btn btn-success',
                        'title'=>'Add Request',
                    ]).                
                    Html::a('<i class="fas fa-redo"></i>', ['/ar-status/index'], [
                        'class' => 'btn btn-outline-secondary',
                        'title'=>'Reset',
                        'data-pjax' => 0, 
                    ]), 
                'options' => ['class' => 'btn-group mr-2 me-2']
            ],
            '{export}',
            '{toggleData}',
        ],

[TonisOrmisson]

similar issue, getting it with a very simple gridview

the error:

jquery.js?v=1670943506:4124 Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')
    at new Dropdown (dropdown.js:97:34)
    at HTMLDocument.<anonymous> (call:551:2)
    at mightThrow (jquery.js?v=1670943506:3831:29)
    at process (jquery.js?v=1670943506:3899:12)

the grid:

            <?= GridView::widget([
                'dataProvider' => $dataProvider,
                'columns' => [
                    'id',
                ],
            ]); ?>

Bootstrap (v5.2.1): dropdown.js
jQuery JavaScript Library v3.6.2

[TonisOrmisson]

by disabling export the error is not thrown any more

[jabernalv]

To get around this problem I am using "yiisoft/yii2-bootstrap5": "2.0.3"
The problem occurs with "yiisoft/yii2-bootstrap5": "2.0.4"

[kartik-v]

This is an issue in some script compatibility with yii2-bootstrap5 from v2.0.4 - while that is to be evaluated... current workaround is to use yii2-bootstrap5 v2.0.3

[kartik-v]

The fix for this for yiisoft/yii2-bootstrap5 versions >=2.0.4 depends on if the pull request is accepted at yiisoft/yii2-bootstrap5#54. As mentioned, till the fix is approved in yii2-bootstrap5, current workaround is to lock your yii2-bootstrap5 version to v2.0.3. Will need to otherwise figure out a way to delink the yii2-bootstrap5 library if the PR does not get accepted.

[jabernalv]

Ok Kartik, We'll be waiting for the result. Thank you very much for your good activities

[kartik-v]

Have done some enhancements to render layout parts better. Suggest to test if this resolves your yii2-bootstrap5 version issues. New release v3.5.1.

[jabernalv]

Dear Kartik:

I hope this message finds you well. I am writing to express my sincere gratitude for the swift and efficient resolution of the incident we encountered in kartik\grid\GridView. Your timely assistance and expertise were instrumental in getting things back on track.

I am pleased to inform you that the issue has been successfully resolved, thanks to your diligent efforts. Your dedication and support have been invaluable in ensuring the smooth functioning of our systems.

As we move forward, I would like to remind all users to ensure they are using the latest version of kartik\grid\GridView. Upgrading to the most recent version is crucial.

Once again, thank you for your exceptional support in overcoming this challenge. Your commitment to excellence is truly appreciated by the entire users.

[newadventure079]

@kartik-v I'm on kartik-v/yii2-grid v3.5.1 and yiisoft/yii2-bootstrap5 2.0.4 and I'm still seeing

jquery.js:4095  Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')
    at new Dropdown (dropdown.js:98:34)
    at HTMLDocument.<anonymous> (59208:431:2)
    at mightThrow (jquery.js:3802:29)
    at process (jquery.js:3870:12)

If I downgrade to yiisoft/yii2-bootstrap5 2.0.3 the error doesn't happen

[kartik-v]

@newadventure079 - am unable to reproduce your issue. Can you share your GridView configuration and code to reproduce your issue?

You can cross check this on Krajee Grid Demos page which is on latest yiisoft/yii2-bootstrap5 as well as latest Bootstrap library version 5.3.0. For example try setting the showPanel to false in the grid configuration on the page provided - and then see that the grid view renders properly without console errors.

[newadventure079]

I can reproduce it with the same steps @TonisOrmisson gave. #1056 (comment)

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
    ],
]); ?>

Bootstrap v5.3.0 jQuery JavaScript Library v3.6.4 yii2-bootstrap5-dropdown 1.0.2 Bootstrap Popover Extended 1.5.2 yii2-editable 1.8.0

I'm using kartik\grid\EditableColumn

[kartik-v]

I can reproduce it with the same steps @TonisOrmisson gave. #1056 (comment)

I definitely cannot reproduce this for the scenario above on my test environment. Can you ensure you have the latest code and / or cross check your environment for any CACHING issues running outdated / stale code?

[newadventure079]

Nothing is stale. I delete my web assets after each composer update. Also, when I use yiisoft/yii2-bootstrap5 2.0.3, it's immediately fixed

[kartik-v]

Sorry mate - cannot reproduce your issue. Here is a test link which works with a simple gridview config.

[newadventure079]

I'm also seeing

jquery.js:4095  Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at Modal._initializeBackDrop (modal.js:158:39)
    at new Modal (modal.js:69:27)
    at HTMLDocument.<anonymous> (event:520:2)
    at mightThrow (jquery.js:3802:29)
    at process (jquery.js:3870:12)

on a different gridview

[newadventure079]

After manually merging in yiisoft/yii2-bootstrap5#54 (with a couple of minor typo fixes), the error is no longer present using yiisoft/yii2-bootstrap5 2.0.4

[kartik-v]

Not sure why. You actually do not need PR from yiisoft/yii2-bootstrap5#54 to be merged - if you somehow have confirmed you have the latest kartik-v/yii2-grid v3.5.1 - it should not need any other changes -- as tested in my local environment. It looks like some outdated code is running on your environment (to test you may want to check a brand new yii2 app install and implement this extension and retry). Seems @jabernalv has confirmed the issue is resolved. Will request others to check the same as well and let know. Thanks.

[newadventure079]

I wiped out my entire vendor dir and re-ran composer. Below are the packages and their versions that I have

Output

composer update
Loading composer repositories with package information
Updating dependencies
Nothing to modify in lock file
Installing dependencies from lock file (including require-dev)
Package operations: 74 installs, 0 updates, 0 removals
- Installing yiisoft/yii2-composer (2.0.10): Extracting archive
- Installing paragonie/random_compat (v9.99.100): Extracting archive
- Installing ezyang/htmlpurifier (v4.16.0): Extracting archive
- Installing cebe/markdown (1.2.1): Extracting archive
- Installing bower-asset/jquery (3.6.4): Extracting archive
- Installing bower-asset/yii2-pjax (2.0.8): Extracting archive
- Installing bower-asset/punycode (v1.3.2): Extracting archive
- Installing bower-asset/inputmask (3.3.11): Extracting archive
- Installing yiisoft/yii2 (2.0.48.1): Extracting archive
- Installing robrichards/xmlseclibs (3.1.1): Extracting archive
- Installing onelogin/php-saml (3.6.1): Extracting archive
- Installing asasmoyo/yii2-saml (2.2.0): Extracting archive
- Installing kartik-v/bootstrap-fileinput (v5.5.2): Extracting archive
- Installing kartik-v/bootstrap-star-rating (v4.1.2): Extracting archive
- Installing kartik-v/dependent-dropdown (v1.4.9): Extracting archive
- Installing kartik-v/yii2-krajee-base (v3.0.5): Extracting archive
- Installing kartik-v/yii2-bootstrap5-dropdown (v1.0.2): Extracting archive
- Installing kartik-v/yii2-widget-activeform (v1.6.2): Extracting archive
- Installing kartik-v/yii2-dialog (v1.0.6): Extracting archive
- Installing kartik-v/yii2-detail-view (v1.8.7): Extracting archive
- Installing kartik-v/bootstrap-popover-x (v1.5.2): Extracting archive
- Installing kartik-v/yii2-popover-x (v1.3.5): Extracting archive
- Installing kartik-v/yii2-editable (v1.8.0): Extracting archive
- Installing psr/simple-cache (3.0.0): Extracting archive
- Installing psr/http-message (1.1): Extracting archive
- Installing psr/http-factory (1.0.2): Extracting archive
- Installing psr/http-client (1.0.2): Extracting archive
- Installing markbaker/matrix (3.0.1): Extracting archive
- Installing markbaker/complex (3.0.2): Extracting archive
- Installing maennchen/zipstream-php (3.1.0): Extracting archive
- Installing phpoffice/phpspreadsheet (1.29.0): Extracting archive
- Installing setasign/fpdi (v2.3.7): Extracting archive
- Installing psr/log (3.0.0): Extracting archive
- Installing myclabs/deep-copy (1.11.1): Extracting archive
- Installing mpdf/psr-log-aware-trait (v3.0.0): Extracting archive
- Installing mpdf/mpdf (v8.1.6): Extracting archive
- Installing kartik-v/yii2-mpdf (v1.0.6): Extracting archive
- Installing select2/select2 (4.0.13): Extracting archive
- Installing kartik-v/yii2-widget-select2 (v2.2.5): Extracting archive
- Installing kartik-v/yii2-sortable (v1.2.2): Extracting archive
- Installing kartik-v/yii2-grid (v3.5.1): Extracting archive
- Installing kartik-v/yii2-dynagrid (v1.5.4): Extracting archive
- Installing kartik-v/yii2-export (v1.4.2): Extracting archive
- Installing kartik-v/yii2-helpers (v1.3.9): Extracting archive
- Installing bower-asset/jquery-ui (1.12.1): Extracting archive
- Installing yiisoft/yii2-jui (2.0.7): Extracting archive
- Installing components/flag-icon-css (3.5.0): Extracting archive
- Installing kartik-v/yii2-icons (v1.4.8): Extracting archive
- Installing kartik-v/yii2-dropdown-x (v1.2.1): Extracting archive
- Installing kartik-v/yii2-nav-x (v1.2.5): Extracting archive
- Installing kartik-v/yii2-number (v1.0.5): Extracting archive
- Installing kartik-v/yii2-widget-typeahead (v1.0.4): Extracting archive
- Installing kartik-v/yii2-widget-touchspin (v1.2.4): Extracting archive
- Installing kartik-v/yii2-widget-timepicker (v1.0.5): Extracting archive
- Installing kartik-v/yii2-widget-switchinput (v1.3.1): Extracting archive
- Installing kartik-v/yii2-widget-spinner (v1.0.1): Extracting archive
- Installing kartik-v/yii2-widget-sidenav (v1.0.1): Extracting archive
- Installing kartik-v/yii2-widget-rating (v1.0.5): Extracting archive
- Installing kartik-v/yii2-widget-rangeinput (v1.0.2): Extracting archive
- Installing kartik-v/yii2-widget-growl (v1.1.2): Extracting archive
- Installing kartik-v/yii2-widget-fileinput (v1.1.1): Extracting archive
- Installing kartik-v/yii2-widget-depdrop (v1.0.6): Extracting archive
- Installing kartik-v/yii2-widget-datetimepicker (v1.5.1): Extracting archive
- Installing kartik-v/yii2-widget-datepicker (v1.4.8): Extracting archive
- Installing kartik-v/yii2-widget-colorinput (v1.0.6): Extracting archive
- Installing kartik-v/yii2-widget-alert (v1.1.5): Extracting archive
- Installing kartik-v/yii2-widget-affix (v1.0.0): Extracting archive
- Installing kartik-v/yii2-widgets (v3.4.1): Extracting archive
- Installing openspout/openspout (v4.15.0): Extracting archive
- Installing bower-asset/bootstrap (v5.3.0): Extracting archive
- Installing yiisoft/yii2-bootstrap5 (2.0.4): Extracting archive
- Installing yiisoft/yii2-debug (2.1.24): Extracting archive
- Installing phpspec/php-diff (v1.1.3): Extracting archive
- Installing yiisoft/yii2-gii (2.2.6): Extracting archive
Generating autoload files
20 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found

[newadventure079]

The problem is it's trying to render w2-button and it doesn't exist.

(new bootstrap.Dropdown('#w2-button', {}));

dropdown.js:98 Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')
    at new Dropdown (dropdown.js:98:34)
    at <anonymous>:1:2

[kartik-v]

The problem is it's trying to render w2-button and it doesn't exist.

Which it should not with the latest release v3.5.1 ... and I wish to know how it is happening. Are you running opcache or something on your server which is serving stale cached code? Or is there some way for you to debug the same on any other environment?

[jabernalv]

Not sure why. You actually do not need PR from yiisoft/yii2-bootstrap5#54 to be merged - if you somehow have confirmed you have the latest kartik-v/yii2-grid v3.5.1 - it should not need any other changes -- as tested in my local environment. It looks like some outdated code is running on your environment (to test you may want to check a brand new yii2 app install and implement this extension and retry). Seems @jabernalv has confirmed the issue is resolved. Will request others to check the same as well and let know. Thanks.

Yes, I uninstalled my entire vendor folder, removed yii-bootstrap-5 and kartik grid view from the composer.json file, then reinstalled them, and now everything works perfectly.

This is my composer.json

"php": ">=8.1.0",
"yiisoft/yii2": "^2.0.47",
"yiisoft/yii2-symfonymailer": "^2.0.3",
"yiisoft/yii2-bootstrap5": "^2.0@dev",
"yiisoft/yii2-jui": "^2.0",
"conquer/modal": "1.1.6.x-dev",
"kartik-v/bootstrap-tabs-x": "^1.3",
"kartik-v/yii2-bootstrap5-dropdown": "^1.0.2",
"kartik-v/yii2-date-range": "dev-master",
"kartik-v/yii2-checkbox-x": "",
"kartik-v/yii2-widget-datepicker": "dev-master",
"kartik-v/yii2-detail-view": "dev-master",
"kartik-v/yii2-dialog": "dev-master",
"kartik-v/yii2-editable": "",
"kartik-v/yii2-export": "@dev",
"kartik-v/yii2-widget-fileinput": "1.1.x-dev",
"kartik-v/yii2-helpers": "dev-master",
"kartik-v/yii2-icons": "@dev",
"kartik-v/yii2-mpdf": "dev-master",
"kartik-v/yii2-nav-x": "@dev",
"kartik-v/yii2-password": "dev-master",
"kartik-v/yii2-slider": "dev-master",
"kartik-v/yii2-tabs-x": "",
"kartik-v/yii2-tree-manager": "dev-master",
"kartik-v/yii2-widget-activeform": "dev-master",
"kartik-v/yii2-widget-select2": "dev-master",
"kartik-v/yii2-widgets": "",
"kartik-v/yii2-widget-depdrop": "@dev",
"yii2assets/yii2-pdfjs": ">=1.0",
"raoul2000/yii2-workflow": "",
"cornernote/yii2-linkall": "",
"microinginer/yii2-dropdown-action-column": "^1.0",
"onmotion/yii2-widget-apexcharts": "^1.0",
"doctrine/cache": "^1.10",
"jabernal/yii2-settings": "dev-master",
"ezze/yii2-mobile-detect": "dev-master",
"symfony/browser-kit": ">=2.7 <=4.2.4",
"phpoffice/phpspreadsheet": "",
"phpoffice/phpword": "",
"2amigos/yii2-tinymce-widget": "~1.1",
"setasign/fpdf": "",
"setasign/fpdi-protection": "",
"2amigos/yii2-gallery-widget": "^1.1",
"2amigos/yii2-chartjs-widget": "^3.0",
"edofre/yii2-fullcalendar": "1.0.x-dev",
"yii2tech/ar-dynattribute": "1.0.x-dev",
"kartik-v/yii2-grid": "^3.5@dev"

[newadventure079]

@kartik-v I'm using kartik-v/yii2-dynagrid instead of kartik-v/yii2-grid. Would a similar fix need to be made for yii2-dynagrid?

[kartik-v]

@kartik-v I'm using kartik-v/yii2-dynagrid instead of kartik-v/yii2-grid. Would a similar fix need to be made for yii2-dynagrid?

Yes. This is not related to this extension - suggest that this be an issue logged in that respective extension. Can you now confirm yii2-grid works as intended?

[newadventure079]

I got it to work with plain GridView but only after I commented out code that used the ExportMenu functionality. A couple of people above mentioned getting rid of the error after removing export functionality

[kartik-v]

FYI... Along with yii2-grid, the yii2-dynagrid and yii2-export extensions have also been enhanced and new releases have been deployed. So this issue should get resolved in these dependent extensions.

[newadventure079]

@kartik-v Thanks for the fixes! I was using yii2-dynagrid and yii2-export so that's why I continued to see errors.

[kartik-v]

@kartik-v Thanks for the fixes! I was using yii2-dynagrid and yii2-export so that's why I continued to see errors.

You are welcome. To ensure prompter and more correct fixing - suggest if issues can be logged (and tested) in the right repository/extension to help debug the source of the issue and resolve. Thanks.