Add option for single-click edit toggle

[rolfsmeds]

Currently the user has to doubleclick a cell to switch it to edit mode. This is problematic for a number of reasons:

1. Doubleclicking is still difficult for some users and should be avoided as the only way to invoke a piece of functionality.
2. The user has to know that they need to doubleclick, which is far from obvious or intuitive. (This is especially problematic since editable cells are not visually distinguished in any way, so discovering cell editability is down to trial and error. Single-click editing would at least lower that barrier somewhat.)
3. In cases where editing the cells is an integral part of the user workflow, and they do it a lot, having to doubleclick every time becomes tedious.

I realize that a single-click toggle interferes with selection, but in many cases where heavy inline editing is needed, selection is a lesser concern, and can be provided by other means than a click anywhere in the row, e.g. using a selection column, an uneditable first column, or by providing row-specific functions with in-row buttons or a context menu instead, so I feel that having single-click editing as an option would be very valuable even with this caveat.

[web-padawan]

I would recommend making this opt-in via editOnClick Boolean property on the grid.

Implementation notes:

1. The overall implementation should be easy by reusing existing code:
   

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

   Lines 93 to 95 in 23c9d24

   	this.addEventListener('dblclick', e => {
   	this._enterEditFromEvent(e);
   	});

2. There is a click listener already for iOS to workaround dblclick event there.

---

editable cells are not visually distinguished in any way

Note: this has to be fixed in #72

[jouni]

I’m trying to figure out the different modes of the grid and how they might affect this.

There are two modes for the grid as a whole (applies to the normal Grid component as well):

• Navigation: ←↑→↓ move focus from cell-to-cell, Tab moves focus from header -> body -> footer -> next component, Enter switches to interactive mode.
• Interactive: all keys operate the the focused component inside a cell, Enter and Esc exits back to navigation mode.

In Grid Pro, the editable column cells have two modes:

• Presentation: cell data is rendered using static, non-interactive, components.
• Edit: cell data is rendered using components that the user can use to edit the data.

Instead of something like editOnClick, would it be feasible to not define the presentation mode for an edit column, or somehow else always force the editor mode?

Then it would always be directly editable by clicking on it. Also, the whole grid should change to the interactive mode in that situation (when a cell in edit mode is focused), so that Tab-navigation works as expected (skipping over non-editable cells). Having a user focus any cell in edit mode would change the whole grid to interactive mode (and the user can exit back to navigation mode by pressing Esc).

Compare that to the “Crud Demos” example for the normal Grid. Press the edit button on one row, and then you have that row in “edit” mode vs the other rows in presentation mode. The normal Grid has quirks/bugs how it moves between the navigation and interactive modes, and we should address those at the same time.

The idea isn’t completely clear, but to me, it seems it could use a bit more consideration. I think one of my concerns is that is it going to be strange for a user to click on a textual element which will then change into a completely different component like a checkbox?

Also, with something like editOnClick, would that work with Select? Would the first click change the cell rendering, and another click would be required to open the dropdown? And would that be the desired behavior even (not to open the dropdown immediately on the first click)?

[rolfsmeds]

Instead of something like editOnClick, would it be feasible to not define the presentation mode for an edit column, or somehow else always force the editor mode?

This sounds like a very good idea to me, since it's more in line with the way developers want a fully-editable grid to work, and the way in which users want to use it. It could also solve the issue of affordance/discoverability of editable cells, especially if cells in edit mode would be clearly distinguish visually.

[web-padawan]

Instead of something like editOnClick, would it be feasible to not define the presentation mode for an edit column, or somehow else always force the editor mode?

The only guidance we had while working on the initial release was "when in doubt, align with how Google spreadsheet works".

Having edit mode enabled by default would produce a need for significant refactoring, but I agree it kinda makes sense for some of the use cases.

Please keep in mind the "password" column behavior described at https://github.com/vaadin/vaadin-grid-pro/issues/71#issuecomment-473258194

[mhosio]

A workaround that may work for some cases:

grid.addAttachListener(a -> {
  grid.getElement().executeJs(
    "this.addEventListener('click', function(e) {this._enterEditFromEvent(e)} )");
});

[fleahy]

I'm using @mhosio s solution and it's working great. I'd really like to see this as something that would be possible to do from Java without needing any JavaScript code at all, it just feels dirty and it may possibly fail if the client-side code changes.

It would really be great to see GridPro behave similar to Google Sheets, as @web-padawan mentioned. Is there any progress regarding that?

[rolfsmeds]

No actual progress at the moment, but GridPro is up for some refactoring in the next few months anyway, so we'll see if this feature can be included in that work.

[rolfsmeds]

Assuming we'll go with the single-click edit switch option, here are some detail regardin potential dilemmas involved:

How will it work together with single-select (which also works with a click anywhere on the row)?
Same way as it currently works: cells with editors do not work for selection. (Unless we consider that a bug and want to change it.)

How will it work together with row-details (which are also toggled on/off with a click anywhere on the row)?
Same way as it currently works: cells with editors do not work for item-details toggling. (Unless we consider that a bug and want to change it.)

Should select-type editors automatically open the dropdown when edit mode is triggered?
Yes, why not? Enabling quick interaction is exactly what this change is about.

Will it be strange for a user to click on a textual element which then changes to something else like a checkbox?
The difference between single and double click hardly affects the strangeness factor significantly.

Other considerations

• Editable cells should be visually distinguishable from non-editable cells. (Make it possible to visually differentiate editable cells from read only cells #72 already adds an attribute, but a default visual style would be best.)
• A new selection mode, in which a column of radio buttons are rendered to the left, similarly to the checkbox column for multiselect, would provide a clear click target for single selection and solve some of the issues mentioned above (this should also then be provided for regular Grid).
• A genreated item-details toggle column for toggling item-details could be provided as an option. This would solve the togglability of item-details mentioned above.

[rolfsmeds]

Separate ticket for radio button column feature mentioned above: https://github.com/vaadin/vaadin-grid/issues/1780

Separate ticket for row-details toggle column feature mentioned above: https://github.com/vaadin/vaadin-grid/issues/1781

Separate ticket for Lumo+Material styling for visually distinguishing editable cells: https://github.com/vaadin/vaadin-grid-pro/issues/127

[tomivirkki]

Draft implementation at 18716d1 The behavior and naming still need some more discussion.

[alvarezguille]

vaadin-crud has edit-on-click

[rolfsmeds]

Acceptance Criteria

As an end user
I want to trigger Grid Pro's inline editing mode with a single click on a cell
So that I can edit more easily

Acceptance criteria

• Disabled by default (i.e. double click required to engage edit mode)
• WC property/attrib for enabling: editOnClick / edit-on-click
• Java method for enabling: setEditOnClick(boolean)
• Cells with editors do not select the row (no change from current behavior)
• Cells with editors do not toggle row details (no change from current behavior)
• Select-type editors should automatically open the dropdown when edit mode is engaged

General criteria

• APIs reviewed [here link to API review documentation, if any]
• UX/DX tests in Alpha [here link(s) to issue(s) with the description of UX/DX tests, if any]