tabulator icon indicating copy to clipboard operation
tabulator copied to clipboard

CellClick callback does not fire if editor is defined but cell is not editable

Open Deejerz88 opened this issue 11 months ago • 4 comments

Describe the bug With the 5.6+ update, it seems that having an editor & cellClick defined prevents the cellClick callback from triggering if the cell is not editable. This is the case whether the properties are set in the columnDefaults or on the columns themselves. Previous to 5.6, this worked fine.

My use case is that I want cells to be editable when the cell is selected, otherwise it would copy the cell contents to the clipboard. In these fiddles, I just fire a console.log on cellClick.

Tabulator Info

  • Tabulator 5.6

Working Example

Tabulator 5.6 Example

To Reproduce

  1. Go to https://jsfiddle.net/djmcmillan/zbr4ghL8/14/
  2. Click on a cell in the Name column
  3. Check console - no console.log was fired
  4. Click the checkbox in the same row to select the row
  5. Click the name cell in the same row.
  6. The cell editor activates and console.log is fired
  7. Deselect row
  8. Commnet out or delete editor: 'input' (ln. 28)
  9. Click "Run"
  10. Click a cell in the Name column
  11. Console.log is fired

Expected behavior The cellClick callback should trigger if the cell editor is defined but the cell is not editable. This was the case in previous versions.

Tabulator 5.5.1 Example

To Reproduce

  1. Go to https://jsfiddle.net/djmcmillan/0fmL3z7t/19/
  2. Click on a cell in the Name column
  3. Check console - console.log was fired
  4. This remains to be true regardless of editor / editable configuration.

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Chrome
  • Version: 122.0.6261.95 (Official Build) (64-bit)

Deejerz88 avatar Mar 02 '24 20:03 Deejerz88

I see similar issue when using 5.6 or 6.0 code.

By looking into change from 5.6, the new feature "editTriggerEvent" introduce the change in "Edit" module. By default, the "editTriggerEvent" table option is "focus".

https://github.com/olifolkerd/tabulator/blob/6f4934420e4bb3ffd57769343df1a78e464a6aef/src/js/modules/Edit/Edit.js#L498-L513

When click in cell, the click event was first consumed in cell level event listener, Inside of edit call, the event is "stopPropagation". https://github.com/olifolkerd/tabulator/blob/6f4934420e4bb3ffd57769343df1a78e464a6aef/src/js/modules/Edit/Edit.js#L656-L659

So, the table level click event, used to trigger "cell-click" internal table event was not happen. This causes "Menu" module for "cellClick" column option not working in readonly (not-editable) case.

As workaround, I temporary change code if(this.options("editTriggerEvent") === "focus" || this.options("editTriggerEvent") === "click"){ to if(this.options("editTriggerEvent") === "click"){, so the function revert back.

Not sure, the logic behind this "focus" or "click" checking. Maybe author can check the reason.

feng-zh avatar Mar 18 '24 13:03 feng-zh

We are also seeing this issue, the column cellClick handler is not being triggered when the cell is not editable but has the editor config option set. We have editor set and an editable callback to decide dynamically whether a cell is editable.

timhemming-fico avatar Jul 03 '24 10:07 timhemming-fico

We have some complex behavior for an editable cell, where some clicks should result in the cell being edited and other clicks.... shouldn't, and should sometimes do something completely different.

For editable cells, the editable method is now called on all clicks, and the cellClick method isn't called at all. This broke our behavior, as the editable method doesn't include an event object so we can't examine what was clicked and determine the desired behavior.

Workaround:

When the table editTriggerEvent property is set to dblclick, the cellClick method is still called for single clicks on editable cells. Depending on what is clicked on, there may not be an event property passed in (!), but it seems reliably the case that when there is no event object, the cell itself (and not a child element) was clicked.

This has allowed us to define an editable cell with a double-click trigger, handle click events in the cellClick method, evaluate what was clicked, and manually trigger editing with cell.edit() on a single click.

Ideally the cellClick callback is called when editable cells are clicked, or the editable method signature is updated to include an optional click event object.

The current workaround is pretty wild, but I'm glad we have a path forward. Hopefully the eventual fix for this continues to support evaluating and responding to what element was clicked in an editable cell.

jsturgill avatar Jul 15 '24 17:07 jsturgill

Facing the same issue. Any updates on the fix ?

scry-UrjitDesai avatar Aug 09 '24 21:08 scry-UrjitDesai