event handling issue for fields added post page load

[aurovrata]

Hi Jules, hope this PR finds you well.

I have encountered 2 issues with a recent development on my Smart Grid-layout plugin which uses the HybridDropdown js plugin to display dynamic lists of checkboxes.

1. Event fired by fields added post page load not picked up.

The HybridDropdown is built and initialised from a JSON object once the document is ready, creating a list of checkbox in an HTML dropdown field. As a result, your front-end script's input change event handler,

Wpcf7cfForm.prototype.updateEventListeners = function() {

    var form = this;

    // monitor input changes, and call displayFields() if something has changed
    form.get('input, select, textarea, button').not('.wpcf7cf_add, .wpcf7cf_remove').off(wpcf7cf_change_events).on(wpcf7cf_change_events,form, function(e) {

fails to pik up the list of checkboxes as it has yet to be instantiated when your script binds events to the input fields.

I therefore suggest the following change which works just as well,

Wpcf7cfForm.prototype.updateEventListeners = function () {
  var form = this; // monitor input changes, and call displayFields() if something has changed

  form.$form.off(wpcf7cf_change_events).on(wpcf7cf_change_events, form.get('input, select, textarea, button').not('.wpcf7cf_add, .wpcf7cf_remove'), function (e) {

bind the event listener on the form and use event delegation to filter them. This has the advantage of binding fewer event listeners (more efficient) but also catching events fired by fields which were added post page load.

2. clear_on_hide not working for pure js event listeners

The 2nd issue is again related to the HybridDropdown field which implement a pure js event listening functionality to change the field when an external/programmatic 'change' event is fired on one of its checkbox fields.

Your front-end scripts uses the jQuery trigger method to fire a change event,

 $inputs.trigger("change");

Unfortunately the trigger method has a downside that the event fired on a checkbox does not bubble up, see this StackOverflow answer for more details. I therefore propose to use the js dispatchEvent method to fire the event,

 $inputs.each(function(){this.dispatchEvent(new Event("change",{"bubbles":true}))});

what do you think?

[aurovrata]

I just realised that for the first issue, the event delegation can be done simpler with,

form.$form.off(wpcf7cf_change_events).on(wpcf7cf_change_events, 'input, select, textarea, button, :not(.wpcf7cf_add), :not(.wpcf7cf_remove)', function (e) {

but would require some testing to make sure the event trigger selectors work properly.

[aurovrata]

I just tested the above change on my test server and it is working fine, except that I don't have repeater fields available so I am not able to test the :not() selectors.

[pwkip]

Thanks @aurovrata . I finally had some time to test this PR. The 2nd change seems to cause no ill effects, and I think I'll implement it in the next release of the plugin. However, the first change throws a JavaScript error, so will need to look further into this.

[aurovrata]

However, the first change throws a JavaScript error, so will need to look further into this.

can you share the error? It was working well for me on my test server.

[pwkip]

scripts_es6.js:457 Uncaught TypeError: form.displayFields is not a function
at scripts_es6.js:457

[aurovrata]

scripts_es6.js:457 Uncaught TypeError: form.displayFields is not a function
at scripts_es6.js:457

now I think I understand, your branch must have got an update that now has a conflict. My original PR on the previous version did not have these changes I am assuming.

would you like me to revisit this PR and get it to work with the new version?