Browse files

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.
  • Loading branch information...
1 parent c804311 commit 86ce1e1c9d42ba5e10f8f335876e9a8ad03a5f2c @mleibman committed Nov 29, 2012
Showing with 33 additions and 6 deletions.
  1. +13 −3 examples/example2-formatters.html
  2. +20 −3 slick.grid.js
View
16 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 @@
</tr>
</table>
+<input type=text>
+
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.7.min.js"></script>
@@ -43,10 +48,15 @@
<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 @@
};
$(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";
View
23 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,

0 comments on commit 86ce1e1

Please sign in to comment.