[Bug] JS API for repeatable fields is broken when using custom_html subfield

[eleven59]

trafficstars

Bug report

What I did

If I include a custom_html subfield in a repeatable field, I get errors in the console when using the crudfield JS api for that repeatable field.

Steps to reproduce:

1. Make crud model with repeatable field which has a custom_html subfield
2. Add script widget which uses the js api for repeatable subfields as explained https://backpackforlaravel.com/docs/6.x/crud-fields-javascript-api#11-when-a-repeatable-subfield-changes-disable-another-subfield
3. Go to the admin, add new entry for this model, add two repeatable items and save
4. Go to edit the same entry again

What I expected to happen

Works as advertised here: https://backpackforlaravel.com/docs/6.x/crud-fields-javascript-api#11-when-a-repeatable-subfield-changes-disable-another-subfield

What happened

I get an error in the console, dependencies only work for the first repeatable entry, additional JS is not loaded. The error I get is:

TypeError: Cannot read properties of undefined (reading 'dataset')

What I've already tried to fix it

Removed the custom_html fields from the repeatable entry, now everything is fine again. But would like to be able to use custom html of course.

Is it a bug in the latest version of Backpack?

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

Backpack, Laravel, PHP, DB version

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

[karandatwani92]

Hey @eleven59

Can you share your JavaScript code? I would like to know what you are up to. JS API is for the input Fields. Where custom_html is technically not an input field.

[eleven59]

Sure! Here is the code:

crud.field('modules').subfield('type').onChange(function(field) {
    crud.field('modules').subfield('cases_hint', field.rowNumber).show(field.value === 'cases');
    crud.field('modules').subfield('title', field.rowNumber).show(field.value === 'text');
    crud.field('modules').subfield('content', field.rowNumber).show(field.value === 'text');
});

type is a select2_from_array field cases_hint is a custom html field that displays some info title is a text field and content is a ckeditor field

As I said before: if I change the code to this, it works without fail:

crud.field('modules').subfield('type').onChange(function(field) {
//  crud.field('modules').subfield('cases_hint', field.rowNumber).show(field.value === 'cases');
    crud.field('modules').subfield('title', field.rowNumber).show(field.value === 'text');
    crud.field('modules').subfield('content', field.rowNumber).show(field.value === 'text');
});

Edit: Ah, and some additional info: despite the JS error in the console, the code does work for the first repeatable entry, including hiding and showing the cases_hint field. The error seems to have more to do with the callback that is expected from all subfields inside the repeatable field—and I think the issue is that the custom_html field does not have a field with a dataset property and so the JS fails there.

[karandatwani92]

Hey @eleven59 Thanks for reporting. I can confirm the BUG!

@pxpm It works for the first row but throws some JS error on the console and doesn't work for other rows.

[pxpm]

Hey @eleven59 and @karandatwani92

Thanks for confirming the issue. I've just tried to reproduce it and this was probably connected with: https://github.com/Laravel-Backpack/CRUD/pull/5603

Please update backpack/crud to atleast 6.7.26 and backpack/pro to 2.2.13.

I am preemptively closing this issue, please re open if needed 🙏

[eleven59]

Thanks for your reply. I can confirm the error is gone, and show/hide for custom_html fields now works as expected in repeatable fields.