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:

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
| Comment | File | Size | Author |
|---|---|---|---|
| #12 | vbo-sticky-header-events-3349640-12.patch | 479 bytes | yasmeensalah |
| #9 | 3349640-9.patch | 445 bytes | sahal_va |
| #8 | Screenshot 2023-05-17 at 10.47.17 AM.png | 146.86 KB | sahal_va |
| #8 | Screenshot 2023-05-17 at 10.44.01 AM.png | 508.86 KB | sahal_va |
| #8 | Screenshot 2023-05-17 at 10.37.34 AM.png | 314 KB | sahal_va |
Comments
Comment #2
saschaeggiIs 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!
Comment #3
eduardo morales albertiComment #4
eduardo morales alberti@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().
Comment #5
tunicBack to Active because more info has been provided. If more info is needed please ask.
Comment #6
saschaeggiThanks. Let's see if somebody who uses VBO can help here 👍
Comment #7
gauravvvv commentedI have attached a patch for same. please review
Comment #8
sahal_va commentedHi @Gauravvvv
Thanks for working on this.
Now VBO counter works fine when the "Select all" is checked in non-sticky mode.

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

And there is a console error

Comment #9
sahal_va commentedAttaching a patch for this issue.
Please review.
Comment #10
axroth commentedFrom my understanding the patch fixed the issue. Using 8.x-3.0-rc5
Comment #11
saschaeggiComment #12
yasmeensalah commentedI can confirm that this issue is still appearing and here is a patch for version 8.x-3.x.
Reopening the issue for reviewing
Comment #13
selfirian commented@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
Comment #14
selfirian commented