CRUD
CRUD copied to clipboard
Laravel-Backpack
CRUD field JS Does Not Play Nicely With Repeatable and Date Range
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 (
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
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
Hello @zachweix
I confirm the issue and will ask @pxpm about this.
Thanks for this issue report.
Cheers.
Hey @zachweix
I think that #5603 also fixed this, alongside with the changes in backpack/pro 2.2.13.
I've just tried a similar example to what you described and it seems to be working fine:
crud.field('extra_features').subfield('quantity').onChange(function(field) {
if (field.value <= 0) {
crud.field('extra_features').subfield('feature', field.rowNumber).hide();
} else {
crud.field('extra_features').subfield('feature', field.rowNumber).show();
}
}).change();
Let me know if you are still experiencing issues after update. 👍
Cheers
