Automatically stop editing when rich cell editor closes (#2)

src/app/components/editor/database/database.component.html

@@ -18,6 +18,7 @@
       [ngClass]="isDark() ? 'ag-theme-balham-dark' : 'ag-theme-balham'"
       [rowData]="rowData"
       [columnDefs]="columnDefs"
+      [singleClickEdit]="true"
       suppressMovableColumns="true"
       (rowClicked)="onRowClicked($event)"
       (cellValueChanged)="onCellValueChanged()"

src/app/components/editor/database/editors/boolean/boolean-editor.component.ts

@@ -1,6 +1,7 @@
 import {ICellEditorAngularComp} from 'ag-grid-angular';
 import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
 import {ICellEditorParams} from 'ag-grid-community';
+import {debounce} from '../../../../../utility';
 
 @Component({
     selector: 'cell-editor-paragraph',
@@ -29,6 +30,9 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView
     protected trueValue = 'True';
     protected falseValue = 'False';
     protected emptyValue = '';
+    protected autoDismissDebounce = debounce(() => {
+        this.params.stopEditing();
+    }, 2000);
 
     @ViewChild('input') input: ElementRef;
 
@@ -59,5 +63,7 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView
         } else {
             this.value = true;
         }
+
+        this.autoDismissDebounce();
     }
 }

src/app/components/editor/database/editors/datetime/datetime-editor.component.ts

@@ -5,7 +5,9 @@ import {IonDatetime} from '@ionic/angular';
 
 @Component({
     selector: 'cell-editor-select',
-    template: `<ion-datetime #picker [displayFormat]="format" [(ngModel)]="value" style="padding: 0 0 0 5px;"></ion-datetime>`,
+    template: `<ion-datetime
+                #picker [displayFormat]="format" [(ngModel)]="value" style="padding: 0 0 0 5px;" (ionChange)="finishEdit($event)"
+               ></ion-datetime>`,
 })
 export class DatetimeEditorComponent implements ICellEditorAngularComp, AfterViewInit {
     public params: ICellEditorParams;
@@ -30,4 +32,8 @@ export class DatetimeEditorComponent implements ICellEditorAngularComp, AfterVie
     ngAfterViewInit(): void {
         this.picker.open();
     }
+
+    finishEdit($event) {
+        this.params.stopEditing();
+    }
 }

src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts

@@ -48,9 +48,14 @@ export class ParagraphEditorComponent implements ICellEditorAngularComp, AfterVi
                     }
 
                     this.value = String(value.data);
+                    this.finishEdit();
                 });
                 modal.present();
             });
         });
     }
+
+    finishEdit() {
+        this.params.stopEditing();
+    }
 }

src/app/components/editor/database/editors/select/multiselect-editor.component.ts

@@ -6,7 +6,7 @@ import {IonSelect} from '@ionic/angular';
 @Component({
     selector: 'cell-editor-multiselect',
     template: `
-        <ion-select #select [(ngModel)]="value" style="padding: 0;"
+        <ion-select #select [(ngModel)]="value" style="padding: 0;" (ionChange)="finishEdit()"
                     [interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}" multiple="true">
             <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
         </ion-select>
@@ -33,4 +33,8 @@ export class MultiSelectEditorComponent implements ICellEditorAngularComp, After
     ngAfterViewInit(): void {
         this.select.open();
     }
+
+    finishEdit() {
+        this.params.stopEditing();
+    }
 }

src/app/components/editor/database/editors/select/select-editor.component.ts

@@ -6,7 +6,7 @@ import {IonSelect} from '@ionic/angular';
 @Component({
     selector: 'cell-editor-select',
     template: `
-        <ion-select #select [(ngModel)]="value" style="padding: 0;"
+        <ion-select #select [(ngModel)]="value" style="padding: 0;" (ionChange)="finishEdit()"
                     [interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}">
             <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
         </ion-select>
@@ -32,4 +32,8 @@ export class SelectEditorComponent implements ICellEditorAngularComp, AfterViewI
     ngAfterViewInit(): void {
         this.select.open();
     }
+
+    finishEdit() {
+        this.params.stopEditing();
+    }
 }