fix(datagrid): update detail state on initialization (backport to 16.…

…x) (#1561) Backport of #1496
vmware-clarity · Sep 26, 2024 · bda426e · bda426e
1 parent 8d611a8
commit bda426e
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 19 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -1233,6 +1233,7 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
     toggleAllSelected($event: any): void;
     // (undocumented)
     set trackBy(value: ClrDatagridItemsTrackByFunction<T>);
+    updateDetailState(): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagrid<any>, "clr-datagrid", never, { "loadingMoreItems": "clrLoadingMoreItems"; "clrDgSingleSelectionAriaLabel": "clrDgSingleSelectionAriaLabel"; "clrDgSingleActionableAriaLabel": "clrDgSingleActionableAriaLabel"; "clrDetailExpandableAriaLabel": "clrDetailExpandableAriaLabel"; "clrDgDisablePageFocus": "clrDgDisablePageFocus"; "loading": "clrDgLoading"; "selected": "clrDgSelected"; "singleSelected": "clrDgSingleSelected"; "clrDgPreserveSelection": "clrDgPreserveSelection"; "rowSelectionMode": "clrDgRowSelection"; "trackBy": "clrDgItemsTrackBy"; }, { "selectedChanged": "clrDgSelectedChange"; "singleSelectedChanged": "clrDgSingleSelectedChange"; "refresh": "clrDgRefresh"; }, ["iterator", "placeholder", "columns", "rows"], ["clr-dg-action-bar", "clr-dg-placeholder", "clr-dg-footer", "[clrIfDetail],clr-dg-detail"], false, never>;
     // (undocumented)

diff --git a/projects/angular/src/data/datagrid/datagrid.spec.ts b/projects/angular/src/data/datagrid/datagrid.spec.ts
@@ -489,6 +489,27 @@ class PanelDatagridTrackByTest {
   });
   trackById: ClrDatagridItemsTrackByFunction<{ id: number }> = item => item.id;
 }
+@Component({
+  template: `
+    <clr-datagrid>
+      <clr-dg-column>Item</clr-dg-column>
+      <clr-dg-column>Name</clr-dg-column>
+      <clr-dg-row *ngFor="let item of items" [clrDgItem]="item">
+        <clr-dg-cell>{{ item.id }}</clr-dg-cell>
+        <clr-dg-cell>{{ item.name }}</clr-dg-cell>
+      </clr-dg-row>
+      <ng-template [(clrIfDetail)]="preState" let-detail>
+        <clr-dg-detail></clr-dg-detail>
+      </ng-template>
+    </clr-datagrid>
+  `,
+})
+class PanelInitializeOpenedTest {
+  items = Array.from(Array(3), (v, i) => {
+    return { name: v, id: i };
+  });
+  preState = this.items[0];
+}
 
 @Component({
   template: `
@@ -1341,6 +1362,21 @@ export default function (): void {
       });
     });
 
+    describe('Initialize datagrid with opened detail', function () {
+      let context: TestContext<ClrDatagrid, PanelInitializeOpenedTest>;
+
+      beforeEach(function () {
+        context = this.create(ClrDatagrid, PanelInitializeOpenedTest, DATAGRID_SPEC_PROVIDERS);
+      });
+
+      it('should be with opened panel and one column visible', () => {
+        const hiddenColumns = context.clarityElement.querySelectorAll('[role=columnheader].datagrid-hidden-column');
+
+        /* make sure that the state is set */
+        expect(hiddenColumns.length).toEqual(1);
+      });
+    });
+
     interface AbstractDetailPaneTrackByTestComponent {
       items: { name: any; id: number }[];
     }

diff --git a/projects/angular/src/data/datagrid/datagrid.ts b/projects/angular/src/data/datagrid/datagrid.ts
@@ -269,25 +269,7 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
           this._displayedRows.insert(row._view);
         });
 
-        // Try to update only when there is something cached and its open.
-        if (this.detailService.state && this.detailService.isOpen) {
-          const row = this.items.canTrackBy()
-            ? this.rows.find(row => this.items.trackBy(row.item) === this.items.trackBy(this.detailService.state))
-            : undefined;
-
-          /**
-           * Reopen updated row or close it
-           */
-          if (row) {
-            this.detailService.open(row.item, row.detailButton.nativeElement);
-            // always keep open when virtual scroll is available otherwise close it
-          } else if (!this.hasVirtualScroller) {
-            // Using setTimeout to make sure the inner cycles in rows are done
-            setTimeout(() => {
-              this.detailService.close();
-            });
-          }
-        }
+        this.updateDetailState();
 
         // retain active cell when navigating with Up/Down Arrows, PageUp and PageDown buttons in virtual scroller
         if (this.hasVirtualScroller) {
@@ -308,6 +290,7 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
    */
   ngAfterViewInit() {
     this.keyNavigation.initializeKeyGrid(this.el.nativeElement);
+    this.updateDetailState();
 
     // TODO: determine if we can get rid of provider wiring in view init so that subscriptions can be done earlier
     this.refresh.emit(this.stateProvider.state);
@@ -403,6 +386,30 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
     this.organizer.resize();
   }
 
+  /**
+   * Checks the state of detail panel and if it's opened then
+   * find the matching row and trigger the detail panel
+   */
+  updateDetailState() {
+    // Try to update only when there is something cached and its open.
+    if (this.detailService.state && this.detailService.isOpen) {
+      const row = this.rows.find(row => this.items.trackBy(row.item) === this.items.trackBy(this.detailService.state));
+
+      /**
+       * Reopen updated row or close it
+       */
+      if (row) {
+        this.detailService.open(row.item, row.detailButton.nativeElement);
+        // always keep open when virtual scroll is available otherwise close it
+      } else if (!this.hasVirtualScroller) {
+        // Using setTimeout to make sure the inner cycles in rows are done
+        setTimeout(() => {
+          this.detailService.close();
+        });
+      }
+    }
+  }
+
   /**
    * Public method to re-trigger the computation of displayed items manually
    */