tabulator
tabulator copied to clipboard
CellClick callback does not fire if editor is defined but cell is not editable
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
- Go to https://jsfiddle.net/djmcmillan/zbr4ghL8/14/
- Click on a cell in the Name column
- Check console - no console.log was fired
- Click the checkbox in the same row to select the row
- Click the name cell in the same row.
- The cell editor activates and console.log is fired
- Deselect row
- Commnet out or delete
editor: 'input'
(ln. 28) - Click "Run"
- Click a cell in the Name column
- 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
- Go to https://jsfiddle.net/djmcmillan/0fmL3z7t/19/
- Click on a cell in the Name column
- Check console - console.log was fired
- 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)
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.
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.
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.
Facing the same issue. Any updates on the fix ?