Fix keyboard focus getting trapped when cell has tabbable elements.

Added another focus sink just after the grid content and set focus depending on the direction of keyboard navigation.
mleibman · Nov 29, 2012 · 86ce1e1 · 86ce1e1
1 parent c804311
commit 86ce1e1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html
@@ -17,6 +17,9 @@
   </style>
 </head>
 <body>
+
+<input type=text>
+
 <table width="100%">
   <tr>
     <td valign="top" width="50%">
@@ -32,6 +35,8 @@ <h2>Demonstrates:</h2>
   </tr>
 </table>
 
+<input type=text>
+
 <script src="../lib/firebugx.js"></script>
 
 <script src="../lib/jquery-1.7.min.js"></script>
@@ -43,10 +48,15 @@ <h2>Demonstrates:</h2>
 <script src="../slick.grid.js"></script>
 
 <script>
+    function formatter(row, cell, value, columnDef, dataContext) {
+        return value;
+    }
+
+
   var grid;
   var data = [];
   var columns = [
-    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},
+    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
     {id: "duration", name: "Duration", field: "duration"},
     {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
     {id: "start", name: "Start", field: "start", minWidth: 60},
@@ -61,10 +71,10 @@ <h2>Demonstrates:</h2>
   };
 
   $(function () {
-    for (var i = 0; i < 500; i++) {
+    for (var i = 0; i < 5; i++) {
       var d = (data[i] = {});
 
-      d["title"] = "Task " + i;
+      d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;
       d["duration"] = "5 days";
       d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
       d["start"] = "01/01/2009";

diff --git a/slick.grid.js b/slick.grid.js
@@ -114,7 +114,7 @@ if (typeof Slick === "undefined") {
     var $container;
     var uid = "slickgrid_" + Math.round(1000000 * Math.random());
     var self = this;
-    var $focusSink;
+    var $focusSink, $focusSink2;
     var $headerScroller;
     var $headers;
     var $headerRow, $headerRowScroller, $headerRowSpacer;
@@ -133,6 +133,7 @@ if (typeof Slick === "undefined") {
     var absoluteColumnMinWidth;
     var numberOfRows = 0;
 
+    var tabbingDirection = 1;
     var activePosX;
     var activeRow, activeCell;
     var activeCellNode = null;
@@ -254,6 +255,8 @@ if (typeof Slick === "undefined") {
 
       $canvas = $("<div class='grid-canvas' />").appendTo($viewport);
 
+      $focusSink2 = $focusSink.clone().appendTo($container);
+
       if (!options.explicitInitialization) {
         finishInitialization();
       }
@@ -302,7 +305,7 @@ if (typeof Slick === "undefined") {
             .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave);
         $headerRowScroller
             .bind("scroll", handleHeaderRowScroll);
-        $focusSink
+        $focusSink.add($focusSink2)
             .bind("keydown", handleKeyDown);
         $canvas
             .bind("keydown", handleKeyDown)
@@ -2363,7 +2366,11 @@ if (typeof Slick === "undefined") {
     }
 
     function setFocus() {
-      $focusSink[0].focus();
+      if (tabbingDirection == -1) {
+        $focusSink[0].focus();
+      } else {
+        $focusSink2[0].focus();
+      }
     }
 
     function scrollCellIntoView(row, cell) {
@@ -2901,6 +2908,16 @@ if (typeof Slick === "undefined") {
       }
       setFocus();
 
+      var tabbingDirections = {
+        "up": -1,
+        "down": 1,
+        "left": -1,
+        "right": 1,
+        "prev": -1,
+        "next": 1
+      };
+      tabbingDirection = tabbingDirections[dir];
+
       var stepFunctions = {
         "up": gotoUp,
         "down": gotoDown,