feat: Single click edit

vaadin · Aug 6, 2020 · 18716d1 · 18716d1
1 parent bc7a31c
commit 18716d1
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/demo/grid-pro-edit-column-demos.html b/demo/grid-pro-edit-column-demos.html
@@ -128,6 +128,29 @@ <h3>Single Cell Edit</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Single Click Edit</h3>
+    <p>
+      When <code>singleClickEdit</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-single-click-edit" when-defined="vaadin-grid-pro">
+      <template preserve-content>
+        <vaadin-grid-pro single-click-edit>
+          <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-single-click-edit', 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>:

diff --git a/src/vaadin-grid-pro-inline-editing-mixin.html 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.
+         */
+        singleClickEdit: {
+          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.singleClickEdit) {
+            this._enterEditFromEvent(e);
+          }
         }
       });
 

diff --git a/test/edit-column-renderer.html b/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.singleClickEdit = 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.singleClickEdit = false;
+            firstCell._content.dispatchEvent(new CustomEvent('click', {bubbles: true, composed: true}));
+            expect(getCellEditor(firstCell)).not.to.be.ok;
+          });
+
+        });
       });
 
       describe('custom edit mode renderer', () => {