@refinitiv-ui/efx-grid 6.0.99 → 6.0.100

package/lib/rt-grid/es6/ColumnDefinition.d.ts

@@ -43,7 +43,8 @@ declare namespace ColumnDefinition {
         stationary?: boolean|null,
         leftPinned?: boolean|null,
         rightPinned?: boolean|null,
-        info?: any
+        info?: any,
+        focusable: boolean
     };
 
 }
@@ -158,6 +159,8 @@ declare class ColumnDefinition {
 
     public getColumnInfo(): any;
 
+    public isFocusable(): boolean;
+
 }
 
 declare const COL_DEF: string;

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

@@ -50,6 +50,7 @@ import Engine from "../../tr-grid-util/es6/formula/Engine.js";
 * @property {boolean=} leftPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the left side
 * @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
 */
 
 /** mapping of field type to javascript type
@@ -258,6 +259,10 @@ ColumnDefinition.prototype._info = null;
 * @private
 */
 ColumnDefinition.prototype._coreColDef = null;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._focusable = false;
 //#endregion Private Members
 
 
@@ -402,6 +407,11 @@ ColumnDefinition.prototype.initialize = function(columnOption) {
 		this._sortable = val ? true : false;
 	}
 
+	val = columnOption["focusable"];
+	if(val != null) {
+		this._focusable = val ? true : false;
+	}
+
 	val = columnOption["className"] || columnOption["class"];
 	if(typeof val === "string") {
 		this._classes = val.split(" ");
@@ -785,6 +795,10 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 		obj["autoGenerated"] = this._autoGenerated;
 	}
 
+	if(this._focusable) {
+		obj["focusable"] = true;
+	}
+
 	let core = this._eventArg["core"];
 	let grid = this._eventArg["grid"];
 	let colIndex = grid.getColumnIndex(this);
@@ -1149,6 +1163,12 @@ ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
 	this._coreColDef = obj || null;
 };
 
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isFocusable = function() {
+	return this._focusable;
+};
 
 export {ColumnDefinition, COL_DEF};
 export default ColumnDefinition;

package/lib/rt-grid/es6/Grid.d.ts

@@ -250,6 +250,8 @@ declare class Grid extends EventDispatcher {
 
     public setRicData(ric: string, values: any): void;
 
+    public getAllRics(): (string)[]|null;
+
     public setRowData(rowRef: Grid.RowReference|null, values: any): void;
 
     public setStaticRowData(rowRef: Grid.RowReference|null, values: any): void;

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

@@ -343,6 +343,11 @@ let Grid = function(placeholder, config) {
 	t._snapshotFillerDataChanged = t._snapshotFillerDataChanged.bind(t);
 	t._onPollingInterval = t._onPollingInterval.bind(t);
 
+	t._onKeyDown = t._onKeyDown.bind(t);
+	t._requestScroll = t._requestScroll.bind(t);
+	t._onVScroll = t._onVScroll.bind(t);
+	t._selfScrollToRow = t._selfScrollToRow.bind(t);
+
 	t._streamingConflator = new Conflator(50, t._updateStreamingData);
 	t._formulaConflator = new Conflator(300, t._onFormulaDataChanged);
 	t._chainConflator = new Conflator(100, t._addMemberOfChain);
@@ -422,6 +427,10 @@ 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.getVScrollbar().listen("scroll", t._onVScroll);
+	t._hiddenInput = t._grid.getHiddenInput();
 
 	t._grid.enableRowHighlighting(true);
 
@@ -607,7 +616,14 @@ Grid.prototype._childDataField = "";
 * @private
 */
 Grid.prototype._topSection = true;
-
+/** @type {Object}
+* @private
+*/
+Grid.prototype._focusingArgs = null;
+/** @type {number}
+* @private
+*/
+Grid.prototype._scrolledRow = -1;
 /** @public
 */
 Grid.prototype.dispose = function() {
@@ -640,6 +656,11 @@ Grid.prototype.dispose = function() {
 		this._subs["dispose"]();
 		this._subs = null;
 	}
+
+	if(this._focusingArgs && this._focusingArgs.id) {
+		clearTimeout(this._focusingArgs.id);
+		this._focusingArgs = null;
+	}
 };
 /** @public
 * @return {Element}
@@ -3067,6 +3088,13 @@ Grid.prototype.setRicData = function(ric, values) {
 		}
 	}
 };
+/** Retrieve all RIC subscriptions. This method is not dependent on the number of rows, the RIC can vary from the current row in the grid.
+* @public
+* @return {Array.<string>}
+*/
+Grid.prototype.getAllRics = function() {
+	return this._connector.getAllRics();
+};
 /** A shorthand to set row data based on index of the specified row. It is better to keep rowDefinition object for updating data directly as row index can be changed by sorting and filtering.
 * @public
 * @param {Grid~RowReference} rowRef
@@ -4132,5 +4160,198 @@ Grid.prototype.getVScrollView = function () {
 	return this._grid.getVScrollView();
 };
 
+/** @private
+* @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;
+}
+/** @private
+* @param {Object} cell
+* @return {boolean}
+*/
+function focusCell(cell) {
+	if(cell) {
+		let cellContent = cell.getContent();
+		if(cellContent && isValidInput(cellContent)) {
+			cellContent.focus();
+			return true;
+		}
+	}
+	return false;
+}
+/** @private
+*/
+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);
+		}
+	}
+};
+/** @private
+*/
+Grid.prototype._selfScrollToRow = function() {
+	let args = this._focusingArgs;
+	if(!args) { return; }
+	args.id = 0;
+	this.scrollToRow(args.rowIndex);
+};
+/** @private
+* @param {Object} e
+* @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
+	};
+
+	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
+*/
+Grid.prototype._findNextFocusableCell = function(e, colIndex, rowIndex, focusableColIndices, content) {
+	let startIdx = focusableColIndices.indexOf(colIndex);
+
+	// 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 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++) {
+			let c = focusableColIndices[i];
+			if(r > bottomRowIndex) {
+				this._requestScroll(e, c, r, focusableColIndices, section);
+				return;
+			} else {
+				let cell = section.getCell(c, r);
+				if(focusCell(cell)) {
+					e.preventDefault();
+					return;
+				}
+			}
+		}
+		startIdx = 0;
+	}
+};
+/** @private
+* @param {Object} e
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {Array} focusableColIndices
+* @param {Element=} content
+*/
+Grid.prototype._findPrevFocusableCell = function(e, colIndex, rowIndex, focusableColIndices, content) {
+	let startIdx = focusableColIndices.indexOf(colIndex);
+	let len = focusableColIndices.length;
+
+	// 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 grid = this._grid;
+	let section = grid.getSection("content");
+	let viewInfo = grid.getVerticalViewInfo();
+	let topRowIndex = viewInfo.topRowIndex;
+	for(let r = rowIndex; r >= 0; r--) {
+		for(let i = startIdx; i >= 0; i--) {
+			let c = focusableColIndices[i];
+			if(r < topRowIndex) {
+				this._requestScroll(e, c, r, focusableColIndices, section);
+				return;
+			} else {
+				let cell = section.getCell(c, r);
+				if(focusCell(cell)) {
+					e.preventDefault();
+					return;
+				}
+			}
+		}
+		startIdx = len - 1;
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onKeyDown = function(e) {
+	if (e.keyCode !== 9 || e.ctrlKey || e.altKey || e.metaKey) {
+		return;
+	}
+
+	// Find next focusable cell
+	let colDefs = this.getColumnDefinitions();
+	let colCount = colDefs.length;
+
+	let focusableColIndices = [];
+	for(let c = 0; c < colCount; c++) {
+		if(colDefs[c].isFocusable()) {
+			focusableColIndices.push(c);
+		}
+	}
+
+	if(!focusableColIndices.length) {
+		return;
+	}
+
+	this._scrolledRow = -1; // Reset the scroll loop protector
+	let pos = this.getRelativePosition(e);
+	let content = pos["cell"] ? pos["cell"].getContent() : null;
+
+	if(e.shiftKey) {
+		this._findPrevFocusableCell(e, pos["colIndex"], pos["rowIndex"], focusableColIndices, content);
+	} else {
+		this._findNextFocusableCell(e, pos["colIndex"], pos["rowIndex"], focusableColIndices, content);
+	}
+};
+
 export { Grid };
 export default Grid;

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.d.ts

@@ -31,7 +31,9 @@ declare namespace InCellEditingPlugin {
         rowEditorClosed?: ((...params: any[]) => any)|null,
         autoSuggest?: Element|null,
         closingOnScroll?: boolean|null,
-        autoHiding?: boolean|null
+        autoHiding?: boolean|null,
+        readonly?: boolean|null,
+        starterText?: (string|boolean)|null
     };
 
     type Cache = {
@@ -81,6 +83,8 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public disableDblClick(opt_disabled?: boolean|null): void;
 
+    public showStarterText(bool?: boolean|null): void;
+
     public isEditing(): boolean;
 
     public getTextBox(columnIndex?: number|null, grid?: any): Element|null;
@@ -99,6 +103,10 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public isColumnEditable(colIndex: number): boolean;
 
+    public enableReadonly(bool: boolean): void;
+
+    public disableReadonly(bool: boolean): void;
+
     public openRowEditor(rowIndex: number, grid?: any): void;
 
     public closeRowEditor(isCommit?: boolean|null): void;

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -31,6 +31,8 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @property {Element=} autoSuggest=null Element of ef-autosuggest or atlas-autosuggest for handled with input cell
 * @property {boolean=} closingOnScroll=true If disabled, the editor will not be automatically closed when scrolling grid.
 * @property {boolean=} autoHiding=true If disabled, the editor will not be automatically closed when losing its focus.
+* @property {boolean=} readonly=false If disabled, the editor will not be able to open, this property overwrite `editableContent` and `editableTitle`
+* @property {(string|boolean)=} starterText=false if enable it, it will be show placeholder when no ric in grid, given string to overwrite wording
 */
 
 /** @typedef {Object} InCellEditingPlugin~Cache
@@ -171,6 +173,8 @@ let InCellEditingPlugin = function (options) {
 	t._onMultiSelectionValueChanged = t._onMultiSelectionValueChanged.bind(t);
 	t._onMultiSelectionEditorChanged = t._onMultiSelectionEditorChanged.bind(t);
 	t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
+	t._firstRendered = t._firstRendered.bind(t);
+	t._onGridKeyDown = t._onGridKeyDown.bind(t);
 	t._hosts = [];
 
 	if(options) {
@@ -341,10 +345,26 @@ InCellEditingPlugin.prototype._closingOnScroll = true;
 * @private
 */
 InCellEditingPlugin.prototype._autoHiding = true;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._readonly = false;
+/** @type {string}
+* @private
+*/
+InCellEditingPlugin.prototype._starterText = "";
+/** @type {Object}
+* @private
+*/
+InCellEditingPlugin.prototype._starterTextPopup = null;
 /** @type {number}
 * @private
 */
 InCellEditingPlugin.prototype._editorTimerId = 0;
+/** @type {Object}
+* @private
+*/
+InCellEditingPlugin.prototype._rowSelectionPlugin = null;
 /** @type {boolean}
 * @private
 */
@@ -369,6 +389,11 @@ InCellEditingPlugin._styles = prettifyCss([
 	],
 	":host .cell.editing",	[
 		"z-index: 2;"
+	],
+	":host .starter-text", [
+		"padding: var(--grid-cell-padding,0 8px 0 8px);",
+		"pointer-events: none;",
+		"line-height: 28px" // WARNING: hardcode, it can be calculate with row height
 	]
 ]);
 
@@ -551,6 +576,9 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
 	}
 
 	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("firstRendered", this._firstRendered);
+	host.listen("keydown", this._onGridKeyDown);
+
 	host.getVScrollbar().listen("scroll", this._onScroll);
 	host.getHScrollbar().listen("scroll", this._onScroll);
 
@@ -604,6 +632,14 @@ InCellEditingPlugin.prototype._afterInit = function () {
 	this._elfVersion = ElfUtil.getElfVersion();
 };
 
+/** @private
+*/
+InCellEditingPlugin.prototype._firstRendered = function () {
+	if(!this._readonly && this._starterText) {
+		this.showStarterText();
+	}
+};
+
 /** @public
 * @param {Object=} options
 */
@@ -679,6 +715,16 @@ InCellEditingPlugin.prototype.config = function(options) {
 	if(pluginOption["autoHiding"] == false) {
 		t._autoHiding = false;
 	}
+	if(pluginOption["readonly"] == true) {
+		t._readonly = true;
+	}
+	if(pluginOption["starterText"] !== null) {
+		if(typeof pluginOption["starterText"] === "string") {
+			t._starterText = pluginOption["starterText"];
+		} else {
+			t._starterText = pluginOption["starterText"] ? "Type to add" : false;
+		}
+	}
 
 	// event callback
 	t.addListener(pluginOption, "preEditorOpening");
@@ -773,6 +819,15 @@ InCellEditingPlugin.prototype.getConfigObject = function (out_obj) {
 	dirty |= _setBooleanOption(extOptions, "uiBlocking", this._uiBlocking, false);
 	dirty |= _setBooleanOption(extOptions, "closingOnScroll", this._closingOnScroll, true);
 	dirty |= _setBooleanOption(extOptions, "autoHiding", this._autoHiding, true);
+	dirty |= _setBooleanOption(extOptions, "readonly", this._readonly, false);
+
+	if(this._starterText) {
+		if(this._starterText === "Type to add") {
+			extOptions["starterText"] = true;
+		} else {
+			extOptions["starterText"] = this._starterText;
+		}
+	}
 
 	if(this._contentSource !== "textContent") {
 		dirty = 1;
@@ -831,6 +886,9 @@ InCellEditingPlugin.prototype.unload = function (host) {
 		window.removeEventListener("scroll", this._onScroll);
 	}
 
+	if(this._starterTextPopup) {
+		this._starterTextPopup.dispose();
+	}
 	this._dispose();
 };
 
@@ -848,6 +906,9 @@ InCellEditingPlugin.prototype.openEditor = function (colIndex, rowIndex, section
 			return;
 		}
 	}
+	if(this._readonly) {
+		return;
+	}
 
 	let sectionSettings = grid.getSectionSettings(sectionRef || "content");
 	let activePos = this._activePos;
@@ -937,6 +998,114 @@ InCellEditingPlugin.prototype.disableDblClick = function (opt_disabled) {
 	}
 };
 
+/** @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onGridKeyDown = function (e) {
+	if (e.key.length !== 1) { // Special character
+		return;
+	}
+	if(this._starterText && this._starterTextPopup.isShown()) {
+		let rsp = this._getPlugin("RowSelectionPlugin");
+		if(rsp && rsp.getSelectedRowCount() > 0) {
+			return;
+		}
+		let grid = this._hosts[0];
+		grid.scrollToRow("content", 0, true);
+		if(!this.isEditing()) {
+			let firstEditableCol = this._getFirstEditableColumnIndex();
+			if(firstEditableCol === 0) {
+				return;
+			}
+			let cell = grid.getCell("content", firstEditableCol, 0);
+			this._openEditor(cell, grid);
+		}
+	}
+};
+
+/**
+* @description Show starter text when the grid is no ric
+* @public
+* @param {boolean=} bool
+*/
+InCellEditingPlugin.prototype.showStarterText = function (bool) {
+	setTimeout(this._showStarterText.bind(this, bool), 0); // Need to delay to wait scrollbar or editor closed
+};
+
+
+/**
+* @private
+* @param {boolean=} bool
+*/
+InCellEditingPlugin.prototype._showStarterText = function (bool) {
+	if(!this._realTimeGrid || !this._starterText) {
+		return;
+	}
+	let allRics = this._realTimeGrid.getAllRics();
+	if(allRics.length > 0) {
+		return;
+	}
+	let popupElem;
+	if(!this._starterTextPopup) {
+		popupElem = this._starterTextPopup = this._createStaterTextElement();
+	} else {
+		popupElem = this._starterTextPopup;
+	}
+	if(bool === false) {
+		popupElem.hide();
+		return;
+	}
+	let grid = this._hosts[0];
+
+	let editableColIndex = this._getFirstEditableColumnIndex();
+	if(editableColIndex < 0) { // not editable
+		return;
+	}
+	grid.scrollToRow("content", 0, true);
+	let editableCell = grid.getCell("content", editableColIndex, 0);
+	popupElem.attachTo(editableCell.getElement());
+	popupElem.show(bool, grid.getElement().parentElement);
+};
+
+/** @private
+* @return {number}
+*/
+InCellEditingPlugin.prototype._getFirstEditableColumnIndex = function () {
+	if(this._readonly || !this._editableContent) {
+		return -1;
+	}
+
+	let colCount = this.getColumnCount();
+	for (let i = 0; i < colCount; i++) {
+		let editableCol = this.isColumnEditable(i);
+		if(editableCol) {
+			return i;
+		}
+	}
+	return -1;
+};
+
+/** @private
+* @return {Object}
+*/
+InCellEditingPlugin.prototype._createStaterTextElement = function () {
+	let container = document.createElement("div");
+	container.textContent = this._starterText;
+	container.className = "starter-text";
+	let popup = new Popup(container, { positioning: "over"});
+	popup.disableAutoHiding(true);
+	popup.disableHideOnScroll(true);
+	return popup;
+};
+
+/** @public
+ * @description This is for testing purpose to compare element
+ * @ignore
+* @return {Object}
+*/
+InCellEditingPlugin.prototype.getStarterTextelement = function () {
+	return this._starterTextPopup;
+};
 /** Checking Editing is in process.
 * @public
 * @return {boolean}
@@ -1090,9 +1259,27 @@ InCellEditingPlugin.prototype.enableAutoCommitText = function (opt_enable) {
 * @return {boolean}
 */
 InCellEditingPlugin.prototype.isColumnEditable = function (colIndex) {
+	if(this._readonly) {
+		return false;
+	}
 	let val = this._getColumnOption(colIndex, "editableContent");
 	return val == null ? this._editableContent : val;
 };
+
+/**
+* @public
+* @param {boolean} bool
+*/
+InCellEditingPlugin.prototype.enableReadonly = function (bool) {
+	this._readonly = bool !== false;
+};
+/**
+* @public
+* @param {boolean} bool
+*/
+InCellEditingPlugin.prototype.disableReadonly = function () {
+	this.enableReadonly(false);
+};
 /** @public
 * @description Supply an keyboard input. This is for testing purpose.
 * @ignore
@@ -1105,6 +1292,16 @@ InCellEditingPlugin.prototype.supplyKey = function(keyName, context) {
 	this._onTextKeyUp(eventObj);
 };
 /** @public
+* @description Supply an keyboard input. This is for testing purpose.
+* @ignore
+* @param {string} keyName
+* @param {Object=} context
+*/
+InCellEditingPlugin.prototype.supplyGridKeydown = function(keyName, context) {
+	let eventObj = this._mockKeyboardEvent(keyName, context);
+	this._onGridKeyDown(eventObj);
+};
+/** @public
 * @description Supply an double click event. This is for testing purpose.
 * @ignore
 * @param {number} colIndex
@@ -1122,6 +1319,9 @@ InCellEditingPlugin.prototype.mockDoubleClick = function(colIndex, rowIndex, con
 */
 InCellEditingPlugin.prototype._onDoubleClick = function (e, opt_host) {
 	let t = this;
+	if(t._readonly) {
+		return;
+	}
 	let host = opt_host || t.getRelativeGrid(e);
 	if(t.isEditing() || !host) { return; }
 
@@ -1318,6 +1518,7 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
 
 	// Dispatch an event for user to setup stuff
 	t._dispatch("editorOpened", arg); // User may modify the editor
+	t.showStarterText(false);
 
 	inputElement.focus();
 	if(typeof inputElement.select === "function") {
@@ -1337,7 +1538,7 @@ InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
 	let t = this;
 	grid = grid || t._hosts[0];
 	// if open same row we will do nothing
-	if(t._getRowIndex(t._activeRowId) === rowIndex || !grid) { return; }
+	if(t._getRowIndex(t._activeRowId) === rowIndex || !grid || t._readonly) { return; }
 
 	// close all open editor
 	t.closeRowEditor(false, grid);
@@ -1835,6 +2036,7 @@ InCellEditingPlugin.prototype._commitText = function (committed, suggestionDetai
 	Dom.removeParent(t._customElement);
 
 	let grid = arg["grid"];
+	this.showStarterText();
 	if(grid) {
 		t._freezeScrolling(grid, false);
 		grid.focus();