`crud.field()` js library bugs

@pxpm said (_Originally posted by @pxpm in https://github.com/Laravel-Backpack/CRUD/pull/4312#pullrequestreview-944434626_)

---

Hey @tabacitu amazing work here! So I am just giving this a round up review, I am not going to work on fixes unless you tell me to.

So until now I figured out that:

1. It does not work with arrayed name fields like date_range. It will throw an error in wrapper because of the bp-field-name

Yeah, we SHOULD fix this.

1. jquery date_picker and datetime_picker catch the change event when initializing, but then don’t catch the change when you select a date from the picker. (also happens with: address_algolia fields)

Yeah, we MUST fix this.

1. In the date html field, if you are manually typing the date, the change event is triggered in every keystoke when you start inputing the year. Same happens with datetime, time, month, week

I’m ok with this… I don’t think we should do anything about this, it’s just the way these work. Wouldn’t you agree? I’d say WON’T DO.

crud.field('date').onChange(function(e, value) {
    console.log('date')
    var now = new Date();
    var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    var selectedDate = Date.parse(value);
    if (selectedDate < today) {
        new Noty({
            type: "error",
            text: "date cant be lower than today"
          }).show();
    }
});

1. for hasOne with dot notation the bp-field-name should probably be address.street so developer can target it with address.street, otherwise it needs to know beforehand that we will change the name to address[street]. At the moment trying to add address.street as a field name in javascript will break the jquery search, changing to passing full strings to the search query makes it work:

Thanks, we COULD fix this.

constructor(fieldName) {
            this.name = fieldName;
            this.wrapper = $('[bp-field-name="'+ this.name +'"]');
            this.input = $('[bp-field-main-input][name="'+ this.name +'"]');
            // if no bp-field-main-input has been declared in the field itself,
            // assume it's the first input in that wrapper, whatever it is
            if (this.input.length == 0) {
                this.input = $('[bp-field-name="'+ this.name +'"] input, [bp-field-name="'+ this.name +'"] textarea, [bp-field-name="'+ this.name +'"] select').first();
            }
            this.value = this.input.val();
        }

1. The multiple selects use an hidden input with empty value, not to store the field itself but to submit when nothing is selected. I could not target the selects with name or name[]. I tried to add:

'wrapper' => [
   'class' => 'form-group col-md-6',
   'bp-field-main-input' => 'name[]'
],

No avail here.

Great catch! We MUST fix this.

1. can’t make any js editor work with onChange, neither by typing or moving focus out.

Another great catch, we MUST fix this.

1. video field does not catch the event too.

SHOULD DO.

1. color_picker jquery plugin will trigger the change event when you drag to chose the color triggering hundreds of times in a short period.

🤷‍♂️ I’m ok with it… to be honest… I’d say WON’T DO.

1. icon_picker does not work too

SHOULD DO

1. I haven’t tried this with repeatable, but we should consider the “events/hooks” aproach for table as this script has no effect on table field.

COULD DO

[tabacitu]

@pxpm let’s centralize our testing in this table, using this demo branch. Legend:

• ? haven’t tested
• ✅ tested, works
• 🟨 tested, doesn’t work and it should
• ❌ doesn’t work but we’re not going to do it right now
• ⛔️ not applicable

Field	onChange()	hide()	show()	enable()	disable()	require()	unrequire()	Custom
checkbox	✅	✅	✅	✅	✅	✅	✅	✅ check(), ✅ uncheck()
checklist	✅	✅	✅	✅	✅	✅	✅	-
checklist_dependency	✅	✅	✅	✅	✅	✅	✅	-
color	✅	✅	✅	✅	✅	✅	✅	-
custom_html	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️
date	✅	✅	✅	✅	✅	✅	✅	-
datetime	✅	✅	✅	✅	✅	✅	✅	-
email	✅	✅	✅	✅	✅	✅	✅	-
enum	✅	✅	✅	✅	✅	✅	✅	-
hidden	✅	✅	✅	✅	✅	✅	✅	-
month	✅	✅	✅	✅	✅	✅	✅	-
number	✅	✅	✅	✅	✅	✅	✅	-
password	✅	✅	✅	✅	✅	✅	✅	-
radio	✅	✅	✅	✅	✅	✅	✅	-
range	✅	✅	✅	✅	✅	✅	✅	-
select (1-n relationship)	✅	✅	✅	✅	✅	✅	✅	-
select_grouped	✅	✅	✅	✅	✅	✅	✅	-
select_multiple (n-n relationship)	✅	✅	✅	✅	✅	✅	✅	-
select_from_array	✅	✅	✅	✅	✅	✅	✅	-
summernote	✅	✅	✅	✅	✅	✅	✅	-
text	✅	✅	✅	✅	✅	✅	✅	-
textarea	✅	✅	✅	✅	✅	✅	✅	-
time	✅	✅	✅	✅	✅	✅	✅	-
upload	✅	✅	✅	✅	✅	✅	✅	-
upload_multiple	✅	✅	✅	✅	✅	✅	✅	-
url	✅	✅	✅	✅	✅	✅	✅	-
view	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️
week	✅	✅	✅	✅	✅	✅	✅	-
address_algolia PRO	✅	✅	✅	✅	✅	✅	✅	-
address_google PRO	✅	✅	✅	✅	✅	✅	✅	-
browse PRO	✅	✅	✅	✅	✅	✅	✅	-
browse_multiple PRO	✅	✅	✅	✅	✅	✅	✅	-
base64_image PRO	✅	✅	✅	✅	✅	✅	✅	-
ckeditor PRO	✅	✅	✅	✅	✅	✅	✅	-
color_picker PRO	✅	✅	✅	✅	✅	✅	✅	-
date_range PRO	✅	✅	✅	✅	✅	✅	✅	-
date_picker PRO	✅	✅	✅	✅	✅	✅	✅	-
datetime_picker PRO	✅	✅	✅	✅	✅	✅	✅	-
easymde PRO	✅	✅	✅	✅	✅	✅	✅	-
icon_picker PRO	✅	✅	✅	✅	✅	✅	✅	-
image PRO	✅	✅	✅	✅	✅	✅	✅	-
relationship PRO	✅	✅	✅	✅	✅	✅	✅	-
repeatable PRO	✅	✅	✅	✅	✅	✅	✅	-
select2 (1-n relationship) PRO	✅	✅	✅	✅	✅	✅	✅	-
select2_multiple (n-n relationship) PRO	✅	✅	✅	✅	✅	✅	✅	-
select2_nested PRO	✅	✅	✅	✅	✅	✅	✅	-
select2_grouped PRO	✅	✅	✅	✅	✅	✅	✅	-
select_and_order PRO	✅	✅	✅	✅	✅	✅	✅	-
select2_from_array PRO	✅	✅	✅	✅	✅	✅	✅	-
select2_from_ajax PRO	✅	✅	✅	✅	✅	✅	✅	-
select2_from_ajax_multiple PRO	✅	✅	✅	✅	✅	✅	✅	-
table PRO	✅	✅	✅	✅	✅	✅	✅	-
tinymce PRO	✅	✅	✅	✅	✅	✅	✅	-
video PRO	✅	✅	✅	✅	✅	✅	✅	-
wysiwyg PRO	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️	⛔️

[pxpm]

@tabacitu from my last tests (with pending pr’s merged) it’s only missing:

• repeatable
• enum
• address_google
• checklist_dependency
• date_range