fix(editors): ms-select should close on Tab and focus on next edit cell

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

@@ -7,7 +7,6 @@ import { Editors } from '../index.js';
 import { MultipleSelectEditor } from '../multipleSelectEditor.js';
 import type { Column, Editor, EditorArguments, GridOption } from '../../interfaces/index.js';
 import type { SlickDataView } from '../../core/slickDataview.js';
-import type { TranslateServiceStub } from '../../../../../test/translateServiceStub.js';
 import { type SlickGrid } from '../../core/index.js';
 
 const containerId = 'demo-container';
@@ -43,7 +42,6 @@ const gridStub = {
 } as unknown as SlickGrid;
 
 describe('MultipleSelectEditor', () => {
-  let translateService: TranslateServiceStub;
   let divContainer: HTMLDivElement;
   let editor: MultipleSelectEditor;
   let editorArguments: EditorArguments;
@@ -94,7 +92,7 @@ describe('MultipleSelectEditor', () => {
         { value: 'male', label: 'male' },
         { value: 'female', label: 'female' },
       ];
-      gridOptionMock.translater = translateService;
+      gridOptionMock.translater = undefined;
       editor = new MultipleSelectEditor(editorArguments, 0);
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
 

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

@@ -168,6 +168,47 @@ describe('SelectEditor', () => {
       expect(editorCount).toBe(1);
     });
 
+    it('should navigate to next cell when blur is called with Tab key', () => {
+      mockColumn.editor!.collection = [
+        { value: 'male', label: 'male' },
+        { value: 'female', label: 'female' },
+      ];
+      gridOptionMock.translater = translateService;
+      editor = new SelectEditor(editorArguments, true);
+      const keyEvent = new (window.window as any).KeyboardEvent('keydown', { key: 'Tab', shiftKey: false, bubbles: true, cancelable: true });
+      editor.msInstance?.getOptions().onBlur(keyEvent);
+
+      expect(gridStub.navigateNext).toHaveBeenCalled();
+    });
+
+    it('should navigate to previous cell when blur is called with Shift+Tab keys', () => {
+      mockColumn.editor!.collection = [
+        { value: 'male', label: 'male' },
+        { value: 'female', label: 'female' },
+      ];
+      gridOptionMock.translater = translateService;
+      editor = new SelectEditor(editorArguments, true);
+      const keyEvent = new (window.window as any).KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true });
+      editor.msInstance?.getOptions().onBlur(keyEvent);
+
+      expect(gridStub.navigatePrev).toHaveBeenCalled();
+      vi.resetAllMocks();
+    });
+
+    it('should NOT navigate to next cell when blur is called with Tab key with CompositeEditor', () => {
+      mockColumn.editor!.collection = [
+        { value: 'male', label: 'male' },
+        { value: 'female', label: 'female' },
+      ];
+      gridOptionMock.translater = translateService;
+      editor = new SelectEditor({ ...editorArguments, compositeEditorOptions: { modalType: 'auto-mass', editors: {}, formValues: {} } }, true);
+      editor.msInstance?.open(null);
+      const keyEvent = new (window.window as any).KeyboardEvent('keydown', { key: 'Tab', shiftKey: false, bubbles: true, cancelable: true });
+      editor.msInstance?.getOptions().onBlur(keyEvent);
+
+      expect(gridStub.navigateNext).not.toHaveBeenCalled();
+    });
+
     it('should initialize the editor with element being disabled in the DOM when passing a collectionAsync and an empty collection property', () => {
       const mockCollection = ['male', 'female'];
       const promise = Promise.resolve(mockCollection);

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

@@ -6,7 +6,6 @@ import 'multiple-select-vanilla';
 import { Editors } from '../index.js';
 import { SingleSelectEditor } from '../singleSelectEditor.js';
 import type { Column, Editor, EditorArguments, GridOption } from '../../interfaces/index.js';
-import type { TranslateServiceStub } from '../../../../../test/translateServiceStub.js';
 import type { SlickDataView, SlickGrid } from '../../core/index.js';
 
 const containerId = 'demo-container';
@@ -41,7 +40,6 @@ const gridStub = {
 } as unknown as SlickGrid;
 
 describe('SingleSelectEditor', () => {
-  let translateService: TranslateServiceStub;
   let divContainer: HTMLDivElement;
   let editor: SingleSelectEditor;
   let editorArguments: EditorArguments;
@@ -93,7 +91,7 @@ describe('SingleSelectEditor', () => {
         { value: 'male', label: 'male' },
         { value: 'female', label: 'female' },
       ];
-      gridOptionMock.translater = translateService;
+      gridOptionMock.translater = undefined;
       editor = new SingleSelectEditor(editorArguments);
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
 

packages/common/src/editors/longTextEditor.ts

@@ -431,16 +431,9 @@ export class LongTextEditor implements Editor {
       } else if (key === 'Escape') {
         e.preventDefault();
         this.cancel();
-      } else if (key === 'Tab' && e.shiftKey) {
-        e.preventDefault();
-        if (this.args && this.grid) {
-          this.grid.navigatePrev();
-        }
       } else if (key === 'Tab') {
         e.preventDefault();
-        if (this.args && this.grid) {
-          this.grid.navigateNext();
-        }
+        e.shiftKey ? this.grid.navigatePrev() : this.grid.navigateNext();
       }
     }
   }

packages/common/src/editors/selectEditor.ts

@@ -120,6 +120,7 @@ export class SelectEditor implements Editor {
       container: 'body',
       darkMode: !!this.gridOptions.darkMode,
       filter: false,
+      isOpen: !this.isCompositeEditor,
       maxHeight: 275,
       minHeight: 25,
       name: this.elementName,
@@ -130,6 +131,16 @@ export class SelectEditor implements Editor {
       onClick: () => (this._isValueTouched = true),
       onCheckAll: () => (this._isValueTouched = true),
       onUncheckAll: () => (this._isValueTouched = true),
+      onBlur: (e) => {
+        const keyEvt = e as KeyboardEvent | undefined;
+        if (keyEvt?.key === 'Tab' && this._msInstance?.getOptions().isOpen) {
+          keyEvt.preventDefault();
+          this._msInstance.close('blur');
+          if (!this.isCompositeEditor) {
+            keyEvt.shiftKey ? this.grid.navigatePrev() : this.grid.navigateNext();
+          }
+        }
+      },
       onClose: (reason) => {
         if (reason === 'key.escape' || reason === 'body.click' || (!this.hasAutoCommitEdit && !this.isValueChanged())) {
           if (reason === 'key.escape') {
@@ -768,10 +779,6 @@ export class SelectEditor implements Editor {
     this._msInstance = multipleSelect(selectElement, this.editorElmOptions) as MultipleSelectInstance;
     this.editorElm = this._msInstance.getParentElement();
     this.columnEditor.onInstantiated?.(this._msInstance);
-
-    if (!this.isCompositeEditor) {
-      this.show(this.delayOpening);
-    }
   }
 
   protected handleChangeOnCompositeEditor(

packages/common/src/filters/selectFilter.ts

@@ -429,6 +429,7 @@ export class SelectFilter implements Filter {
       autoAdjustDropWidthByTextSize: true,
       name: `${this.columnId}`,
       container: 'body',
+      closeOnTab: true,
       darkMode: !!this.gridOptions.darkMode,
       filter: false, // input search term on top of the select option list
       maxHeight: 275,

pnpm-workspace.yaml

@@ -33,7 +33,7 @@ catalog:
   i18next-vue: ^5.3.0
   jsdom: ^26.1.0
   'jsdom-global': ^3.0.2
-  multiple-select-vanilla: ^4.2.0
+  multiple-select-vanilla: ^4.3.1
   native-copyfiles: ^1.0.0
   npm-run-all2: ^8.0.4
   rimraf: ^6.0.1