BInd keyboard events on wrapper

lib/frappe-datatable.js

@@ -879,10 +879,10 @@ var CellManager = function () {
         }
       });
 
-      _dom2.default.on(document.body, 'click', function (e) {
-        if (e.target.matches('.edit-cell, .edit-cell *')) return;
-        _this.deactivateEditing();
-      });
+      // $.on(document.body, 'click', e => {
+      //   if (e.target.matches('.edit-cell, .edit-cell *')) return;
+      //   this.deactivateEditing();
+      // });
     }
   }, {
     key: 'bindKeyboardNav',
@@ -1275,9 +1275,9 @@ var CellManager = function () {
   }, {
     key: 'getEditingObject',
     value: function getEditingObject(colIndex, rowIndex, value, parent) {
-      if (this.options.editing) {
-        return this.options.editing(colIndex, rowIndex, value, parent);
-      }
+      // debugger;
+      var obj = this.options.editing(colIndex, rowIndex, value, parent);
+      if (obj && obj.setValue) return obj;
 
       // editing fallback
       var $input = _dom2.default.create('input', {
@@ -1317,6 +1317,7 @@ var CellManager = function () {
 
           // update cell immediately
           this.updateCell(colIndex, rowIndex, value);
+          $cell.focus();
 
           if (done && done.then) {
             // revert to oldValue if promise fails
@@ -1430,22 +1431,22 @@ var CellManager = function () {
   }, {
     key: 'getLeftMostCell$',
     value: function getLeftMostCell$(rowIndex) {
-      return this.getCell$(rowIndex, this.columnmanager.getFirstColumnIndex());
+      return this.getCell$(this.columnmanager.getFirstColumnIndex(), rowIndex);
     }
   }, {
     key: 'getRightMostCell$',
     value: function getRightMostCell$(rowIndex) {
-      return this.getCell$(rowIndex, this.columnmanager.getLastColumnIndex());
+      return this.getCell$(this.columnmanager.getLastColumnIndex(), rowIndex);
     }
   }, {
     key: 'getTopMostCell$',
     value: function getTopMostCell$(colIndex) {
-      return this.getCell$(this.rowmanager.getFirstRowIndex(), colIndex);
+      return this.getCell$(colIndex, this.rowmanager.getFirstRowIndex());
     }
   }, {
     key: 'getBottomMostCell$',
     value: function getBottomMostCell$(colIndex) {
-      return this.getCell$(this.rowmanager.getLastRowIndex(), colIndex);
+      return this.getCell$(colIndex, this.rowmanager.getLastRowIndex());
     }
   }, {
     key: 'getCell',
@@ -1465,12 +1466,13 @@ var CellManager = function () {
   }, {
     key: 'scrollToCell',
     value: function scrollToCell($cell) {
-      if (_dom2.default.inViewport($cell, this.bodyScrollable)) return;
+      if (_dom2.default.inViewport($cell, this.bodyScrollable)) return false;
 
       var _$$data12 = _dom2.default.data($cell),
           rowIndex = _$$data12.rowIndex;
 
       this.rowmanager.scrollToRow(rowIndex);
+      return false;
     }
   }, {
     key: 'getRowCountPerPage',
@@ -1494,7 +1496,7 @@ function getCellHTML(column) {
     isHeader: isHeader
   });
 
-  return '\n    <td class="data-table-col noselect" ' + dataAttr + '>\n      ' + getCellContent(column) + '\n    </td>\n  ';
+  return '\n    <td class="data-table-col noselect" ' + dataAttr + ' tabindex="0">\n      ' + getCellContent(column) + '\n    </td>\n  ';
 }
 
 function getCellContent(column) {
@@ -2187,6 +2189,10 @@ var _style = __webpack_require__(12);
 
 var _style2 = _interopRequireDefault(_style);
 
+var _keyboard = __webpack_require__(8);
+
+var _keyboard2 = _interopRequireDefault(_keyboard);
+
 var _defaults = __webpack_require__(13);
 
 var _defaults2 = _interopRequireDefault(_defaults);
@@ -2227,6 +2233,8 @@ var DataTable = function () {
     this.cellmanager = new _cellmanager2.default(this);
     this.bodyRenderer = new _bodyRenderer2.default(this);
 
+    _keyboard2.default.init(this.wrapper);
+
     if (this.options.data) {
       this.refresh(this.options.data);
     }
@@ -2972,10 +2980,13 @@ var KEYCODES = {
   67: 'c'
 };
 
+var initDone = false;
 var handlers = {};
 
-function bind() {
-  _dom2.default.on(document, 'keydown', handler);
+function bind(dom) {
+  if (initDone) return;
+  _dom2.default.on(dom, 'keydown', handler);
+  initDone = true;
 }
 
 function handler(e) {
@@ -3002,9 +3013,10 @@ function handler(e) {
   }
 }
 
-bind();
-
 exports.default = {
+  init: function init(dom) {
+    bind(dom);
+  },
   on: function on(key, handler) {
     var keys = key.split(',').map(function (k) {
       return k.trim();
@@ -3298,7 +3310,7 @@ exports.default = {
     none: ''
   },
   freezeMessage: 'Loading...',
-  editing: null,
+  editing: function editing() {},
   addSerialNoColumn: true,
   addCheckboxColumn: true,
   enableClusterize: true,

src/cellmanager.js

@@ -51,10 +51,10 @@ export default class CellManager {
       }
     });
 
-    $.on(document.body, 'click', e => {
-      if (e.target.matches('.edit-cell, .edit-cell *')) return;
-      this.deactivateEditing();
-    });
+    // $.on(document.body, 'click', e => {
+    //   if (e.target.matches('.edit-cell, .edit-cell *')) return;
+    //   this.deactivateEditing();
+    // });
   }
 
   bindKeyboardNav() {
@@ -374,9 +374,9 @@ export default class CellManager {
   }
 
   getEditingObject(colIndex, rowIndex, value, parent) {
-    if (this.options.editing) {
-      return this.options.editing(colIndex, rowIndex, value, parent);
-    }
+    // debugger;
+    const obj = this.options.editing(colIndex, rowIndex, value, parent);
+    if (obj && obj.setValue) return obj;
 
     // editing fallback
     const $input = $.create('input', {
@@ -411,6 +411,7 @@ export default class CellManager {
 
         // update cell immediately
         this.updateCell(colIndex, rowIndex, value);
+        $cell.focus();
 
         if (done && done.then) {
           // revert to oldValue if promise fails
@@ -501,19 +502,19 @@ export default class CellManager {
   }
 
   getLeftMostCell$(rowIndex) {
-    return this.getCell$(rowIndex, this.columnmanager.getFirstColumnIndex());
+    return this.getCell$(this.columnmanager.getFirstColumnIndex(), rowIndex);
   }
 
   getRightMostCell$(rowIndex) {
-    return this.getCell$(rowIndex, this.columnmanager.getLastColumnIndex());
+    return this.getCell$(this.columnmanager.getLastColumnIndex(), rowIndex);
   }
 
   getTopMostCell$(colIndex) {
-    return this.getCell$(this.rowmanager.getFirstRowIndex(), colIndex);
+    return this.getCell$(colIndex, this.rowmanager.getFirstRowIndex());
   }
 
   getBottomMostCell$(colIndex) {
-    return this.getCell$(this.rowmanager.getLastRowIndex(), colIndex);
+    return this.getCell$(colIndex, this.rowmanager.getLastRowIndex());
   }
 
   getCell(colIndex, rowIndex) {
@@ -529,11 +530,11 @@ export default class CellManager {
   }
 
   scrollToCell($cell) {
-    if ($.inViewport($cell, this.bodyScrollable)) return;
+    if ($.inViewport($cell, this.bodyScrollable)) return false;
 
     const { rowIndex } = $.data($cell);
-
     this.rowmanager.scrollToRow(rowIndex);
+    return false;
   }
 
   getRowCountPerPage() {
@@ -550,7 +551,7 @@ export function getCellHTML(column) {
   });
 
   return `
-    <td class="data-table-col noselect" ${dataAttr}>
+    <td class="data-table-col noselect" ${dataAttr} tabindex="0">
       ${getCellContent(column)}
     </td>
   `;

src/datatable.js

@@ -5,6 +5,7 @@ import ColumnManager from './columnmanager';
 import RowManager from './rowmanager';
 import BodyRenderer from './body-renderer';
 import Style from './style';
+import keyboard from './keyboard';
 import DEFAULT_OPTIONS from './defaults';
 import './style.scss';
 
@@ -40,6 +41,8 @@ class DataTable {
     this.cellmanager = new CellManager(this);
     this.bodyRenderer = new BodyRenderer(this);
 
+    keyboard.init(this.wrapper);
+
     if (this.options.data) {
       this.refresh(this.options.data);
     }

src/defaults.js

@@ -41,7 +41,7 @@ export default {
     none: ''
   },
   freezeMessage: 'Loading...',
-  editing: null,
+  editing: () => {},
   addSerialNoColumn: true,
   addCheckboxColumn: true,
   enableClusterize: true,

src/keyboard.js

@@ -15,10 +15,13 @@ const KEYCODES = {
   67: 'c'
 };
 
+let initDone = false;
 const handlers = {};
 
-function bind() {
-  $.on(document, 'keydown', handler);
+function bind(dom) {
+  if (initDone) return;
+  $.on(dom, 'keydown', handler);
+  initDone = true;
 }
 
 function handler(e) {
@@ -45,9 +48,10 @@ function handler(e) {
   }
 }
 
-bind();
-
 export default {
+  init(dom) {
+    bind(dom);
+  },
   on(key, handler) {
     const keys = key.split(',').map(k => k.trim());