Search code examples
tabulator

Why is Tabulator textarea losing focus on every key press?


I have a simple Tablulator JS Fiddle at the link below that has 3 columns. The last column (TA Test) has both the formatter and editor set to 'textarea'. Any attempt to enter values into that field result in the cell immediately losing focus on any key press (at least I think that is what is happening). There are no console or other errors and from what I can tell all the Tabulator options are correct.

What am I missing here to make this cell editable as a textarea?

https://jsfiddle.net/gbvam5ck/2

var data  = [
    {
    pid: 1001, 
    title: "Test One",
    Q1: {qid: 1, value: 1},
    Q2: {qid: 2, value: null},    
  },
  {
    pid: 1002, 
    title: "Test Two",
    Q1: {qid: 1, value: 0},
    Q2: {qid: 2, value: "Hello"},
  },
];

var columns = [
    {title: "PID", field: "pid"},
  {title: "Title", field: "title"},
  {title: "TA Test", field: "Q2.value", 
        formatter:"textarea", 
      editor: "textarea", 
      editorParams:{
            elementAttributes:{
            maxlength:"500",
            }
      },
   }
];

var table = new Tabulator("#example-table", {
    index:"pid",
  height: "100%",
  layout: "fitData",
  columns,
  data: data,  
});

Solution

  • It looks to be a bug using the textarea with the table height option set to a percentage. If you use a pixel value, then it works as expected.

    I would recommend you fill out a bug report against the github project. https://github.com/olifolkerd/tabulator/issues/new?assignees=&labels=Possible+Bug&template=bug_report.md&title=

    The bug report template shows you what information is needed for the bug to be easy to replicate and fix.

    (If you don't have a Github account, then I can create the bug report.)