@refinitiv-ui/efx-grid 6.0.108 → 6.0.110

package/lib/rt-grid/dist/rt-grid.js

@@ -14857,6 +14857,7 @@ PredefinedFormula.remove = function(field) {
 * @property {boolean=} rightPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the right side
 * @property {Object=} info=null For storing any additional information to the column
 * @property {boolean=} focusable=false If enabled, the column will be used to find focusable element when pressing tab key
+* @property {string=} backgroundColor CSS color value
 */
 
 /** mapping of field type to javascript type
@@ -15975,6 +15976,24 @@ ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
 ColumnDefinition.prototype.isFocusable = function() {
 	return this._focusable;
 };
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getBackgroundColor = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return core.getColumnBackgroundColor(colIndex);
+};
+/** @public
+* @param {string} color
+*/
+ColumnDefinition.prototype.setBackgroundColor = function(color) {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	core.setColumnBackgroundColor(colIndex, color);
+};
 
 
 /* harmony default export */ var js_ColumnDefinition = (ColumnDefinition);
@@ -16915,9 +16934,9 @@ GroupDefinitions.prototype.setGroup = function (groupId, groupDef) {
 		if(curDef) { // Replace
 			this.removeAllChildren(groupId);
 		}
-		let parentDef = this._childToParent[groupId];
-		if(parentDef) {
-			newDef.parentId = parentDef.id;
+		let parentId = this._childToParent[groupId];
+		if(parentId) {
+			newDef.parentId = parentId;
 		}
 		this._groupMap[groupId] = newDef;
 
@@ -23251,7 +23270,7 @@ Scrollbar.prototype._clearAllPanes = function() {
 */
 Scrollbar.prototype.disableKeyboardInput = function (opt_disabled) {
 	if(opt_disabled === false) {
-		this._element.setAttribute("tabindex", "0");
+		this._element.setAttribute("tabindex", "-1"); // tabindex makes the element focusable. The negative value exclude it from tab key navigation
 		this._element.addEventListener("keydown", this._onKeyDown, false);
 	} else {
 		this._element.removeAttribute("tabindex");
@@ -35706,6 +35725,9 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 /** @event Core#preForcedUpdate
 * @ignore
 */
+/** @event Core#tabNavigation
+* @ignore
+*/
 //#endregion Events
 
 /** @private
@@ -35716,6 +35738,44 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 let ascNumberSorter = function (a, b) {
 	return a - b;
 };
+/** @private
+* @return {!Element}
+*/
+let _createHiddenInput = function () {
+	let hiddenInput = document.createElement("input");
+	let styleObj = hiddenInput.style;
+	styleObj.position = "absolute";
+	styleObj.width = styleObj.height = styleObj.padding = styleObj.border = "0";
+	hiddenInput.value = "0";
+	return hiddenInput;
+};
+/** @private
+* @param {Object} e
+* @return {boolean}
+*/
+let _isTabCommand = function (e) {
+	if(e.keyCode === 9) {
+		return !e.ctrlKey && !e.altKey && !e.metaKey;
+	}
+	return false;
+};
+/** @private
+* @param {Element} elem
+* @return {Element}
+*/
+let _getActiveElement = function (elem) {
+	if(elem) {
+		if(elem.getRootNode) {
+			let rootNode = elem.getRootNode(); // Get uncomposed root node
+			if(rootNode && rootNode !== elem) { // The root node could be the element itself, if it is not attached to the DOM tree
+				return rootNode.activeElement || null;
+			}
+		} else { // Older browser does not support getRootNode
+			return document.activeElement;
+		}
+	}
+	return null;
+};
 
 /** @constructor
 * @param {Element=} opt_initializer this can be either element id (string) or DOM element.
@@ -35739,6 +35799,7 @@ let Core = function (opt_initializer) {
 	_t._onMouseMove = _t._onMouseMove.bind(_t);
 	_t._onRowHightlighted = _t._onRowHightlighted.bind(_t);
 	_t._onGridClicked = _t._onGridClicked.bind(_t);
+	_t._onKeyDown = _t._onKeyDown.bind(_t);
 
 	_t._onWindowResize = _t._onWindowResize.bind(_t);
 	_t._onSectionDataChanged = _t._onSectionDataChanged.bind(_t);
@@ -35759,7 +35820,7 @@ let Core = function (opt_initializer) {
 	_t._onColInViewChanged =  _t._onColInViewChanged.bind(_t);
 
 	_t._updateVScrollbar = _t._updateVScrollbar.bind(_t);
-	_t._updateColumnBounds = _t._updateColumnBounds.bind(_t);
+	_t.updateColumnBounds = _t.updateColumnBounds.bind(_t);
 	_t._dispatchColumnPositionChanged = _t._dispatchColumnPositionChanged.bind(_t);
 	_t._dispatchRowPositionChanged = _t._dispatchRowPositionChanged.bind(_t);
 	_t._requestScrollbarUpdate = _t._requestScrollbarUpdate.bind(_t);
@@ -35800,7 +35861,7 @@ let Core = function (opt_initializer) {
 	// Initialize vertical scrollbar
 	_t._vscrollbar = new components_VScrollbar();
 	_t._vscrollbar.disable();
-	_t._vscrollbar.setParent(this.getParent() || this.getElement());
+	_t._vscrollbar.setParent(_t.getParent() || _t.getElement());
 
 	_t._vscrollbar.listen("scroll", _t._onVScroll);
 	_t._vscrollbar.listen("layoutChanged", _t._onVScroll);
@@ -35813,25 +35874,27 @@ let Core = function (opt_initializer) {
 	// Initialize horizontal scrollbars
 	_t._hscrollbar = new components_HScrollbar();
 	_t._hscrollbar.disable();
-	_t._hscrollbar.setParent(this.getParent() || this.getElement());
+	_t._hscrollbar.setParent(_t.getParent() || _t.getElement());
 
-	_t._hscrollbar.listen("scroll", this._onHScroll);
-	_t._hscrollbar.listen("layoutChanged", this._onHScroll);
-	_t._hscrollbar.listen("activated", this.updateLayout);
-	_t._hscrollbar.listen("deactivated", this.updateLayout);
+	_t._hscrollbar.listen("scroll", _t._onHScroll);
+	_t._hscrollbar.listen("layoutChanged", _t._onHScroll);
+	_t._hscrollbar.listen("activated", _t.updateLayout);
+	_t._hscrollbar.listen("deactivated", _t.updateLayout);
 
 	// cross-reference scrollbars
 	_t._hscrollbar.setOtherScrollbar(_t._vscrollbar);
 	_t._vscrollbar.setOtherScrollbar(_t._hscrollbar);
 
+
+	_t._element.addEventListener("keydown", _t._onKeyDown);
 	if (util.isMobile || util.isTouchDevice) {
-		_t._element.addEventListener("touchmove", this._onMouseMove, false);
+		_t._element.addEventListener("touchmove", _t._onMouseMove, false);
 	} else {
-		_t._element.addEventListener("mousemove", this._onMouseMove, false);
+		_t._element.addEventListener("mousemove", _t._onMouseMove, false);
 	}
 
 	if(util.isSafari){
-		_t._element.addEventListener("click", this._onGridClicked);
+		_t._element.addEventListener("click", _t._onGridClicked);
 	}
 
 	window.addEventListener("resize", _t._onWindowResize, false); // Should be unlistened after destroyed
@@ -35839,10 +35902,17 @@ let Core = function (opt_initializer) {
 	_t._colVirtualizer.listen("indexChanged", _t._onColInViewChanged);
 	_t._rowHeightConflator = new util_Conflator(_t._onRowHeightChanged, 50);
 	_t._vScrollbarConflator = new util_Conflator(_t._updateVScrollbar, 200);
-	_t._columnBoundConflator = new util_Conflator(_t._updateColumnBounds, 10);
+	_t._columnBoundConflator = new util_Conflator(_t.updateColumnBounds, 10);
 	_t._columnPositionConflator = new util_Conflator(_t._dispatchColumnPositionChanged, 10);
 	_t._rowPositionConflator = new util_Conflator(_t._dispatchRowPositionChanged, 10);
 
+	_t._firstHiddenInput = _createHiddenInput();
+	_t._firstHiddenInput.className = "first-input";
+	_t._lastHiddenInput = _createHiddenInput();
+	_t._lastHiddenInput.className = "last-input";
+	_t._element.insertBefore(_t._firstHiddenInput, _t._element.firstChild);
+	_t._element.appendChild(_t._lastHiddenInput);
+
 	// Initialize events for external users
 	_t._addEvents(
 		"sectionAdded",
@@ -35871,7 +35941,8 @@ let Core = function (opt_initializer) {
 		"beforeColumnBoundUpdate",
 		"beforeBatchOperation",
 		"afterBatchOperation",
-		"pinningChanged"
+		"pinningChanged",
+		"tabNavigation"
 	);
 
 	// For debugging in advanced optimization mode
@@ -35880,9 +35951,9 @@ let Core = function (opt_initializer) {
 		map = {};
 		Core["map"] = map;
 	}
-	let elem = _t._element;
-	elem["_control"] = _t;
-	let id = elem.id || elem.name;
+
+	_t._element["_control"] = _t;
+	let id = _t._element.id || _t._element.name;
 	if(!id || map[id]) {
 		id = "_grid" + Core._runningGridId;
 	}
@@ -35890,17 +35961,6 @@ let Core = function (opt_initializer) {
 	map[id] = _t;
 	Core._runningGridId++;
 
-	// init hiddenInput for retrieve copy and cut event
-	let hiddenInput = document.createElement("input");
-	hiddenInput.style.position = "absolute";
-	hiddenInput.style.width = "0";
-	hiddenInput.style.height = "0";
-	hiddenInput.style.padding = "0";
-	hiddenInput.style.border = "0";
-	hiddenInput.value = "0";
-	_t._hiddenInput = hiddenInput;
-	elem.insertBefore(hiddenInput, elem.firstChild);
-
 	// Ensure all affected plugins are loaded prior zoom plugin
 	// use as entity to trigger updateLayout once zoom is changed
 	Object.defineProperty(_t, "zoomFactor", {
@@ -36180,11 +36240,16 @@ Core.prototype._rowRefreshTimer = 0;
 * @private
 */
 Core.prototype._layoutUpdating = false;
-/** A Hidden input that allow to get cut and copy event when user perform cut, copy activities
-* @type {Element}
+/** A hidden input that allows grid to receive keyboard input and focus
+* @type {!Element}
+* @private
+*/
+Core.prototype._firstHiddenInput;
+/** A hidden input that allows grid to receive keyboard input and focus
+* @type {!Element}
 * @private
 */
-Core.prototype._hiddenInput;
+Core.prototype._lastHiddenInput;
 /** @type {number}
 * @private
 */
@@ -36228,7 +36293,7 @@ Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.108";
+	return "5.1.112";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -36289,11 +36354,12 @@ Core.prototype.dispose = function () {
 
 	// Clean Top node
 	let elem = this._element;
-	if (elem !== null) {
+	if (elem) {
 		if (elem["_control"]) {
 			delete elem["_control"];
 		}
-		elem.removeChild(this._hiddenInput);
+		elem.removeChild(this._firstHiddenInput);
+		elem.removeChild(this._lastHiddenInput);
 	}
 	this._dispose();
 
@@ -36370,6 +36436,9 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		if (columnDef["rightPinned"]) {
 			column["rightPinned"] = columnDef["rightPinned"];
 		}
+		if (columnDef["backgroundColor"]) {
+			column["backgroundColor"] = columnDef["backgroundColor"];
+		}
 	}
 
 	// It will be overwrite in rt-grid or atlas-blotter
@@ -37458,7 +37527,7 @@ Core.prototype._moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 	return true;
 };
@@ -37658,6 +37727,10 @@ Core.prototype._deserializeColumn = function (index, jsonObj) {
 	if (value != null) {
 		colDef["rightPinned"] = value ? true : false;
 	}
+	value = jsonObj["backgroundColor"];
+	if (value != null) {
+		this.setColumnBackgroundColor(index, value);
+	}
 
 	this.setColumnRenderingHandler(index, jsonObj["renderingHandler"]);
 	this.setColumnDataBindingHandler(index, jsonObj["dataBindingHandler"]);
@@ -37917,6 +37990,56 @@ Core.prototype.setColumnStyle = function (colIndex, style, value, opt_type) {
 	}
 };
 
+/** @public
+* @param {number} colIndex
+* @return {string}
+*/
+Core.prototype.getColumnBackgroundColor = function(colIndex) {
+	let colDef = this._getColumnDef(colIndex);
+	return colDef["backgroundColor"] || "";
+};
+/** @public
+* @param {number} colIndex
+* @param {string=} color
+*/
+Core.prototype.setColumnBackgroundColor = function(colIndex, color) {
+	if(colIndex == null || typeof colIndex !== "number") {
+		return;
+	}
+
+	let colDef = this._getColumnDef(colIndex);
+	if(colDef["backgroundColor"] === color) {
+		return;
+	}
+
+	colDef["backgroundColor"] = color;
+	color = color != null ? color : "";
+
+	let sectionCount = this._settings.length;
+	for(let i = 0; i < sectionCount; ++i) {
+		let settings = this._settings[i];
+		let section = settings.getSection();
+		if(!section) {
+			continue;
+		}
+
+		if(settings.getType() !== "content") {
+			let rowCount = section.getRowCount();
+			for(let r = 0; r < rowCount; r++) {
+				let cellSpan = section.getCellColSpan(colIndex, r);
+				if(cellSpan > 1) { continue; }
+				let cell = section.getCell(colIndex, r);
+				if(cell) {
+					cell.setStyle("backgroundColor", color);
+				}
+			}
+		} else {
+			let column = section.getColumn(colIndex);
+			column.setStyle("backgroundColor", color);
+		}
+	}
+};
+
 /** @public
 * @param {number} colIndex
 * @param {string} clsName
@@ -39691,15 +39814,14 @@ Core.prototype.reserveRightSpace = function (size) {
 	return false;
 };
 
-/** Get hidden input in grid <br>
-* this input for make grid can copy <br>
-* normal user should not touch it <br>
-* but sometime grid extension will have to use this element
+/** Get the hidden input. This input allows grid to receive keyboard input
 * @public
-* @return {Element}
+* @ignore
+* @param {boolean} firstInput
+* @return {!Element}
 */
-Core.prototype.getHiddenInput = function () {
-	return this._hiddenInput;
+Core.prototype.getHiddenInput = function (firstInput) {
+	return firstInput ? this._firstHiddenInput : this._lastHiddenInput;
 };
 
 /** Focus grid element without bringing grid into window's view. This is useful when grid is very wide or tall, since window can be scrolled to focused element by default in some browsers.
@@ -39708,8 +39830,8 @@ Core.prototype.getHiddenInput = function () {
 * @see {@link http://help.dottoro.com/ljqmdirr.php}
 */
 Core.prototype.focus = function () {
-	let elem = this._hiddenInput;
-	let activeElem = document.activeElement;
+	let elem = this._lastHiddenInput;
+	let activeElem = _getActiveElement(elem);
 	if(elem && elem !== activeElem) {
 		let x = window.pageXOffset;
 		let y = window.pageYOffset;
@@ -39840,7 +39962,7 @@ Core.prototype.selectColumn = function (colIndex, selected) {
 	for (let i = this._settings.length; --i >= 0; ) {
 		this._settings[i].getSection().selectColumn(colIndex, selected);
 	}
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 };
 /** @public
 * @param {number} colIndex
@@ -39854,9 +39976,9 @@ Core.prototype.isSelectedColumn = function (colIndex) {
 	return false;
 };
 
-/** @private
+/** @public
 */
-Core.prototype._updateColumnBounds = function () {
+Core.prototype.updateColumnBounds = function () {
 	if(this._columnBoundConflator.conflate()) {
 		return;
 	}
@@ -40343,14 +40465,14 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 Core.prototype._putToLast = function(section) {
 	let sectionCount = this._settings.length;
 	if (sectionCount === 0) {
-		section.setParent(this._element, true);
+		section.insertBefore(this._lastHiddenInput);
 	} else {
 		let lastGrid = this.getLastSection();
 		let nextSibling = lastGrid.getElement().nextSibling;
 		if (nextSibling !== null) {
 			section.insertBefore(nextSibling);
 		} else {
-			section.setParent(this._element);
+			section.insertBefore(this._lastHiddenInput);
 		}
 	}
 };
@@ -40736,7 +40858,7 @@ Core.prototype._onVScroll = function (e) {
 Core.prototype._onHScroll = function (e) {
 	let scrollVal = this._hscrollbar.getScrollLeft();
 	this._colVirtualizer.setViewOffset(scrollVal); // Trigger virtualization event
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._dispatchColumnPositionChanged();
 };
 /** @private
@@ -41035,14 +41157,44 @@ Core.prototype._onMouseMove = function () {
 };
 /** @private */
 Core.prototype._onGridClicked = function () {
-	// research for dragging
 	let selection = window.getSelection();
-	if(selection.toString()){
+	if(!selection.toString()){
+		if(!this._element.contains(_getActiveElement(this._element))){
+			this.focus();
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+Core.prototype._onKeyDown = function (e) {
+	if(!_isTabCommand(e)) {
 		return;
 	}
-	let activeElem = document.activeElement;
-	if(!this._element.contains(activeElem)){
-		this.focus();
+	let activeElement = _getActiveElement(this._element);
+	let onTheEdge = false;
+	if(this._firstHiddenInput === activeElement) {
+		onTheEdge = -1;
+	} else if(this._lastHiddenInput === activeElement) {
+		onTheEdge = 1;
+	}
+
+	this._dispatch("tabNavigation", {
+		"activeElement": activeElement,
+		"firstHiddenInput": this._firstHiddenInput,
+		"lastHiddenInput": this._lastHiddenInput,
+		"onTheEdge": onTheEdge,
+		"shiftKey": e.shiftKey,
+		"event": e
+	});
+
+	if(onTheEdge && !e.defaultPrevented) {
+		if(onTheEdge > 0 && e.shiftKey) {
+			this._firstHiddenInput.focus(); // jump to the top and move out of grid
+		} else if(onTheEdge < 0 && !e.shiftKey) {
+			this._lastHiddenInput.focus(); // skip to the end and move out of grid
+		}
 	}
 };
 
@@ -41225,6 +41377,7 @@ Core.prototype._onSectionCountChanged = function (opt_suppressLayout) {
 
 		// Reinsert sections
 		this._vscrollbar.setScrollContent(this, this._getAllSections(), this._startVScrollbarIndex);
+		this._element.appendChild(this._lastHiddenInput); // Ensure that the hidden input is always at the last position
 
 		if(!opt_suppressLayout) {
 			this._updateScrollbarHeight(true, true);
@@ -41242,7 +41395,7 @@ Core.prototype._onColumnCountChanged = function () {
 	let pinnedLeft = this._countPinnedLeftColumns();
 	let pinnedRight = this._countPinnedRightColumns();
 
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 
 	if (this._hScrollbarEnabled && pinnedLeft + pinnedRight < this.getColumnCount()) {
@@ -41538,7 +41691,7 @@ Core.prototype._syncLayoutToColumns = function (from, to, opt_forceDispatching)
 	// TODO: Check if "to" should be greater than or equal to first pinnied right index
 	let paneChanged = forceUpdate || (from < this.getHScrollStartIndex()) || (to > this.getFirstPinnedRightIndex());
 	this._updateScrollbarWidth(paneChanged, true /* contentChanged */);
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 	this._dispatchColumnPositionChanged();
 
@@ -44728,7 +44881,7 @@ let Grid = function(placeholder, config) {
 	t._snapshotFillerDataChanged = t._snapshotFillerDataChanged.bind(t);
 	t._onPollingInterval = t._onPollingInterval.bind(t);
 
-	t._onKeyDown = t._onKeyDown.bind(t);
+	t._onTabNavigation = t._onTabNavigation.bind(t);
 	t._requestScroll = t._requestScroll.bind(t);
 	t._onVScroll = t._onVScroll.bind(t);
 	t._selfScrollToRow = t._selfScrollToRow.bind(t);
@@ -44811,10 +44964,9 @@ let Grid = function(placeholder, config) {
 	t._grid.listen("postSectionDataBinding", t._onPostSectionDataBinding);
 	t._grid.listen("firstRendered", t._dispatch.bind(t, "firstRendered"));
 	t._grid.listen("afterContentBinding", t._dispatch.bind(t, "afterContentBinding"));
-	t._grid.listen("keydown", t._onKeyDown);
+	t._grid.listen("tabNavigation", t._onTabNavigation);
 
 	t._grid.getVScrollbar().listen("scroll", t._onVScroll);
-	t._hiddenInput = t._grid.getHiddenInput();
 
 	t._grid.enableRowHighlighting(true);
 
@@ -45041,8 +45193,10 @@ Grid.prototype.dispose = function() {
 		this._subs = null;
 	}
 
-	if(this._focusingArgs && this._focusingArgs.id) {
-		clearTimeout(this._focusingArgs.id);
+	if(this._focusingArgs) {
+		if(this._focusingArgs.id) {
+			clearTimeout(this._focusingArgs.id);
+		}
 		this._focusingArgs = null;
 	}
 };
@@ -46576,6 +46730,27 @@ Grid.prototype.setColumnName = function(colIndex, str) {
 };
 /** @public
 * @param {Grid~ColumnReference} colRef
+* @return {string}
+*/
+Grid.prototype.getColumnBackgroundColor = function(colRef) {
+	let colDef = this.getColumnDefinition(colRef);
+	if(colDef) {
+		return colDef.getBackgroundColor();
+	}
+	return "";
+};
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @param {string} color
+*/
+Grid.prototype.setColumnBackgroundColor = function(colRef, color) {
+	let colDef = this.getColumnDefinition(colRef);
+	if(colDef) {
+		colDef.setBackgroundColor(color);
+	}
+};
+/** @public
+* @param {Grid~ColumnReference} colRef
 * @param {Function=} func
 */
 Grid.prototype.setColumnRenderer = function(colRef, func) {
@@ -48530,16 +48705,11 @@ Grid.prototype.getVScrollView = function () {
 * @param {Element} el
 * @return {boolean}
 */
-function isValidInput(el) {
-	return el && el.tagName !== "SPAN" && !el.disabled;
-}
-/** @private
-* @param {Element} el
-* @param {Element} hiddenInput
-* @return {boolean}
-*/
-function isValidTarget(el, hiddenInput) {
-	return !el.classList.contains("valigner") && el !== hiddenInput;
+function isFocusableContent(el) {
+	if(el) {
+		return (el.tagName !== "SPAN" && !el.disabled);
+	}
+	return false;
 }
 /** @private
 * @param {Object} cell
@@ -48548,7 +48718,7 @@ function isValidTarget(el, hiddenInput) {
 function focusCell(cell) {
 	if(cell) {
 		let cellContent = cell.getContent();
-		if(cellContent && isValidInput(cellContent)) {
+		if(cellContent && isFocusableContent(cellContent)) {
 			cellContent.focus();
 			return true;
 		}
@@ -48559,18 +48729,15 @@ function focusCell(cell) {
 */
 Grid.prototype._onVScroll = function() {
 	let args = this._focusingArgs;
-	if(!args) { return; }
-
-	this._focusingArgs = null;
-	let event = args.event;
-	let cell = args.section.getCell(args.colIndex, args.rowIndex);
-	if(focusCell(cell)) {
-		event.preventDefault();
-	} else {
-		if(event.shiftKey) {
-			this._findPrevFocusableCell(event, args.colIndex, args.rowIndex, args.focusableColIndices);
-		} else {
-			this._findNextFocusableCell(event, args.colIndex, args.rowIndex, args.focusableColIndices);
+	if(args) {
+		this._focusingArgs = null;
+		let cell = this._grid.getCell("content", args.colIndex, args.rowIndex);
+		if(!focusCell(cell)) {
+			if(args.shiftKey) {
+				this._focusPrevCellContent(args);
+			} else {
+				this._focusNextCellContent(args);
+			}
 		}
 	}
 };
@@ -48578,89 +48745,108 @@ Grid.prototype._onVScroll = function() {
 */
 Grid.prototype._selfScrollToRow = function() {
 	let args = this._focusingArgs;
-	if(!args) { return; }
-	args.id = 0;
-	this.scrollToRow(args.rowIndex);
+	if(args) {
+		args.id = 0;
+		this.scrollToRow(args.rowIndex);
+	}
 };
 /** @private
-* @param {Object} e
+* @param {Object} args
 * @param {number} colIndex
 * @param {number} rowIndex
-* @param {Array} focusableColIndices
-* @param {Object} section
 */
-Grid.prototype._requestScroll = function(e, colIndex, rowIndex, focusableColIndices, section) {
-	let args = this._focusingArgs;
-	if(args) { return; }
-	if(this._scrolledRow === rowIndex) { return; } // Avoid infinite loop
-
-	this._scrolledRow = rowIndex;
-	args = this._focusingArgs = {
-		event: e,
-		colIndex: colIndex,
-		rowIndex: rowIndex,
-		focusableColIndices: focusableColIndices,
-		section: section
-	};
+Grid.prototype._requestScroll = function(args, colIndex, rowIndex) {
+	if(this._focusingArgs || this._scrolledRow === args.rowIndex) {
+		return; // Avoid infinite loop
+	}
 
+	this._scrolledRow = args.rowIndex;
+	this._focusingArgs = args;
+	args.colIndex = colIndex;
+	args.rowIndex = rowIndex;
+	args.event = null; // The event is invalid after the scroll
 	args.id = setTimeout(this._selfScrollToRow); // Avoid event loop protection
 };
 /** @private
-* @param {Object} e
-* @param {number} colIndex
-* @param {number} rowIndex
-* @param {Array} focusableColIndices
-* @param {Element=} content
+* @param {Object} args
 */
-Grid.prototype._findNextFocusableCell = function(e, colIndex, rowIndex, focusableColIndices, content) {
-	let startIdx = focusableColIndices.indexOf(colIndex);
+Grid.prototype._focusNextCellContent = function(args) {
+	let colIndex = args.colIndex;
+	let rowIndex = args.rowIndex;
+	if(rowIndex < 0 || rowIndex == null) {
+		return;
+	}
 
-	// Calculate starting row and column index
-	if(!isValidTarget(e.target, this._hiddenInput) || startIdx < 0) {
-		rowIndex = 0;
-		startIdx = 0;
-	} else if(isValidInput(content) && startIdx >= 0) {
+	let focusableColIndices = args.focusableColIndices;
+	let len = focusableColIndices.length;
+	let startIdx = 0;
+	let i;
+	if(colIndex >= 0) {
+		for(i = 1; i < len; i++) {
+			if(colIndex < focusableColIndices[i]) {
+				break;
+			}
+			startIdx = i;
+		}
+	}
+	// If the current focus is on a valid content, starts on the next cell
+	if(args.event && args.validContent) {
 		startIdx++;
 	}
+
 	let grid = this._grid;
 	let section = grid.getSection("content");
 	let viewInfo = grid.getVerticalViewInfo();
 	let bottomRowIndex = viewInfo.bottomRowIndex;
 	let rowCount = this.getRowCount();
 	for(let r = rowIndex; r < rowCount; r++) {
-		for(let i = startIdx; i < focusableColIndices.length; i++) {
+		for(i = startIdx; i < len; i++) {
 			let c = focusableColIndices[i];
 			if(r > bottomRowIndex) {
-				this._requestScroll(e, c, r, focusableColIndices, section);
+				this._requestScroll(args, c, r);
 				return;
 			} else {
 				let cell = section.getCell(c, r);
 				if(focusCell(cell)) {
-					e.preventDefault();
+					if(args.event) {
+						args.event.preventDefault();
+					}
 					return;
 				}
 			}
 		}
 		startIdx = 0;
 	}
+
+	if(args.validContent) { // The current focus on the last focusable content
+		this._grid.getHiddenInput().focus();
+	}
 };
 /** @private
-* @param {Object} e
-* @param {number} colIndex
-* @param {number} rowIndex
-* @param {Array} focusableColIndices
-* @param {Element=} content
+* @param {Object} args
 */
-Grid.prototype._findPrevFocusableCell = function(e, colIndex, rowIndex, focusableColIndices, content) {
-	let startIdx = focusableColIndices.indexOf(colIndex);
-	let len = focusableColIndices.length;
+Grid.prototype._focusPrevCellContent = function(args) {
+	let colIndex = args.colIndex;
+	let rowIndex = args.rowIndex;
+	if(rowIndex < 0 || rowIndex == null) {
+		return;
+	}
 
-	// Calculate starting row and column index
-	if(!isValidTarget(e.target, this._hiddenInput) || startIdx < 0) {
-		rowIndex = 0;
-		startIdx = 0;
-	} else if(isValidInput(content) && startIdx >= 0) {
-		startIdx--;
+	let focusableColIndices = args.focusableColIndices;
+	let len = focusableColIndices.length;
+	let startIdx = len - 1;
+	let i;
+	if(colIndex >= 0) {
+		for(i = len - 1; --i >= 0;) {
+			if(colIndex > focusableColIndices[i]) {
+				break;
+			}
+			startIdx = i;
+		}
+	}
+	// If the current focus is on a valid content, starts on the next cell
+	if(args.event && args.validContent) {
+		--startIdx;
 	}
 
 	let grid = this._grid;
@@ -48668,32 +48854,33 @@ Grid.prototype._findPrevFocusableCell = function(e, colIndex, rowIndex, focusabl
 	let viewInfo = grid.getVerticalViewInfo();
 	let topRowIndex = viewInfo.topRowIndex;
 	for(let r = rowIndex; r >= 0; r--) {
-		for(let i = startIdx; i >= 0; i--) {
+		for(i = startIdx; i >= 0; i--) {
 			let c = focusableColIndices[i];
 			if(r < topRowIndex) {
-				this._requestScroll(e, c, r, focusableColIndices, section);
+				this._requestScroll(args, c, r);
 				return;
 			} else {
 				let cell = section.getCell(c, r);
 				if(focusCell(cell)) {
-					e.preventDefault();
+					if(args.event) {
+						args.event.preventDefault();
+					}
 					return;
 				}
 			}
 		}
 		startIdx = len - 1;
 	}
+
+	if(args.validContent) { // The current focus on the last focusable content
+		this._grid.getHiddenInput(true).focus();
+	}
 };
 
 /** @private
 * @param {Object} e
 */
-Grid.prototype._onKeyDown = function(e) {
-	if (e.keyCode !== 9 || e.ctrlKey || e.altKey || e.metaKey) {
-		return;
-	}
-
-	// Find next focusable cell
+Grid.prototype._onTabNavigation = function(e) {
 	let colDefs = this.getColumnDefinitions();
 	let colCount = colDefs.length;
 
@@ -48709,13 +48896,36 @@ Grid.prototype._onKeyDown = function(e) {
 	}
 
 	this._scrolledRow = -1; // Reset the scroll loop protector
-	let pos = this.getRelativePosition(e);
-	let content = pos["cell"] ? pos["cell"].getContent() : null;
+	let keyEvt = e.event;
+	let pos = this.getRelativePosition(keyEvt);
+	let validContent = true;
+	let activeElement = e.activeElement;
+	if(activeElement) {
+		validContent = !activeElement.classList.contains("valigner");
+	}
+
+	if(validContent) {
+		let content = pos["cell"] ? pos["cell"].getContent() : null;
+		validContent = isFocusableContent(content);
+	}
+	let startingRowIndex = pos["rowIndex"];
+	if(e.onTheEdge) {
+		let viewInfo = this._grid.getVScrollView();
+		startingRowIndex = keyEvt.shiftKey ? viewInfo.lastFullRow : viewInfo.firstFullRow;
+	}
+	let args = {
+		event: keyEvt,
+		shiftKey: keyEvt.shiftKey,
+		colIndex: pos["colIndex"],
+		rowIndex: startingRowIndex,
+		focusableColIndices: focusableColIndices,
+		validContent: validContent
+	};
 
-	if(e.shiftKey) {
-		this._findPrevFocusableCell(e, pos["colIndex"], pos["rowIndex"], focusableColIndices, content);
+	if(keyEvt.shiftKey) {
+		this._focusPrevCellContent(args);
 	} else {
-		this._findNextFocusableCell(e, pos["colIndex"], pos["rowIndex"], focusableColIndices, content);
+		this._focusNextCellContent(args);
 	}
 };