fix(common): Select Editor should always close with Escape key (#1512)

* fix(common): Select Editor should always close with Escape key
- the issue was fixed in upstream lib ms-select-vanilla

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.3",
+    "multiple-select-vanilla": "^3.1.4",
     "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.3",
+    "multiple-select-vanilla": "^3.1.4",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12",
     "vanilla-calendar-picker": "^2.11.4"

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

@@ -89,11 +89,11 @@ describe('MultipleSelectEditor', () => {
       gridOptionMock.translater = translateService;
       editor = new MultipleSelectEditor(editorArguments, 0);
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
-      const spy = jest.spyOn(editor, 'show');
+
       jest.runAllTimers(); // fast-forward timer
 
-      expect(spy).toHaveBeenCalled();
       expect(editorCount).toBe(1);
+      expect(editor.msInstance?.getOptions().isOpen).toBeTruthy();
     });
 
     it('should call "setValue" with a single string and expect the string to be returned as an array when calling "getValue"', () => {

packages/common/src/editors/longTextEditor.ts

@@ -52,14 +52,14 @@ export class LongTextEditor implements Editor {
       throw new Error('[Slickgrid-Universal] Something is wrong with this grid, an Editor must always have valid arguments.');
     }
     this.grid = args.grid;
-    this.gridOptions = args.grid && args.grid.getOptions() as GridOption;
+    this.gridOptions = args.grid?.getOptions() as GridOption;
     const options = this.gridOptions || this.args.column.params || {};
     if (options?.translater) {
       this._translater = options.translater;
     }
 
     // get locales provided by user in forRoot or else use default English locales via the Constants
-    this._locales = this.gridOptions && this.gridOptions.locales || Constants.locales;
+    this._locales = this.gridOptions?.locales || Constants.locales;
 
     this._bindEventService = new BindingEventService();
     this.init();
@@ -258,7 +258,7 @@ export class LongTextEditor implements Editor {
 
       // validate the value before applying it (if not valid we'll set an empty string)
       const validation = this.validate(undefined, state);
-      const newValue = (validation && validation.valid) ? state : '';
+      const newValue = validation?.valid ? state : '';
 
       // set the new value to the item datacontext
       if (isComplexObject) {
@@ -409,24 +409,24 @@ export class LongTextEditor implements Editor {
     this.disable(isCellEditable === false);
   }
 
-  protected handleKeyDown(event: KeyboardEvent) {
-    const key = event.key;
+  protected handleKeyDown(e: KeyboardEvent) {
+    const key = e.key;
     this._isValueTouched = true;
 
     if (!this.args.compositeEditorOptions) {
-      if ((key === 'Enter' && event.ctrlKey) || (event.ctrlKey && event.key.toUpperCase() === 'S')) {
-        event.preventDefault();
+      if ((key === 'Enter' && e.ctrlKey) || (e.ctrlKey && e.key.toUpperCase() === 'S')) {
+        e.preventDefault();
         this.save();
       } else if (key === 'Escape') {
-        event.preventDefault();
+        e.preventDefault();
         this.cancel();
-      } else if (key === 'Tab' && event.shiftKey) {
-        event.preventDefault();
+      } else if (key === 'Tab' && e.shiftKey) {
+        e.preventDefault();
         if (this.args && this.grid) {
           this.grid.navigatePrev();
         }
       } else if (key === 'Tab') {
-        event.preventDefault();
+        e.preventDefault();
         if (this.args && this.grid) {
           this.grid.navigateNext();
         }

packages/common/src/editors/selectEditor.ts

@@ -754,7 +754,7 @@ export class SelectEditor implements Editor {
     this._msInstance = multipleSelect(selectElement, this.editorElmOptions) as MultipleSelectInstance;
     this.editorElm = this._msInstance.getParentElement();
     if (!this.isCompositeEditor) {
-      this.delayOpening >= 0 ? setTimeout(() => this.show()) : this.show();
+      this.show(this.delayOpening);
     }
   }