@refinitiv-ui/efx-grid 6.0.107 → 6.0.109

package/lib/rt-grid/es6/Grid.js

@@ -321,7 +321,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);
@@ -404,10 +404,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);
 
@@ -634,8 +633,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;
 	}
 };
@@ -4123,16 +4124,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
@@ -4141,7 +4137,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;
 		}
@@ -4152,18 +4148,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);
+			}
 		}
 	}
 };
@@ -4171,89 +4164,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;
@@ -4261,32 +4273,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;
 
@@ -4302,13 +4315,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);
 	}
 };