Improve Select type cell editor (#10673)

.changelogs/10673.json

@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "private",
+  "title": "Improved Select type cell editor",
+  "type": "changed",
+  "issueOrPR": 10673,
+  "breaking": false,
+  "framework": "none"
+}

handsontable/src/editors/selectEditor/__tests__/keyboardShortcuts.spec.js

@@ -0,0 +1,48 @@
+describe('keyboard navigation', () => {
+  const id = 'testContainer';
+
+  beforeEach(function() {
+    this.$container = $(`<div id="${id}"></div>`).appendTo('body');
+  });
+
+  afterEach(function() {
+    if (this.$container) {
+      destroy();
+      this.$container.remove();
+    }
+  });
+
+  describe('"Tab"', () => {
+    it('should select the next cell when the editor is opened', async() => {
+      handsontable({
+        data: createSpreadsheetData(3, 3),
+        rowHeaders: true,
+        colHeaders: true,
+        type: 'select',
+      });
+
+      selectCell(1, 1);
+      keyDownUp('enter');
+      keyDownUp('tab');
+
+      expect(getSelectedRange()).toEqualCellRange(['highlight: 1,2 from: 1,2 to: 1,2']);
+    });
+  });
+
+  describe('"Shift + Tab"', () => {
+    it('should select the previous cell when the editor is opened', async() => {
+      handsontable({
+        data: createSpreadsheetData(3, 3),
+        rowHeaders: true,
+        colHeaders: true,
+        type: 'select',
+      });
+
+      selectCell(1, 1);
+      keyDownUp('enter');
+      keyDownUp(['shift', 'tab']);
+
+      expect(getSelectedRange()).toEqualCellRange(['highlight: 1,0 from: 1,0 to: 1,0']);
+    });
+  });
+});

handsontable/src/editors/selectEditor/selectEditor.js

@@ -26,10 +26,12 @@ export class SelectEditor extends BaseEditor {
    * Initializes editor instance, DOM Element and mount hooks.
    */
   init() {
-    this.select = this.hot.rootDocument.createElement('SELECT');
-    addClass(this.select, 'htSelectEditor');
+    this.select = this.hot.rootDocument.createElement('select');
+    this.select.setAttribute('data-hot-input', 'true');
     this.select.style.display = 'none';
 
+    addClass(this.select, 'htSelectEditor');
+
     this.hot.rootElement.appendChild(this.select);
     this.registerHooks();
   }
@@ -215,7 +217,7 @@ export class SelectEditor extends BaseEditor {
   registerShortcuts() {
     const shortcutManager = this.hot.getShortcutManager();
     const editorContext = shortcutManager.getContext('editor');
-
+    const gridContext = shortcutManager.getContext('grid');
     const contextConfig = {
       group: SHORTCUTS_GROUP,
     };
@@ -226,6 +228,13 @@ export class SelectEditor extends BaseEditor {
     }
 
     editorContext.addShortcuts([{
+      keys: [
+        ['Tab'],
+        ['Shift', 'Tab'],
+      ],
+      forwardToContext: gridContext,
+      callback: () => {},
+    }, {
       keys: [['ArrowUp']],
       callback: () => {
         const previousOptionIndex = this.select.selectedIndex - 1;