Views Ajax issue on deleting instances

Rerolled #15 for 10.1.x.

is it possible to replicate that on 11.x and put the code in a Merge Request? It's easier to work with nowdays. Also there is a test failure

djsagar → changed the visibility of the branch 3132456-fix-empty-views-instances to hidden.

We are facing similar error:

eduardo morales alberti → changed the visibility of the branch 3132456-fix-ajax-deleting-views-instances to hidden.

Waiting for pipeline

Reviewing error javascript linting:

error  no-jquery/no-ajax-events  Prefer local event to ajaxComplete  https://git.drupalcode.org/issue/drupal-3132456/-/blob/7f89a076/../../../build/core/modules/views/js/ajax_view.js#L34-39
✖ 1 problem (0 fatal, 1 error, 0 warnings)

Possible solution, extracted from field_ui.js:

$(document).on('ajaxComplete', () => {
  if (settings.url && $(selector, context).length) {
    delete Drupal.views.instances[i];
    delete settings.views.ajaxViews[i];
  }
});

We are not sure if the errors from MR are related to the changes:

    Time: 01:34.216, Memory: 10.00 MB
    
    Entity Reference Widget (Drupal\Tests\media_library\FunctionalJavascript\EntityReferenceWidget)
     ✔ Focus not applied without selection change
     ✘ Widget
       ┐
       ├ "Bear" was found but shouldn't be there.     
       ├ Failed asserting that a boolean is not empty.
       │
       │ /builds/issue/drupal-3132456/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTestBase.php:90
       │ /builds/issue/drupal-3132456/core/modules/media_library/tests/src/FunctionalJavascript/EntityReferenceWidgetTest.php:239
       ┴
     ✔ Required media field
     ✔ Remove after reordering
     ✔ Add after reordering
     ✔ Widget preview
    
    FAILURES!
    Tests: 6, Assertions: 134, Failures: 1.

Trying to use the same strategy than docroot/core/misc/ajax.js using function expire:

  /**
   * Contains all created Ajax objects.
   *
   * @type {Array.<Drupal.Ajax|null>}
   */
  Drupal.ajax.instances = [];

  /**
   * List all objects where the associated element is not in the DOM
   *
   * This method ignores {@link Drupal.Ajax} objects not bound to DOM elements
   * when created with {@link Drupal.ajax}.
   *
   * @return {Array.<Drupal.Ajax>}
   *   The list of expired {@link Drupal.Ajax} objects.
   */
  Drupal.ajax.expired = function () {
    return Drupal.ajax.instances.filter(
      (instance) =>
        instance &&
        instance.element !== false &&
        !document.body.contains(instance.element),
    );
  };

...
    detach(context, settings, trigger) {
      if (trigger === 'unload') {
        Drupal.ajax.expired().forEach((instance) => {
          // Set this to null and allow garbage collection to reclaim
          // the memory.
          Drupal.ajax.instances[instance.instanceIndex] = null;
        });
      }
    },

We check if the ajax complete was triggered modifying the patch and:

This does not shows the message

$(selector, context).ajaxComplete(() => {
            console.log("Selector complete");
          });

This shows the message:

$(document).ajaxComplete(() => {
            console.log("Ajax complete");
          });

Maybe the change "is working" because the patch never deletes the instances, so the error "Cannot read properties of undefined (reading 'settings')" is not possible.

In our case, the error is given using facets, and debugging the javascript the instance was not removed, because facets updates the context (facets active or not) before the deletion.

eduardo morales alberti → closed merge request !11351

We will close our MR as the problem comes from Facets and the order of how the functions are executed before ajax views behaviour https://www.drupal.org/project/facets/issues/3013795 ✨ Robustify how ajax finds the facet block Needs review

Added related issue https://www.drupal.org/project/facets/issues/3013795 ✨ Robustify how ajax finds the facet block Needs review