Problem/Motivation

Sticky header does not keep events when is cloned https://git.drupalcode.org/project/gin/-/blob/8f287efb566102c27bc6e37553...

    createStickyHeader: function createStickyHeader(table) {
      const header = table.querySelector(':scope > thead');
      const stickyTable = document.createElement('table');
      stickyTable.className = 'sticky-header';
      stickyTable.append(header.cloneNode(true));
      table.insertBefore(stickyTable, header);
      this.handleResize(table);
    },

Javascript cloneNode does not keep the event listeners https://pawelgrzybek.com/cloning-dom-nodes-and-handling-attached-events/ and that makes that the VBO counter does not load the right counter when the "Select all" is checked on the sticky mode.

Steps to reproduce

Use Gin as the default admin theme.
Replace the Node bulk operations with the VBO.

Select all not sticky checkbox:
Not sticky

Select all sticky:
Select all sticky

After commenting the libraries on the gin.info.yml seems to work with the sticky header, but the VBO component is on the View footer (On Claro it was on the top) and you have to scroll to the bottom of the page.

  core/drupal.tableselect:
    js:
      misc/tableselect.js: js/overrides/tableselect.js

  core/drupal.tableheader:
    js:
      misc/tableheader.js: js/overrides/tableheader.js

Comments

saschaeggi’s picture

Status: Active » Postponed (maintainer needs more info)

Is this related to #3276752: Problem with form submit button's not working after an ajax call would refresh the form-id & #3342513: Ajax behaviour on entity edit form action buttons can break

Can you check if one of those fixes your problem? If so we can close this and go an RTBC on one of the other ones.

Thanks!

eduardo morales alberti’s picture

Issue summary: View changes
eduardo morales alberti’s picture

@saschaeggi Tried both patches and does not solve the issue, they seem to be related to the submission not to the JS events.
In my case the checkbox to select all items on the view is not triggering the right event because seems to be cloned in the wrong way, overriding the core libraries sticky header, which uses the Jquery clone method which also clones the events: jQuery clone() not cloning event bindings, even with on().

tunic’s picture

Status: Postponed (maintainer needs more info) » Active

Back to Active because more info has been provided. If more info is needed please ask.

saschaeggi’s picture

Title: Sticky header does not keep events » [VBO] Sticky header does not keep events

Thanks. Let's see if somebody who uses VBO can help here 👍

gauravvvv’s picture

Status: Active » Needs review
StatusFileSize
new760 bytes

I have attached a patch for same. please review

sahal_va’s picture

Status: Needs review » Needs work
StatusFileSize
new314 KB
new508.86 KB
new146.86 KB

Hi @Gauravvvv

Thanks for working on this.

Now VBO counter works fine when the "Select all" is checked in non-sticky mode.
alt

But "Select all" checkbox is missing in sticky header.
alt

And there is a console error
alt

sahal_va’s picture

Status: Needs work » Needs review
StatusFileSize
new445 bytes

Attaching a patch for this issue.
Please review.

axroth’s picture

From my understanding the patch fixed the issue. Using 8.x-3.0-rc5

saschaeggi’s picture

Status: Needs review » Closed (outdated)
yasmeensalah’s picture

Status: Closed (outdated) » Needs review
StatusFileSize
new479 bytes

I can confirm that this issue is still appearing and here is a patch for version 8.x-3.x.
Reopening the issue for reviewing

selfirian’s picture

@yasmeensalah Thanks for your help but I couldn't replicate this issue without the patch. So to me it seems fixed.

I tested the issue with the latest dev version of gin and the recommended version of vbo (4.2). Could you tell us what you did to encounter this issue.

Thank you

selfirian’s picture

Status: Needs review » Closed (cannot reproduce)