fix: calling grid.updateColumns should recreate SelectAll checkbox (#2383)

Author: ghiscoding

packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts

@@ -60,6 +60,7 @@ const gridStub = {
   setSelectedRows: vi.fn(),
   updateColumnHeader: vi.fn(),
   onAfterSetColumns: new SlickEvent(),
+  onAfterUpdateColumns: new SlickEvent(),
   onClick: new SlickEvent(),
   onHeaderClick: new SlickEvent(),
   onHeaderRowCellRendered: new SlickEvent(),
@@ -222,6 +223,27 @@ describe('SlickCheckboxSelectColumn Plugin', () => {
     );
   });
 
+  it('should recreate the Select All toggle whenever "onAfterUpdateColumns" grid event is triggered', () => {
+    const updateColHeaderSpy = vi.spyOn(gridStub, 'updateColumnHeader');
+    vi.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(true);
+    vi.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(false);
+    vi.spyOn(dataViewStub, 'getAllSelectedFilteredIds').mockReturnValueOnce([]);
+    vi.spyOn(dataViewStub, 'getFilteredItems').mockReturnValue([]);
+
+    plugin.init(gridStub);
+    plugin.setOptions({ hideInColumnTitleRow: false, hideInFilterHeaderRow: true, hideSelectAllCheckbox: false });
+
+    gridStub.onAfterUpdateColumns.notify({ columns: [{ id: '_checkbox_selector', field: '_checkbox_selector' }], grid: gridStub });
+
+    expect(plugin).toBeTruthy();
+    expect(updateColHeaderSpy).toHaveBeenCalledTimes(2); // 1x for plugin creation, 1x for onAfterUpdateColumns trigger
+    expect(updateColHeaderSpy).toHaveBeenCalledWith(
+      '_checkbox_selector',
+      plugin.createCheckboxElement(`header-selector${plugin.selectAllUid}`),
+      'Select/Deselect All'
+    );
+  });
+
   it('should create the plugin and expect "setSelectedRows" to called with all rows toggling to be selected when "applySelectOnAllPages" is disabled', () => {
     vi.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(false);
     vi.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(true);

packages/common/src/extensions/slickCheckboxSelectColumn.ts

@@ -101,8 +101,10 @@ export class SlickCheckboxSelectColumn<T = any> {
       .subscribe(grid.onSelectedRowsChanged, this.handleSelectedRowsChanged.bind(this))
       .subscribe(grid.onClick, this.handleClick.bind(this))
       .subscribe(grid.onKeyDown, this.handleKeyDown.bind(this))
-      // whenever columns changed, we need to rerender Select All checkbox
-      .subscribe(grid.onAfterSetColumns, this.handleDataViewSelectedIdsChanged.bind(this));
+
+      // whenever columns changed or is (re)created, we need to rerender Select All checkbox
+      .subscribe(grid.onAfterSetColumns, this.handleDataViewSelectedIdsChanged.bind(this))
+      .subscribe(grid.onAfterUpdateColumns, this.handleDataViewSelectedIdsChanged.bind(this));
 
     if (this._isUsingDataView && this._dataView && this._addonOptions.applySelectOnAllPages) {
       this._eventHandler
@@ -182,7 +184,7 @@ export class SlickCheckboxSelectColumn<T = any> {
       this.hideSelectAllFromColumnHeaderFilterRow();
     } else {
       if (!this._addonOptions.hideInColumnTitleRow) {
-        this.renderSelectAllCheckbox(this._isSelectAllChecked, false);
+        this.renderSelectAllCheckbox(this._isSelectAllChecked, this._isPartialSelectAllChecked);
         this._eventHandler.subscribe(this._grid.onHeaderClick, this.handleHeaderClick.bind(this));
       } else {
         this.hideSelectAllFromColumnHeaderTitleRow();

test/cypress/e2e/example07.cy.ts

@@ -1255,4 +1255,36 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => {
     cy.get('.slick-viewport-top.slick-viewport-left').scrollTo(0, 0).wait(10);
     cy.get('.slick-large-editor-text.editor-title').should('not.be.visible');
   });
+
+  it('should show/hide Title column from column picker and expect Select All to still be rendered', () => {
+    cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
+
+    cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
+    cy.get('@firstPickerLabel').should('have.text', 'Title');
+    cy.get('@firstPickerLabel').click();
+
+    cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-check').should('exist');
+
+    cy.get('@firstPickerLabel').click();
+
+    cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-check').should('exist');
+    cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
+  });
+
+  it('should unselect a row then show/hide Title column from column picker and expect Select All to still be rendered and have partial checkbox', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).click();
+
+    cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
+
+    cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
+    cy.get('@firstPickerLabel').should('have.text', 'Title');
+    cy.get('@firstPickerLabel').click();
+
+    cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-partial-check').should('exist');
+
+    cy.get('@firstPickerLabel').click();
+
+    cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-partial-check').should('exist');
+    cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
+  });
 });

test/cypress/e2e/example14.cy.ts

@@ -439,5 +439,38 @@ describe('Example 14 - Columns Resize by Content', () => {
 
       cy.get('[data-row="2"] .slick-cell.l2.r2').contains(/[0-9]* days/);
     });
+
+    it('should select a row then show/hide Title column from column picker and expect Select All to still be rendered with partial checkbox', () => {
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(0)`).click();
+
+      cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
+
+      cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
+      cy.get('@firstPickerLabel').should('have.text', 'Common Factor - Title');
+      cy.get('@firstPickerLabel').click();
+
+      cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').should('exist');
+
+      cy.get('@firstPickerLabel').click();
+
+      cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').should('exist');
+      cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
+    });
+
+    it('should click on Select All then show/hide Title column from column picker and expect Select All to still be rendered with Select All checkbox', () => {
+      cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').click();
+      cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
+
+      cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
+      cy.get('@firstPickerLabel').should('have.text', 'Common Factor - Title');
+      cy.get('@firstPickerLabel').click();
+
+      cy.get('#filter-checkbox-selectall-container .mdi-icon-check').should('exist');
+
+      cy.get('@firstPickerLabel').click();
+
+      cy.get('#filter-checkbox-selectall-container .mdi-icon-check').should('exist');
+      cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
+    });
   });
 });