fix(RowDetail): Row Detail extension should work with editable grid

- this issue was brought up in a SO question that is now deleted, the main problem was that Row Detail was never tested with editable grids and was throwing an error
- while testing with editable grid, we should also collapse all row detail when clicking on an editable cell to avoid UI issues with active cell which was showing up over the row detail panel and causing UI weirdness
- also found that the SlickRowDetail wasn't always merging its internal options with a default set of options, it was only using the options defined by the user and omitting any default values which caused problem and that was caught with `useRowClick: false` that ended up not working as expected

package.json

@@ -50,13 +50,13 @@
   },
   "dependencies": {
     "@ngx-translate/core": ">=14.0.0",
-    "@slickgrid-universal/common": "~2.4.1",
-    "@slickgrid-universal/custom-footer-component": "~2.4.1",
-    "@slickgrid-universal/empty-warning-component": "~2.4.1",
-    "@slickgrid-universal/event-pub-sub": "~2.4.0",
-    "@slickgrid-universal/pagination-component": "~2.4.1",
-    "@slickgrid-universal/row-detail-view-plugin": "~2.4.1",
-    "@slickgrid-universal/rxjs-observable": "~2.4.1",
+    "@slickgrid-universal/common": "~2.5.0",
+    "@slickgrid-universal/custom-footer-component": "~2.5.0",
+    "@slickgrid-universal/empty-warning-component": "~2.5.0",
+    "@slickgrid-universal/event-pub-sub": "~2.5.0",
+    "@slickgrid-universal/pagination-component": "~2.5.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~2.5.0",
+    "@slickgrid-universal/rxjs-observable": "~2.5.0",
     "@types/jquery": "^3.5.16",
     "dequal": "^2.0.3",
     "dompurify": "^2.4.4",
@@ -88,12 +88,12 @@
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@slickgrid-universal/composite-editor-component": "~2.4.1",
-    "@slickgrid-universal/custom-tooltip-plugin": "~2.4.1",
-    "@slickgrid-universal/excel-export": "~2.4.1",
-    "@slickgrid-universal/graphql": "~2.4.1",
-    "@slickgrid-universal/odata": "~2.4.1",
-    "@slickgrid-universal/text-export": "~2.4.1",
+    "@slickgrid-universal/composite-editor-component": "~2.5.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~2.5.0",
+    "@slickgrid-universal/excel-export": "~2.5.0",
+    "@slickgrid-universal/graphql": "~2.5.0",
+    "@slickgrid-universal/odata": "~2.5.0",
+    "@slickgrid-universal/text-export": "~2.5.0",
     "@types/dompurify": "^2.4.0",
     "@types/flatpickr": "^3.1.2",
     "@types/fnando__sparkline": "^0.3.4",

src/app/examples/grid-rowdetail.component.html

@@ -12,12 +12,15 @@ <h2>
   <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="col-sm-6">
-    <button class="btn btn-outline-secondary btn-sm" (click)="closeAllRowDetail()" data-test="close-all-btn">
+    <button class="btn btn-outline-secondary btn-xs" (click)="changeEditableGrid()" data-test="editable-grid-btn">
+      Make Grid Editable
+    </button>
+    <button class="btn btn-outline-secondary btn-xs" (click)="closeAllRowDetail()" data-test="close-all-btn">
       Close All Row Details
     </button>
     &nbsp;&nbsp;
     <label for="">Detail View Rows Shown: </label>
-    <input type="number" [(ngModel)]="detailViewRowCount">
+    <input type="number" style="height: 22px; width: 40px" [(ngModel)]="detailViewRowCount">
     <button class="btn btn-outline-secondary btn-xs" (click)="changeDetailViewRowCount()" data-test="set-count-btn">
       Set
     </button>

src/app/examples/grid-rowdetail.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {
   AngularGridInstance,
   Column,
+  Editors,
   FieldType,
   Filters,
   Formatters,
@@ -58,9 +59,12 @@ export class GridRowDetailComponent implements OnInit {
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true },
+      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true, editor: { model: Editors.text } },
       { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, filterable: true },
-      { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100, filterable: true, filter: { model: Filters.slider, operator: '>' } },
+      {
+        id: 'percent2', name: '% Complete', field: 'percentComplete2', editor: { model: Editors.slider },
+        formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100, filterable: true, filter: { model: Filters.slider, operator: '>' }
+      },
       { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
       { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
       {
@@ -152,7 +156,7 @@ export class GridRowDetailComponent implements OnInit {
   }
 
   changeDetailViewRowCount() {
-    if (this.angularGrid && this.angularGrid.extensionService) {
+    if (this.angularGrid?.extensionService) {
       const options = this.rowDetailInstance.getOptions();
       if (options && options.panelRows) {
         options.panelRows = this.detailViewRowCount; // change number of rows dynamically
@@ -161,6 +165,17 @@ export class GridRowDetailComponent implements OnInit {
     }
   }
 
+  changeEditableGrid() {
+    this.rowDetailInstance.addonOptions.useRowClick = false;
+    this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit;
+    this.angularGrid?.slickGrid.setOptions({
+      editable: true,
+      autoEdit: true,
+      enableCellNavigation: true,
+    });
+    return true;
+  }
+
   closeAllRowDetail() {
     if (this.angularGrid && this.angularGrid.extensionService) {
       this.rowDetailInstance.collapseAll();

test/cypress/e2e/example21.cy.ts

@@ -310,4 +310,37 @@ describe('Example 21 - Row Detail View', { retries: 1 }, () => {
       .find('h3')
       .contains('Task 102');
   });
+
+  it('should close all row details & make grid editable', () => {
+    cy.get('[data-test="close-all-btn"]').click();
+    cy.get('[data-test="editable-grid-btn"]').click();
+  });
+
+  it('should click on 3rd row detail open icon and expect it to open', () => {
+    cy.get('#grid21')
+      .find('.slick-row:nth(2) .slick-cell:nth(0)')
+      .click();
+
+    cy.get('#grid21')
+      .find('.innerDetailView_100 .container_100')
+      .as('detailContainer');
+
+    cy.get('@detailContainer')
+      .find('h3')
+      .contains('Task 100');
+  });
+
+  it('should click on 1st row "Title" cell to edit it and expect row detail to get closed', () => {
+    cy.get('#grid21')
+      .find('.slick-row:nth(1) .slick-cell:nth(1)')
+      .click();
+
+    cy.get('.editor-title')
+      .invoke('val')
+      .then(text => expect(text).to.eq('Task 10'));
+
+    cy.get('#grid21')
+      .find('.innerDetailView_100 .container_100')
+      .should('not.exist');
+  });
 });

test/cypress/e2e/example30.cy.ts

@@ -44,16 +44,16 @@ describe('Example 30  Composite Editor Modal', { retries: 1 }, () => {
   it('should be able to change "Duration" values of first 4 rows', () => {
     // change duration
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'days').click();
-    cy.get('.editor-duration').type('0').type('{enter}', { force: true });
+    cy.get('.editor-duration').type('0{enter}');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`)
       .should('contain', '0 day')
       .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
 
-    cy.get('.editor-duration').type('1').type('{enter}', { force: true });
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).click().type('1{enter}');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '1 day')
       .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
 
-    cy.get('.editor-duration').type('2').type('{enter}', { force: true });
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).click().type('2{enter}');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', '2 days')
       .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
   });