fix(editors): body click or Escape key should cancel Select Editor (#…

…1513)

- add reason to `onClose(reason)` feature in external repo
- Escape key should cancel any edit change (that would mostly only happen when multiple selection since single select would close after single selection
- when clicking outside the select (body click), wouldn't call a save either

examples/vite-demo-vanilla-bundle/package.json

@@ -28,7 +28,7 @@
     "bulma": "^1.0.0",
     "dompurify": "^3.1.2",
     "fetch-jsonp": "^1.3.0",
-    "multiple-select-vanilla": "^3.1.4",
+    "multiple-select-vanilla": "^3.2.0",
     "rxjs": "^7.8.1",
     "vanilla-calendar-picker": "^2.11.4",
     "whatwg-fetch": "^3.6.20"

packages/common/package.json

@@ -74,7 +74,7 @@
     "autocompleter": "^9.2.1",
     "dequal": "^2.0.3",
     "excel-builder-vanilla": "3.0.1",
-    "multiple-select-vanilla": "^3.1.4",
+    "multiple-select-vanilla": "^3.2.0",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12",
     "vanilla-calendar-picker": "^2.11.4"

packages/common/src/editors/__tests__/selectEditor.spec.ts

@@ -631,6 +631,38 @@ describe('SelectEditor', () => {
         expect(saveSpy).toHaveBeenCalledWith(false);
       });
 
+      it('should cancel changes when Escape key is pressed and should not call "save()"', () => {
+        mockItemData = { id: 1, gender: 'male', isActive: true };
+        gridOptionMock.autoCommitEdit = false;
+
+        editor = new SelectEditor(editorArguments, true);
+        const cancelSpy = jest.spyOn(editor, 'cancel');
+        const saveSpy = jest.spyOn(editor, 'save');
+
+        editor.loadValue(mockItemData);
+        editor.msInstance?.close('key.escape');
+        editor.destroy();
+
+        expect(cancelSpy).toHaveBeenCalled();
+        expect(saveSpy).not.toHaveBeenCalled();
+      });
+
+      it('should not "save()" when clicking ouside the select on body', () => {
+        mockItemData = { id: 1, gender: 'male', isActive: true };
+        gridOptionMock.autoCommitEdit = false;
+
+        editor = new SelectEditor(editorArguments, true);
+        const cancelSpy = jest.spyOn(editor, 'cancel');
+        const saveSpy = jest.spyOn(editor, 'save');
+
+        editor.loadValue(mockItemData);
+        editor.msInstance?.close('body.click');
+        editor.destroy();
+
+        expect(cancelSpy).not.toHaveBeenCalled();
+        expect(saveSpy).not.toHaveBeenCalled();
+      });
+
       it('should not call "commitCurrentEdit" when "hasAutoCommitEdit" is disabled', () => {
         mockItemData = { id: 1, gender: 'male', isActive: true };
         gridOptionMock.autoCommitEdit = false;

packages/common/src/editors/selectEditor.ts

@@ -124,7 +124,14 @@ export class SelectEditor implements Editor {
       onClick: () => this._isValueTouched = true,
       onCheckAll: () => this._isValueTouched = true,
       onUncheckAll: () => this._isValueTouched = true,
-      onClose: () => {
+      onClose: (reason) => {
+        if (reason === 'key.escape' || reason === 'body.click' || (!this.hasAutoCommitEdit && !this.isValueChanged())) {
+          if (reason === 'key.escape') {
+            this.cancel();
+          }
+          return;
+        }
+
         if (compositeEditorOptions) {
           this.handleChangeOnCompositeEditor(compositeEditorOptions);
         } else {
@@ -364,6 +371,12 @@ export class SelectEditor implements Editor {
     }
   }
 
+  cancel() {
+    if (this.args?.cancelChanges) {
+      this.args.cancelChanges();
+    }
+  }
+
   hide() {
     if (this._msInstance) {
       this._msInstance.close();