diff options
| author | Michael Leibman <michael.leibman@gmail.com> | 2012-11-29 15:05:45 -0800 |
|---|---|---|
| committer | Michael Leibman <michael.leibman@gmail.com> | 2012-11-29 15:05:45 -0800 |
| commit | 86ce1e1c9d42ba5e10f8f335876e9a8ad03a5f2c (patch) | |
| tree | f935afb3a1ac1f179805973cc3b309a127068be1 | |
| parent | c804311bde50db690529c8b4d5e33aaac74cb26b (diff) | |
| download | SlickGrid-86ce1e1c9d42ba5e10f8f335876e9a8ad03a5f2c.zip SlickGrid-86ce1e1c9d42ba5e10f8f335876e9a8ad03a5f2c.tar.gz SlickGrid-86ce1e1c9d42ba5e10f8f335876e9a8ad03a5f2c.tar.bz2 | |
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.
| -rw-r--r-- | examples/example2-formatters.html | 16 | ||||
| -rw-r--r-- | slick.grid.js | 23 |
2 files changed, 33 insertions, 6 deletions
diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html index fd1b366..476b75a 100644 --- 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 @@ </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"; diff --git a/slick.grid.js b/slick.grid.js index 3f41c34..a49e5e4 100644 --- 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, |