Laravel-Backpack / CRUD

Build custom admin panels. Fast!
https://backpackforlaravel.com
MIT License
3k stars 880 forks source link

CRUD field JS Does Not Play Nicely With Repeatable and Date Range #5475

Open zachweix opened 3 months ago

zachweix commented 3 months ago

Bug report

What I did

I had a date range in a repeatable and wrote a JavaScript function crud.field('rules').subfield('applicability').onChange(...) Definition:

CRUD::field('rules')
    ->type('repeatable')
    ->min_rows(1)
    ->subfields([
        [
            'name' => 'applicability',
            'type' => 'select_from_array',
            'wrapper' => ['class' => 'form-group col-2'],
            'allows_null' => false,
            'options' => [
                'always' => 'Always',
                'date_range' => 'Date Range',
            ],
        ],
        [
            'name' => 'start_date,end_date',
            'label' => 'Date Range',
            'type' => 'date_range',
            'wrapper' => ['class' => 'form-group col-10'],
            'default' => [now(), now()->addDays(30)],
        ],
    ]);

What I expected to happen

No JavaScript errors in the console

What happened

I got the following errors in the console: jQuery.Deferred exception: Cannot read properties of undefined (reading 'dataset') TypeError: Cannot read properties of undefined (reading 'dataset') at http://localhost/edit/event/create:1367:70 at Array.forEach () at HTMLDivElement. (http://localhost/edit/event/create:1364:27) at Function.each (https://unpkg.com/jquery@3.6.1/dist/jquery.min.js?f87fe3cd3b0b:2:3003) at S.fn.init.each (https://unpkg.com/jquery@3.6.1/dist/jquery.min.js?f87fe3cd3b0b:2:1481) at setupFieldCallbacks (http://localhost/edit/event/create:1363:34) at newRepeatableElement (http://localhost/edit/event/create:1180:13) at HTMLButtonElement. (http://localhost/edit/event/create:1072:17) at HTMLButtonElement.dispatch (https://unpkg.com/jquery@3.6.1/dist/jquery.min.js?f87fe3cd3b0b:2:43064) at y.handle (https://unpkg.com/jquery@3.6.1/dist/jquery.min.js?f87fe3cd3b0b:2:41048) undefined S.Deferred.exceptionHook @ jquery.min.js?f87fe3cd3b0b:2 t @ jquery.min.js?f87fe3cd3b0b:2 setTimeout (async) (anonymous) @ jquery.min.js?f87fe3cd3b0b:2 c @ jquery.min.js?f87fe3cd3b0b:2 fireWith @ jquery.min.js?f87fe3cd3b0b:2 fire @ jquery.min.js?f87fe3cd3b0b:2 c @ jquery.min.js?f87fe3cd3b0b:2 fireWith @ jquery.min.js?f87fe3cd3b0b:2 ready @ jquery.min.js?f87fe3cd3b0b:2 $ @ jquery.min.js?f87fe3cd3b0b:2 jquery.min.js?f87fe3cd3b0b:2 Uncaught TypeError: Cannot read properties of undefined (reading 'dataset') at create:1367:70 at Array.forEach () at HTMLDivElement. (create:1364:27) at Function.each (jquery.min.js?f87fe3cd3b0b:2:3003) at S.fn.init.each (jquery.min.js?f87fe3cd3b0b:2:1481) at setupFieldCallbacks (create:1363:34) at newRepeatableElement (create:1180:13) at HTMLButtonElement. (create:1072:17) at HTMLButtonElement.dispatch (jquery.min.js?f87fe3cd3b0b:2:43064) at y.handle (jquery.min.js?f87fe3cd3b0b:2:41048)

What I've already tried to fix it

I fixed it by making a change in the repeatable field in the setupFieldCallbacks function. When we loop through container.children() and then loop through subfields.forEach, after getting the subfield I wrap the rest of the closure in if (subfield.input) so that date range can silently continue. I'm not 100% sure if this is the correct solution, but in my case it worked.

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:

PHP VERSION:

PHP 8.3.2-1+ubuntu22.04.1+deb.sury.org+1 (cli) (built: Jan 20 2024 14:16:40) (NTS) Copyright (c) The PHP Group Zend Engine v4.3.2, Copyright (c) Zend Technologies with Zend OPcache v8.3.2-1+ubuntu22.04.1+deb.sury.org+1, Copyright (c), by Zend Technologies with Xdebug v3.3.1, Copyright (c) 2002-2023, by Derick Rethans

LARAVEL VERSION:

11.0.7.0

BACKPACK PACKAGE VERSIONS:

backpack/basset: 1.3.0 backpack/crud: 6.7.0 backpack/editable-columns: 3.0.1 backpack/generators: v4.0.4 backpack/pro: 2.1.8 backpack/theme-tabler: 1.2.8

zachweix commented 3 months ago

I've noticed this also happens if I have custom_html, but again my tweak here will fix it for that field type as well

jcastroa87 commented 3 months ago

Hello @zachweix

I confirm the issue and will ask @pxpm about this.

image

Thanks for this issue report.

Cheers.