Tabulator: Cell double click prevents editing in chrome

[vabene1111]

Describe the bug
When double clicking inside a cell in chrome, the text inside the cell gets selected but its no longer possible to edit the text (focus seems to be lost even though visually it appears to be correct). This was discussed in #2262 and should have been fixes but it appears that this isn't always the case.

Tabulator Info

• version 5.1

Working Example
https://jsfiddle.net/v8Lokasp/
it can also be reproduced on the website http://tabulator.info/

To Reproduce
A step by step guide to recreate the issue in your JS Fiddle or Codepen:

1. Go to https://jsfiddle.net/v8Lokasp/ in chrome
2. Double click into one of the name cells
3. Try to type something
4. If the expected bug does not show try a few more times on different cells

Expected behavior
The text should be editable as if the user had manually selected it

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser Chrome
• Version 78.0.3904.108 64 bit

Additional context
Same as discussed here #2262, this issue is created as asked in this comment https://github.com/olifolkerd/tabulator/issues/2262#issuecomment-562971461

[aklaver]

I am not seeing this behavior using Chrome Version 74.0.3729.169 on either the Fiddle or the Tabulator site. The behavior you describe is not the same as #2262. The previous issue required two distinct clicks to get focus on the cell, whereas as what you describe takes the cell out of focus when double clicking.

[vabene1111]

I just tried it again on my linux machine with chrome 78.0.3904.108 (Official Build) (64-bit) and the problem occurs as described both in the fiddle and on the website.

I would record a video of the problem but i dont think that makes much sense as the mouse/keyboard is the important part. I will try recording a video including maybe the virtual keyboard when back at home.

[aklaver]

Looks to be a change in behavior in Chrome. Using:
Version 78.0.3904.108 (Official Build) (64-bit)
I see your issue. You can single click and edit. If you double click it selects the cell value but you can't change anything. I could delete the entry by doing a single click to put the cell into edit mode and then Shift + Home to select the value and then Delete or type over.

[jjpotter82]

It seems to work OK in Chrome 77 on version 4.2, however from version 4.3 onward I'm seeing the same behaviour described above.

If you go to http://tabulator.info/docs/4.2/edit and double or triple click on cells in the Name column, you're able to delete the text by pressing Del (for example). Go into http://tabulator.info/docs/4.3/edit (or 4.4 or 4.5) and it lets you delete the text when you triple click but not double click. If you manually drag to select the text, you're able to delete it (it could be something to do with the text of the entire cell being selected automatically?).

[lambdadbmal]

I have a same issue on Tabulator 4.5.3. (Google Chrome 79.0.3945.117)

[waelghazie]

The problem is present under chrome 79 , Tabulator 4.5. But OK in Firefox 71.

[roypardi]

I'm seeing this in Electron 8.0.0 (Chromium 80, V8 8.0, and Node.js 12.13.0) on macOS 10.14.5.

And reproducible in Google Chrome Version 79.0.3945.130 (Official Build) (64-bit) at this page:
http://tabulator.info/examples/4.5#editable

If anyone finds a workaround, please post it here.

[vabene1111]

I use the following function to automatically highlight to code once the cell is clicked so users dont have to double click. Its not a great solution and only works for some fields but it does the job

cellClick: function (e, cell) {
        input = cell.getElement().childNodes[0]
        input.focus()
        input.select()
},

[roypardi]

@vabene1111 – thanks! That seems to work.

I set it for double-click so: single click makes field active, double-click makes field active, selects all contents AND is editable!

    {
            title: "View", field: "stateName", align: "left", headerSort: false,
            editor: "input", editable: true, cellDblClick: function (e, cell) {
                var input = cell.getElement().childNodes[0]
                input.focus()
                input.select()
            },
        },

[olifolkerd]

Hey @vabene1111

Thanks for reporting this, definitely a bug.

I have pushed a fix to the 4.6 branch which will be released later this weekend.

Cheers

Oli :)