fix: ensure Tab works with select column and keepEditorOpen (#83)

vaadin · Mar 22, 2019 · 68c4824 · 68c4824
1 parent 68eb828
commit 68c4824
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 2 deletions.
diff --git a/demo/grid-pro-edit-column-demos.html b/demo/grid-pro-edit-column-demos.html
@@ -112,11 +112,14 @@ <h3>Keep Editor Open</h3>
         <vaadin-grid-pro keep-editor-open>
           <vaadin-grid-pro-edit-column path="name.first" header="First name (edit)"></vaadin-grid-pro-edit-column>
           <vaadin-grid-column path="name.last" header="Last name (view)"></vaadin-grid-column>
+          <vaadin-grid-pro-edit-column path="name.title" header="Title (edit)" editor-type="select"></vaadin-grid-pro-edit-column>
           <vaadin-grid-pro-edit-column path="name.last" header="Last name (edit)"></vaadin-grid-pro-edit-column>
         </vaadin-grid-pro>
         <script>
           window.addDemoReadyListener('#grid-pro-edit-column-demos-keep-editor-open', function(document) {
-            document.querySelector('vaadin-grid-pro').items = Vaadin.GridDemo.getUsers();
+            const grid = document.querySelector('vaadin-grid-pro');
+            grid.items = Vaadin.GridDemo.getUsers();
+            grid.querySelector('[path="name.title"]').editorOptions = ['mr', 'mrs', 'ms'];
           });
         </script>
       </template>

diff --git a/src/vaadin-grid-pro-edit-select.html b/src/vaadin-grid-pro-edit-select.html
@@ -64,11 +64,28 @@
         };
       }
 
+      connectedCallback() {
+        super.connectedCallback();
+        this.__boundOnKeydown = this.__onKeydown.bind(this);
+        this._select._overlayElement.addEventListener('keydown', this.__boundOnKeydown);
+      }
+
+      disconnectedCallback() {
+        super.disconnectedCallback();
+        this._select._overlayElement.removeEventListener('keydown', this.__boundOnKeydown);
+      }
+
       ready() {
         super.ready();
         this._select = this.$.selectEditor;
       }
 
+      __onKeydown(e) {
+        if (e.keyCode === 9) {
+          this._grid.keepEditorOpen && this._grid._switchEditCell(e);
+        }
+      }
+
       static get observers() {
         return [
           '_optionsChanged(_select, options)'

diff --git a/test/edit-column.html b/test/edit-column.html
@@ -33,6 +33,17 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="select">
+    <template>
+      <vaadin-grid-pro>
+        <vaadin-grid-pro-edit-column path="name"></vaadin-grid-pro-edit-column>
+        <vaadin-grid-pro-edit-column path="title" editor-type="select"></vaadin-grid-pro-edit-column>
+        <vaadin-grid-pro-edit-column path="age"></vaadin-grid-pro-edit-column>
+        <vaadin-grid-column path="name"></vaadin-grid-column>
+      </vaadin-grid-pro>
+    </template>
+  </test-fixture>
+
   <script>
     const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
@@ -210,7 +221,7 @@
             expect(input).to.be.ok;
           });
 
-          it('should focus previous cell available for editing on the previous in edit mode on Shift Tab', () => {
+          it('should focus previous cell available for editing on the previous row in edit mode on Shift Tab', () => {
             const firstCell = getContainerCell(grid.$.items, 2, 0);
             dblclick(firstCell._content);
             input = getCellEditor(firstCell);
@@ -262,6 +273,49 @@
             shiftEnter(input);
             expect(getCellEditor(firstCell)).to.be.not.ok;
           });
+
+          describe('with the select column', () => {
+            let textCell, selectCell, selectOverlay, checkboxCell;
+
+            beforeEach(() => {
+              grid = fixture('select');
+              grid.items = getItems();
+              grid.querySelector('[path="title"]').editorOptions = ['mr', 'mrs', 'ms'];
+              flushGrid(grid);
+              grid.keepEditorOpen = true;
+              textCell = getContainerCell(grid.$.items, 1, 0);
+              selectCell = getContainerCell(grid.$.items, 1, 1);
+              checkboxCell = getContainerCell(grid.$.items, 1, 2);
+            });
+
+            it('should focus cell next available for editing in edit mode on Tab', done => {
+              dblclick(textCell._content);
+              input = getCellEditor(textCell);
+              tab(input);
+
+              selectOverlay = getCellEditor(selectCell)._select._overlayElement;
+              selectOverlay.addEventListener('vaadin-overlay-open', e => {
+                tab(selectOverlay);
+                input = getCellEditor(checkboxCell);
+                expect(input).to.be.ok;
+                done();
+              });
+            });
+
+            it('should focus previous cell available for editing in edit mode on Shift Tab', done => {
+              dblclick(checkboxCell._content);
+              input = getCellEditor(checkboxCell);
+              shiftTab(input);
+
+              selectOverlay = getCellEditor(selectCell)._select._overlayElement;
+              selectOverlay.addEventListener('vaadin-overlay-open', e => {
+                shiftTab(selectOverlay);
+                input = getCellEditor(textCell);
+                expect(input).to.be.ok;
+                done();
+              });
+            });
+          });
         });
 
         it('should exit the edit mode for the cell when pressing ESC', () => {