Tabulator: row editor does not focus

[dannykhoo]

I noticed that it happened once i upgrade from 4.2.7 to 4.3

when i first click on the row cell editor , it will not focus on the cell input , i need to click again then only will focus in the input. Anyone has this issue?

Temporary i've downgraded to 4.27 and works again...

[aklaver]

The table definition.
In particular what editor is being used and whether there are any callbacks on that cell?
I'm not seeing this behavior here with 4.3.0.

[dannykhoo]

I found the cause , it is due to the 'selectable' option , if i set to 'false' , it would not have this problem , if i set to true or any integer , it will trigger this problem
4.2.7 do not have this problem...

var Tabulator = require("tabulator-tables");
import "tabulator-tables/dist/css/tabulator.min.css";

this.tableHistory = new Tabulator(this.$refs.tableHistory, {
index: "UID",
data: this.tableHistoryData,
selectable: false, //if set to true or integer , will cause the editor could not focus for first click*
autoResize: false,
height: "500px",
pagination: "local",
persistenceID: "ReprintTable",
persistentLayout: false,
movableColumns: true,
paginationSize: 20,
columns: [{
title: "Barcode",
field: "Barcode",
headerFilter: "input",
headerFilterPlaceholder: "",
editor: "input",
},

[aklaver]

I cannot replicate:
https://jsfiddle.net/aklaver/1e0jv69u/20/

Can you put up a jsFiddle/CodePen example that shows the issue?
Did you update the CSS files to 4.3?
Also OS(version) and browser(version)?

[dannykhoo]

Hi Aklaver,

I've update the css files to 4.3 , OS and browser all updated to latest.
i'm using chrome and the version ( 76.0.3809.87 (Official Build) (64-bit) ) , i've also try to use other PC to test it , still same

tested with Edge,Chrome, Opera have the same problem , however firefox work fine ...

https://jsfiddle.net/tLnaw87b/

[olifolkerd]

Hey @dannykhoo

That js fiddle is working perfectly for me, everything is focusing as it should. your browser may have cahced something.

Cheers

Oli :)

[aklaver]

Actually I see the issue with Chrome, though not with Firefox. What happens is:
1) You click on field, it gets focus.
2) The highlighting kicks in and focus is lost.
3) You click on the field again and focus returns.

Further observation reveals that on Chrome the row highlighting occurs as soon as you select a row, on Firefox you need to be holding down the shift key and select to get the highlighting.

[dannykhoo]

hi olifolkerd,

i tried to clear cache , uninstall and reinstall again but still facing the same issue exactly as wat aklaver mentioned above...
hopefully you can look into this issue, thanks :)

[olifolkerd]

wierd it works fine for me on chrome

[aklaver]

What Chrome version?
I'm using Version 74.0.3729.169 (Official Build) (64-bit)

[aklaver]

Once I remembered to update my Tabulator code to 4.4.0 it worked for me.

@dannykhoo try this:

https://jsfiddle.net/aklaver/1e0jv69u/

and see if it works for you on Chrome.

[dannykhoo]

Hi aklaver ,

Hey just tested and it works perfectly now! thanks!!
Sorry i just noticed the link you sent is [email protected] , when i change to 4.4.0 , still same issue :(

anyway temporary work around is disable 'selectable' and add row.toggleSelect(); when user click on the row.

https://jsfiddle.net/mnz3dh5s/

[olifolkerd]

Hey @dannykhoo

I have managed to replicate the isuse, the problem is not that it donst focus, it does which is why the editor class is applied, it is that the focus is then stolen elsewhere.

I will have a look at this for the next release.

Cheers

Oli :)

[dannykhoo]

Hi olifolkerd,

Yeahhh , looking forward for the next release, thanks! :)

[olifolkerd]

Hey All,

The issue was that the row selection was stealing focus away from the editor. I have pushed a fix for this to the master branch. It will be included in todays patch release.

Cheers

Oli :)

[vabene1111]

So i have installed the latest version (4.5.1) but it does not appear to fix the problem described in this issue.
This is also the case when visiting http://tabulator.info/ and trying it out on the example table on the startpage (the site uses 4.5.1 as well from what i can see in the source code).

I am running 78.0.3904.108 in a 64 Bit build on Windows 10 Pro, Firefox works without any problems.

[vabene1111]

If anyone else is having this problem and the double click is mainly used to make it easier for users to edit data this might be a workaround for the time beeing:

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

What it does is it selects whatever is in a cell the moment a user clicks on the cell. More info on how the events can be used can be found here http://tabulator.info/docs/4.5/callbacks#cell

[olifolkerd]

Hey @vabene1111

If you feel you are still having issues with this, please create a new issue, with a link to a JS Fiddle running on the latest source and include a link back to this old issue,

Cheers

Oli :)