feat: Edit on Click (#151)

Add ability to make cell edition to be performed on a single click

part of #73

Co-authored-by: Tomi Virkki <virkki@vaadin.com>

.travis.yml

@@ -1,7 +1,7 @@
 sudo: false
 dist: xenial
 language: node_js
-node_js: 8.11
+node_js: 10.23
 
 cache:
   directories:

demo/grid-pro-edit-column-demos.html

@@ -128,6 +128,29 @@ <h3>Single Cell Edit</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Edit on Click</h3>
+    <p>
+      When <code>editOnClick</code> is set on the grid element, cell edit mode gets activated on a single click
+      instead of the default double click.
+    </p>
+    <vaadin-demo-snippet id="grid-pro-edit-column-demos-edit-on-click" when-defined="vaadin-grid-pro">
+      <template preserve-content>
+        <vaadin-grid-pro edit-on-click>
+          <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.last" header="Last name (edit)"></vaadin-grid-pro-edit-column>
+          <vaadin-grid-pro-edit-column path="name.title" header="Title (edit)" editor-type="select"></vaadin-grid-pro-edit-column>
+        </vaadin-grid-pro>
+        <script>
+          window.addDemoReadyListener('#grid-pro-edit-column-demos-edit-on-click', function(document) {
+            const grid = document.querySelector('vaadin-grid-pro');
+            grid.items = Vaadin.GridDemo.getUsers();
+            grid.querySelector('[path="name.title"]').editorOptions = ['mr', 'mrs', 'ms'];
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Use Enter to Focus Next Row</h3>
     <p>
       When <code>enterNextRow</code> is set on the grid element, the following keys <b>change behavior</b>:

src/vaadin-grid-pro-inline-editing-mixin.html

@@ -47,6 +47,14 @@
           notify: true // FIXME(yuriy-fix): needed by Flow counterpart
         },
 
+        /**
+         * When true, the grid enters cell edit mode on a single click
+         * instead of the default double click.
+         */
+        editOnClick: {
+          type: Boolean,
+        },
+
         /** @private */
         _editingDisabled: {
           type: Boolean
@@ -104,6 +112,9 @@
         const column = this.getEventContext(e).column;
         if (column && this._isEditColumn(column)) {
           e.preventDefault();
+          if (this.editOnClick) {
+            this._enterEditFromEvent(e);
+          }
         }
       });
 
@@ -131,7 +142,9 @@
         });
       } else {
         this.addEventListener('dblclick', e => {
-          this._enterEditFromEvent(e);
+          if (!this.editOnClick) {
+            this._enterEditFromEvent(e);
+          }
         });
       }
     }

test/edit-column-renderer.html

@@ -165,6 +165,23 @@
           const secondCell = getContainerCell(grid.$.items, 0, 2);
           expect(secondCell._content.textContent).to.equal('new');
         });
+
+        describe('single click edit', () => {
+
+          beforeEach(() => grid.editOnClick = true);
+
+          it('should enter edit mode on single click', () => {
+            firstCell._content.dispatchEvent(new CustomEvent('click', {bubbles: true, composed: true}));
+            expect(getCellEditor(firstCell)).to.be.ok;
+          });
+
+          it('should not enter edit mode on single click', () => {
+            grid.editOnClick = false;
+            firstCell._content.dispatchEvent(new CustomEvent('click', {bubbles: true, composed: true}));
+            expect(getCellEditor(firstCell)).not.to.be.ok;
+          });
+
+        });
       });
 
       describe('custom edit mode renderer', () => {