Permalink
Browse files

Fix #302 and #319 (though the user seems confused about his own bug r…

…eport):

- Use a fixed position (i.e. always on screen) hidden DIV as a focusable keyboard event sink, and focus on that instead of the grid canvas.  Since it is always in the viewport, no scrolling occurs.  We still listen to events from editors bubbling up to the canvas and set focus on canvas clicks.
- Exposed a "focus()" method on the grid.
- Got rid of IE's .setActive() call since we have a better mechanism now.
- Fixed "fast" arrow key navigation when asyncEditorLoading is on.
  • Loading branch information...
1 parent 0caf9ba commit 505c908f7d8919edf4280517b91ca59a82661fec @mleibman committed Apr 14, 2012
Showing with 14 additions and 11 deletions.
  1. +14 −11 slick.grid.js
View
@@ -112,6 +112,7 @@ if (typeof Slick === "undefined") {
var $container;
var uid = "slickgrid_" + Math.round(1000000 * Math.random());
var self = this;
+ var $focusSink;
var $headerScroller;
var $headers;
var $headerRow, $headerRowScroller;
@@ -196,8 +197,6 @@ if (typeof Slick === "undefined") {
$container
.empty()
- .attr("tabIndex", 0)
- .attr("hideFocus", true)
.css("overflow", "hidden")
.css("outline", 0)
.addClass(uid)
@@ -208,6 +207,8 @@ if (typeof Slick === "undefined") {
$container.css("position", "relative");
}
+ $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);
+
$headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
$headers = $("<div class='slick-header-columns' style='width:10000px; left:-1000px' />").appendTo($headerScroller);
@@ -225,10 +226,10 @@ if (typeof Slick === "undefined") {
$headerRowScroller.hide();
}
- $viewport = $("<div class='slick-viewport' tabIndex='0' hideFocus style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);
+ $viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);
$viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
- $canvas = $("<div class='grid-canvas' tabIndex='0' hideFocus />").appendTo($viewport);
+ $canvas = $("<div class='grid-canvas' />").appendTo($viewport);
if (!options.explicitInitialization) {
finishInitialization();
@@ -273,6 +274,8 @@ if (typeof Slick === "undefined") {
$headerScroller
.bind("contextmenu.slickgrid", handleHeaderContextMenu)
.bind("click.slickgrid", handleHeaderClick);
+ $focusSink
+ .bind("keydown.slickgrid", handleKeyDown);
$canvas
.bind("keydown.slickgrid", handleKeyDown)
.bind("click.slickgrid", handleClick)
@@ -1809,6 +1812,10 @@ if (typeof Slick === "undefined") {
}
function handleClick(e) {
+ if (!currentEditor) {
+ setFocus();
+ }
+
var cell = getCellFromEvent(e);
if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
return;
@@ -1950,13 +1957,7 @@ if (typeof Slick === "undefined") {
}
function setFocus() {
- // IE tries to scroll the viewport so that the item being focused is aligned to the left border
- // IE-specific .setActive() sets the focus, but doesn't scroll
- if ($.browser.msie) {
- $canvas[0].setActive();
- } else {
- $canvas[0].focus();
- }
+ $focusSink[0].focus();
}
function scrollActiveCellIntoView() {
@@ -2449,6 +2450,7 @@ if (typeof Slick === "undefined") {
if (!getEditorLock().commitCurrentEdit()) {
return;
}
+ setFocus();
var stepFunctions = {
"up": gotoUp,
@@ -2771,6 +2773,7 @@ if (typeof Slick === "undefined") {
"updateRowCount": updateRowCount,
"scrollRowIntoView": scrollRowIntoView,
"getCanvasNode": getCanvasNode,
+ "focus": setFocus,
"getCellFromPoint": getCellFromPoint,
"getCellFromEvent": getCellFromEvent,

1 comment on commit 505c908

@eliprodigy

thank you fix my dialog scrolling with slickGrid inside....

Please sign in to comment.