@refinitiv-ui/efx-grid 6.0.96 → 6.0.98

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

@@ -154,29 +154,28 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @param {InCellEditingPlugin~Options=} options
 * @extends {GridPlugin}
 */
-var InCellEditingPlugin = function InCellEditingPlugin(options) {
-  var t = this;
-  t._onDoubleClick = t._onDoubleClick.bind(t);
-  t._onPopupHide = t._onPopupHide.bind(t);
-  t._onScroll = t._onScroll.bind(t);
-  t._onTextKeyDown = t._onTextKeyDown.bind(t);
-  t._onTextKeyUp = t._onTextKeyUp.bind(t);
-  t._onTouchStart = t._onTouchStart.bind(t);
-  t._onTouchEnd = t._onTouchEnd.bind(t);
-  t._onTouchTimer = t._onTouchTimer.bind(t);
-  t._createContentEditor = t._createContentEditor.bind(t);
-  t._createTitleEditor = t._createTitleEditor.bind(t);
-  t._onColumnAdded = t._onColumnAdded.bind(t);
-  t._onValueChanged = t._onValueChanged.bind(t);
-  t._onMultiSelectionValueChanged = t._onMultiSelectionValueChanged.bind(t);
-  t._onMultiSelectionEditorChanged = t._onMultiSelectionEditorChanged.bind(t);
-  t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
-  t._hosts = [];
-  if (options) {
-    this.config({
-      "inCellEditing": options
-    });
-  }
+let InCellEditingPlugin = function (options) {
+	let t = this;
+	t._onDoubleClick = t._onDoubleClick.bind(t);
+	t._onPopupHide = t._onPopupHide.bind(t);
+	t._onScroll = t._onScroll.bind(t);
+	t._onTextKeyDown = t._onTextKeyDown.bind(t);
+	t._onTextKeyUp = t._onTextKeyUp.bind(t);
+	t._onTouchStart = t._onTouchStart.bind(t);
+	t._onTouchEnd = t._onTouchEnd.bind(t);
+	t._onTouchTimer = t._onTouchTimer.bind(t);
+	t._createContentEditor = t._createContentEditor.bind(t);
+	t._createTitleEditor = t._createTitleEditor.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+	t._onValueChanged = t._onValueChanged.bind(t);
+	t._onMultiSelectionValueChanged = t._onMultiSelectionValueChanged.bind(t);
+	t._onMultiSelectionEditorChanged = t._onMultiSelectionEditorChanged.bind(t);
+	t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
+	t._hosts = [];
+
+	if(options) {
+		this.config({"inCellEditing": options});
+	}
 };
 Ext.inherits(InCellEditingPlugin, GridPlugin);
 
@@ -185,15 +184,15 @@ Ext.inherits(InCellEditingPlugin, GridPlugin);
 * @static
 */
 InCellEditingPlugin._uiElementTypesMap = {
-  "input": "input",
-  "text": "input",
-  "number": "ef-number-field",
-  "select": "ef-select",
-  "dropdown": "ef-select",
-  "date": "ef-datetime-picker",
-  "checkbox": "ef-checkbox",
-  "boolean": "ef-checkbox",
-  "combobox": "ef-combo-box"
+	"input": "input",
+	"text": "input",
+	"number": "ef-number-field",
+	"select": "ef-select",
+	"dropdown": "ef-select",
+	"date": "ef-datetime-picker",
+	"checkbox": "ef-checkbox",
+	"boolean": "ef-checkbox",
+	"combobox": "ef-combo-box"
 };
 
 /** @type {boolean}
@@ -351,6 +350,7 @@ InCellEditingPlugin.prototype._editorTimerId = 0;
 */
 InCellEditingPlugin._scrolling = false;
 
+
 /** @type {number}
 * @private
 */
@@ -363,13 +363,20 @@ InCellEditingPlugin._primaryColor = "";
 /** @type {string}
 * @private
 */
-InCellEditingPlugin._styles = prettifyCss([":host .cell.editing input[type=text]", ["border-style: solid;"], ":host .cell.editing", ["z-index: 2;"]]);
+InCellEditingPlugin._styles = prettifyCss([
+	":host .cell.editing input[type=text]",	[
+		"border-style: solid;"
+	],
+	":host .cell.editing",	[
+		"z-index: 2;"
+	]
+]);
 
 /** @private
 */
 InCellEditingPlugin._onThemeLoaded = function () {
-  var colors = ElfUtil.getColors();
-  InCellEditingPlugin._primaryColor = colors.primary;
+	let colors = ElfUtil.getColors();
+	InCellEditingPlugin._primaryColor = colors.primary;
 };
 
 /** @private
@@ -378,64 +385,71 @@ InCellEditingPlugin._onThemeLoaded = function () {
 * @return {Element} input element
 */
 InCellEditingPlugin.prototype._createInputElement = function (tag, attributes) {
-  var t = this;
-  var elem = document.createElement(tag);
-  for (var attribute in attributes) {
-    elem.setAttribute(attribute, attributes[attribute]);
-  }
-  var typeMap = InCellEditingPlugin._uiElementTypesMap;
-  // Resolve elf theme style
-  elem.style.width = "100%";
-  elem.style.height = "100%";
-  elem.style.margin = "0";
-  elem.style.borderColor = InCellEditingPlugin._primaryColor || "#ee7600";
-  elem.style.maxHeight = "unset";
-  if (tag === typeMap.checkbox) {
-    elem.style.borderStyle = "solid";
-    elem.style.borderWidth = "1px";
-    elem.style.boxSizing = "border-box";
-    elem.style.display = "flex";
-    elem.style.justifyContent = "center";
-    elem.addEventListener("keydown", function (e) {
-      if (e.keyCode === 13) {
-        e.preventDefault();
-      }
-    });
-  } else if (tag === typeMap.select || tag === typeMap.combobox || tag === typeMap.date) {
-    if (tag === typeMap.combobox && attributes && attributes["multiple"]) {
-      elem.addEventListener("value-changed", t._onMultiSelectionValueChanged);
-      elem.addEventListener("opened-changed", t._onMultiSelectionEditorChanged);
-    } else {
-      elem.addEventListener("value-changed", t._onValueChanged);
-    }
-  } else if (tag === "ef-input") {
-    elem.setAttribute("type", "number");
-  } else if (tag === typeMap.input) {
-    elem.setAttribute("type", "text");
-  }
-  if (this._autoSuggest) {
-    this._autoSuggest.addEventListener("item-select", t._onAutoSuggestItemSelected);
-    this._autoSuggest.addEventListener("wheel", t._stopPropagation, false);
-  }
-  elem.addEventListener("keydown", t._onTextKeyDown, false);
-  elem.addEventListener("keyup", t._onTextKeyUp, false);
-  elem.addEventListener("mousedown", t._stopPropagation, false);
-  elem.addEventListener("mouseup", t._stopPropagation, false);
-  elem.addEventListener("click", t._stopPropagation, false);
-  elem.addEventListener("copy", t._stopPropagation, false);
-  elem.addEventListener("cut", t._stopPropagation, false);
-  elem.addEventListener("paste", t._stopPropagation, false);
-  return elem;
+	let t = this;
+	let elem = document.createElement(tag);
+	for(let attribute in attributes) {
+		elem.setAttribute(attribute, attributes[attribute]);
+	}
+
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	// Resolve elf theme style
+	elem.style.width = "100%";
+	elem.style.height = "100%";
+	elem.style.margin = "0";
+	elem.style.borderColor = InCellEditingPlugin._primaryColor || "#ee7600";
+	elem.style.maxHeight = "unset";
+
+	if(tag === typeMap.checkbox) {
+		elem.style.borderStyle = "solid";
+		elem.style.borderWidth = "1px";
+		elem.style.boxSizing = "border-box";
+		elem.style.display = "flex";
+		elem.style.justifyContent = "center";
+		elem.addEventListener("keydown", function (e) {
+			if(e.keyCode === 13) {
+				e.preventDefault();
+			}
+		});
+	} else if(
+		tag === typeMap.select ||
+		tag === typeMap.combobox ||
+		tag === typeMap.date) {
+
+		if(tag === typeMap.combobox && attributes && attributes["multiple"]){
+			elem.addEventListener("value-changed", t._onMultiSelectionValueChanged);
+			elem.addEventListener("opened-changed", t._onMultiSelectionEditorChanged);
+		} else {
+			elem.addEventListener("value-changed", t._onValueChanged);
+		}
+	} else if(tag === "ef-input") {
+		elem.setAttribute("type", "number");
+	} else if(tag === typeMap.input) {
+		elem.setAttribute("type", "text");
+	}
+	if(this._autoSuggest) {
+		this._autoSuggest.addEventListener("item-select", t._onAutoSuggestItemSelected);
+		this._autoSuggest.addEventListener("wheel", t._stopPropagation, false);
+	}
+
+	elem.addEventListener("keydown", t._onTextKeyDown, false);
+	elem.addEventListener("keyup", t._onTextKeyUp, false);
+	elem.addEventListener("mousedown", t._stopPropagation, false);
+	elem.addEventListener("mouseup", t._stopPropagation, false);
+	elem.addEventListener("click", t._stopPropagation, false);
+	elem.addEventListener("copy", t._stopPropagation, false);
+	elem.addEventListener("cut", t._stopPropagation, false);
+	elem.addEventListener("paste", t._stopPropagation, false);
+	return elem;
 };
 
 /** @private
 * @return {Element}
 */
 InCellEditingPlugin.prototype._createEditor = function () {
-  var editor = document.createElement("div");
-  editor.className = "cell editing";
-  editor.style.position = "absolute";
-  return editor;
+	let editor = document.createElement("div");
+	editor.className = "cell editing";
+	editor.style.position = "absolute";
+	return editor;
 };
 
 /** @private
@@ -443,10 +457,8 @@ InCellEditingPlugin.prototype._createEditor = function () {
 * @return {Popup} popup instance
 */
 InCellEditingPlugin.prototype._createBalloonPopup = function (editor) {
-  var popup = new Popup(editor, {
-    positioning: "over"
-  });
-  return popup;
+	let popup = new Popup(editor, { positioning: "over" });
+	return popup;
 };
 
 /** @private
@@ -456,19 +468,19 @@ InCellEditingPlugin.prototype._createBalloonPopup = function (editor) {
 * @return {object} inCellCache
 */
 InCellEditingPlugin.prototype._createInCellCache = function (grid, elemTag, attributes) {
-  var t = this;
-  var editor = t._createEditor();
-  var inputElement = t._createInputElement(elemTag, attributes);
-  var balloonPopup = new Popup(editor, {
-    positioning: "over"
-  });
-  editor.appendChild(inputElement);
-  return {
-    grid: grid,
-    inputElement: inputElement,
-    editor: editor,
-    balloonPopup: balloonPopup
-  };
+	let t = this;
+
+	let editor = t._createEditor();
+	let inputElement = t._createInputElement(elemTag, attributes);
+	let balloonPopup = new Popup(editor, { positioning: "over" });
+	editor.appendChild(inputElement);
+
+	return {
+		grid: grid,
+		inputElement: inputElement,
+		editor: editor,
+		balloonPopup: balloonPopup
+	};
 };
 
 /** @private
@@ -476,11 +488,12 @@ InCellEditingPlugin.prototype._createInCellCache = function (grid, elemTag, attr
 * @return {object} inCellCache
 */
 InCellEditingPlugin.prototype._createTitleEditor = function (grid) {
-  var t = this;
-  if (!t._headerInCellCache) {
-    t._headerInCellCache = t._createInCellCache(grid, "input");
-  }
-  return t._headerInCellCache;
+	let t = this;
+	if(!t._headerInCellCache) {
+		t._headerInCellCache = t._createInCellCache(grid, "input");
+	}
+
+	return t._headerInCellCache;
 };
 
 /** @private
@@ -489,38 +502,40 @@ InCellEditingPlugin.prototype._createTitleEditor = function (grid) {
 * @return {object} inCellCache
 */
 InCellEditingPlugin.prototype._createContentEditor = function (columnIndex, grid) {
-  var t = this;
-  var typeMap = InCellEditingPlugin._uiElementTypesMap;
-  var columnData = t._getColumnData(columnIndex, grid);
-  var inCellColumnConfig = columnData["inCellEditing"];
-  var elemTag = typeMap[inCellColumnConfig && inCellColumnConfig.type] || t._defaultTag;
-  if (!columnData["inCellCache"]) {
-    var attributes = inCellColumnConfig ? inCellColumnConfig.attributes : null;
-    columnData["inCellCache"] = t._createInCellCache(grid, elemTag, attributes);
-  }
-  var inCellCache = columnData["inCellCache"];
-
-  // Setup initial value for the editor
-  if (elemTag === typeMap.select || elemTag === typeMap.combobox) {
-    inCellCache["inputElement"].data = inCellColumnConfig && inCellColumnConfig.entries;
-  }
-  return inCellCache;
+	let t = this;
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	let columnData = t._getColumnData(columnIndex, grid);
+	let inCellColumnConfig = columnData["inCellEditing"];
+	let elemTag = typeMap[inCellColumnConfig && inCellColumnConfig.type] || t._defaultTag;
+
+	if(!columnData["inCellCache"]) {
+		let attributes = inCellColumnConfig ? inCellColumnConfig.attributes : null;
+		columnData["inCellCache"] = t._createInCellCache(grid, elemTag, attributes);
+	}
+	let inCellCache = columnData["inCellCache"];
+
+	// Setup initial value for the editor
+	if(elemTag === typeMap.select || elemTag === typeMap.combobox) {
+		inCellCache["inputElement"].data = inCellColumnConfig && inCellColumnConfig.entries;
+	}
+
+	return inCellCache;
 };
 /** @override
 * @return {string}
 */
 InCellEditingPlugin.prototype.getName = function () {
-  return "InCellEditingPlugin";
+	return "InCellEditingPlugin";
 };
 
 /** @private
 * @param {Event|Element} e
 */
-InCellEditingPlugin.prototype._onColumnAdded = function (e) {
-  if (e.context && e.colIndex != null) {
-    //	e.context is a columnOption;
-    this._retrieveColumnOption(e.context, e.colIndex);
-  }
+InCellEditingPlugin.prototype._onColumnAdded = function(e) {
+	if(e.context && e.colIndex != null) {
+	 //	e.context is a columnOption;
+		this._retrieveColumnOption(e.context, e.colIndex);
+	}
 };
 
 /** Called by grid system when initial plugins.
@@ -529,40 +544,46 @@ InCellEditingPlugin.prototype._onColumnAdded = function (e) {
 * @param {Object} options
 */
 InCellEditingPlugin.prototype.initialize = function (host, options) {
-  if (this._hosts.indexOf(host) >= 0) {
-    return;
-  }
-  if (!this._hosts.length) {
-    window.addEventListener("scroll", this._onScroll);
-  }
-  host.listen("columnAdded", this._onColumnAdded);
-  host.getVScrollbar().listen("scroll", this._onScroll);
-  host.getHScrollbar().listen("scroll", this._onScroll);
-  if (this._dblClick) {
-    host.listen("dblclick", this._onDoubleClick);
-
-    // Make a comparable functionality for touchscreen
-    if (isTouchDevice()) {
-      host.listen("touchstart", this._onTouchStart);
-      host.listen("touchend", this._onTouchEnd);
-      host.listen("touchcancel", this._onTouchEnd);
-    }
-  }
-  this._hosts.push(host);
-  if (ElfUtil.getElfVersion() < 4) {
-    // ef-input available in elf version < 4
-    InCellEditingPlugin._uiElementTypesMap["number"] = "ef-input";
-  }
-  if (ElfUtil.isHaloTheme()) {
-    if (!host._inCellEditingStyles) {
-      host._inCellEditingStyles = true;
-      injectCss(InCellEditingPlugin._styles, host.getElement());
-    }
-  }
-  this.config(options);
-  if (!InCellEditingPlugin._primaryColor) {
-    ElfUtil.getThemeColors().then(InCellEditingPlugin._onThemeLoaded)["catch"](InCellEditingPlugin._onThemeLoaded);
-  }
+	if(this._hosts.indexOf(host) >= 0) { return; }
+
+	if(!this._hosts.length) {
+		window.addEventListener("scroll", this._onScroll);
+	}
+
+	host.listen("columnAdded", this._onColumnAdded);
+	host.getVScrollbar().listen("scroll", this._onScroll);
+	host.getHScrollbar().listen("scroll", this._onScroll);
+
+	if(this._dblClick) {
+		host.listen("dblclick", this._onDoubleClick);
+
+		// Make a comparable functionality for touchscreen
+		if(isTouchDevice()) {
+			host.listen("touchstart", this._onTouchStart);
+			host.listen("touchend", this._onTouchEnd);
+			host.listen("touchcancel", this._onTouchEnd);
+		}
+	}
+
+	this._hosts.push(host);
+
+	if(ElfUtil.getElfVersion() < 4) {
+		// ef-input available in elf version < 4
+		InCellEditingPlugin._uiElementTypesMap["number"] = "ef-input";
+	}
+
+	if(ElfUtil.isHaloTheme()) {
+		if(!host._inCellEditingStyles) {
+			host._inCellEditingStyles = true;
+			injectCss(InCellEditingPlugin._styles, host.getElement());
+		}
+	}
+
+	this.config(options);
+
+	if(!InCellEditingPlugin._primaryColor) {
+		ElfUtil.getThemeColors().then(InCellEditingPlugin._onThemeLoaded).catch(InCellEditingPlugin._onThemeLoaded);
+	}
 };
 /** Remove redundant built-in composite-grid feature
 * @public
@@ -571,79 +592,102 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
 * @return {*} The transformed value of the option
 */
 InCellEditingPlugin.prototype.beforeProcessOption = function (optionName, optionVal) {
-  if (optionName == "cellEditing") {
-    return null; // eslint-disable-line
-  }
-
-  return; // eslint-disable-line
+	if(optionName == "cellEditing") {
+		return null; // eslint-disable-line
+	}
+	return; // eslint-disable-line
 };
 /** @private
 * @override
 */
 InCellEditingPlugin.prototype._afterInit = function () {
-  this._elfVersion = ElfUtil.getElfVersion();
+	this._elfVersion = ElfUtil.getElfVersion();
 };
 
 /** @public
 * @param {Object=} options
 */
-InCellEditingPlugin.prototype.config = function (options) {
-  if (!options) {
-    return;
-  }
-  var t = this;
-
-  // config column
-  var columns = options["columns"];
-  if (columns) {
-    var len = columns.length;
-    for (var c = 0; c < len; ++c) {
-      t._retrieveColumnOption(columns[c], c);
-    }
-  }
-  var pluginOption = options["inCellEditing"];
-  if (!pluginOption) return;
-
-  // options
-  if (pluginOption["type"]) t._defaultTag = InCellEditingPlugin._uiElementTypesMap[pluginOption["type"]];
-  if (pluginOption["balloonMode"]) t.enableBalloonMode(pluginOption["balloonMode"]);
-  if (pluginOption["editableTitle"]) t.enableTitleEditing(pluginOption["editableTitle"]);
-  if (pluginOption["editableContent"]) t._editableContent = true;
-  if (pluginOption["tabToMove"]) t._tabToMove = true;
-  if (pluginOption["autoCommitText"]) t.enableAutoCommitText(pluginOption["autoCommitText"]);
-  if (pluginOption["dataBinding"] != null) t.disableDataBinding(!pluginOption["dataBinding"]);
-  if (pluginOption["contentSource"] != null) t._contentSource = pluginOption["contentSource"];
-  if (pluginOption["popupElement"]) {
-    t.setPopupElement(pluginOption["popupElement"]);
-  }
-  if (pluginOption["doubleClick"] != null) t.disableDblClick(!pluginOption["doubleClick"]);
-  if (pluginOption["inlineStyling"]) {
-    t._inlineStyling = true;
-  }
-  if (pluginOption["disablingScroll"]) {
-    t._disablingScroll = true;
-  }
-  if (pluginOption["uiBlocking"]) {
-    t._uiBlocking = true;
-  }
-  if (pluginOption["autoSuggest"]) {
-    t._autoSuggest = pluginOption["autoSuggest"];
-  }
-  if (pluginOption["closingOnScroll"] == false) {
-    t._closingOnScroll = false;
-  }
-  if (pluginOption["autoHiding"] == false) {
-    t._autoHiding = false;
-  }
-
-  // event callback
-  t.addListener(pluginOption, "preEditorOpening");
-  t.addListener(pluginOption, "editorOpened");
-  t.addListener(pluginOption, "beforeCommit");
-  t.addListener(pluginOption, "editorClosed");
-  t.addListener(pluginOption, "keyUp");
-  t.addListener(pluginOption, "beforeRowCommit");
-  t.addListener(pluginOption, "rowEditorClosed");
+InCellEditingPlugin.prototype.config = function(options) {
+	if(!options) {
+		return;
+	}
+	let t = this;
+
+	// config column
+	let columns = options["columns"];
+	if(columns) {
+		let len = columns.length;
+		for(let c = 0; c < len; ++c) {
+			t._retrieveColumnOption(columns[c], c);
+		}
+	}
+
+	let pluginOption = options["inCellEditing"];
+	if(!pluginOption) return;
+
+	// options
+	if(pluginOption["type"])
+		t._defaultTag = InCellEditingPlugin._uiElementTypesMap[pluginOption["type"]];
+
+	if(pluginOption["balloonMode"])
+		t.enableBalloonMode(pluginOption["balloonMode"]);
+
+	if(pluginOption["editableTitle"])
+		t.enableTitleEditing(pluginOption["editableTitle"]);
+
+	if(pluginOption["editableContent"])
+		t._editableContent = true;
+
+	if(pluginOption["tabToMove"])
+		t._tabToMove = true;
+
+	if(pluginOption["autoCommitText"])
+		t.enableAutoCommitText(pluginOption["autoCommitText"]);
+
+	if(pluginOption["dataBinding"] != null)
+		t.disableDataBinding(!pluginOption["dataBinding"]);
+
+	if(pluginOption["contentSource"] != null)
+		t._contentSource = pluginOption["contentSource"];
+
+	if(pluginOption["popupElement"]){
+		t.setPopupElement(pluginOption["popupElement"]);
+	}
+
+	if(pluginOption["doubleClick"] != null)
+		t.disableDblClick(!pluginOption["doubleClick"]);
+
+	if(pluginOption["inlineStyling"]) {
+		t._inlineStyling = true;
+	}
+
+	if(pluginOption["disablingScroll"]) {
+		t._disablingScroll = true;
+	}
+
+	if(pluginOption["uiBlocking"]) {
+		t._uiBlocking = true;
+	}
+
+	if(pluginOption["autoSuggest"]) {
+		t._autoSuggest = pluginOption["autoSuggest"];
+	}
+
+	if(pluginOption["closingOnScroll"] == false) {
+		t._closingOnScroll = false;
+	}
+	if(pluginOption["autoHiding"] == false) {
+		t._autoHiding = false;
+	}
+
+	// event callback
+	t.addListener(pluginOption, "preEditorOpening");
+	t.addListener(pluginOption, "editorOpened");
+	t.addListener(pluginOption, "beforeCommit");
+	t.addListener(pluginOption, "editorClosed");
+	t.addListener(pluginOption, "keyUp");
+	t.addListener(pluginOption, "beforeRowCommit");
+	t.addListener(pluginOption, "rowEditorClosed");
 };
 
 /** @private
@@ -653,17 +697,17 @@ InCellEditingPlugin.prototype.config = function (options) {
 * @param {boolean} defaultValue
 * @returns {number} dirty
 */
-var _setBooleanOption = function _setBooleanOption(obj, propName, propValue, defaultValue) {
-  if (defaultValue) {
-    if (!propValue) {
-      obj[propName] = false;
-      return true;
-    }
-  } else if (propValue) {
-    obj[propName] = true;
-    return true;
-  }
-  return false;
+let _setBooleanOption = function(obj, propName, propValue, defaultValue) {
+	if(defaultValue) {
+		if(!propValue) {
+			obj[propName] = false;
+			return true;
+		}
+	} else if(propValue) {
+		obj[propName] = true;
+		return true;
+	}
+	return false;
 };
 /** Get a current state of grid and extension config
  * @public
@@ -671,65 +715,75 @@ var _setBooleanOption = function _setBooleanOption(obj, propName, propValue, def
  * @returns {!Object}
  */
 InCellEditingPlugin.prototype.getConfigObject = function (out_obj) {
-  var obj = out_obj || {};
-  var columns = obj.columns;
-  if (!columns) {
-    columns = obj.columns = [];
-  }
-  var len = this.getColumnCount();
-  var val, opt;
-  for (var i = 0; i < len; ++i) {
-    var col = columns[i];
-    if (!col) {
-      col = columns[i] = {};
-    }
-    opt = this._getColumnData(i);
-    if (!opt) {
-      continue;
-    }
-    if (opt.editableContent != null) {
-      col.editableContent = opt.editableContent;
-    }
-    if (opt.inCellEditing != null) {
-      col.inCellEditing = {};
-      val = opt.inCellEditing["type"];
-      if (val != null) {
-        col.inCellEditing["type"] = val;
-      }
-      val = opt.inCellEditing["entries"];
-      if (val != null) {
-        col.inCellEditing["entries"] = val;
-      }
-      val = opt.inCellEditing["attributes"];
-      if (val != null) {
-        col.inCellEditing["attributes"] = val;
-      }
-    }
-  }
-  var extOptions = obj.inCellEditing;
-  var dirty = 0;
-  if (!extOptions) {
-    extOptions = {};
-  }
-  dirty |= _setBooleanOption(extOptions, "balloonMode", this._balloonMode, false);
-  dirty |= _setBooleanOption(extOptions, "editableTitle", this._editableTitle, false);
-  dirty |= _setBooleanOption(extOptions, "tabToMove", this._tabToMove, false);
-  dirty |= _setBooleanOption(extOptions, "autoCommitText", this._autoCommitText, false);
-  dirty |= _setBooleanOption(extOptions, "dataBinding", this._dataBinding, true);
-  dirty |= _setBooleanOption(extOptions, "doubleClick", this._dblClick, true);
-  dirty |= _setBooleanOption(extOptions, "inlineStyling", this._inlineStyling, false);
-  dirty |= _setBooleanOption(extOptions, "disablingScroll", this._disablingScroll, false);
-  dirty |= _setBooleanOption(extOptions, "uiBlocking", this._uiBlocking, false);
-  dirty |= _setBooleanOption(extOptions, "closingOnScroll", this._closingOnScroll, true);
-  dirty |= _setBooleanOption(extOptions, "autoHiding", this._autoHiding, true);
-  if (this._contentSource !== "textContent") {
-    dirty = 1;
-    extOptions.contentSource = this._contentSource;
-  }
-  if (dirty) {
-    obj.inCellEditing = extOptions;
-  }
-  return obj;
+	let obj = out_obj || {};
+
+	let columns = obj.columns;
+	if(!columns) {
+		columns = obj.columns = [];
+	}
+
+	let len = this.getColumnCount();
+	let val, opt;
+	for(let i = 0; i < len; ++i) {
+		let col = columns[i];
+		if(!col) {
+			col = columns[i] = {};
+		}
+
+		opt = this._getColumnData(i);
+
+		if(!opt) { continue; }
+		if(opt.editableContent != null) {
+			col.editableContent = opt.editableContent;
+		}
+		if(opt.inCellEditing != null) {
+			col.inCellEditing = {};
+
+			val = opt.inCellEditing["type"];
+			if(val != null) {
+				col.inCellEditing["type"] = val;
+			}
+
+			val = opt.inCellEditing["entries"];
+			if(val != null) {
+				col.inCellEditing["entries"]  = val;
+			}
+
+			val = opt.inCellEditing["attributes"];
+			if(val != null) {
+				col.inCellEditing["attributes"] = val;
+			}
+		}
+	}
+
+	let extOptions = obj.inCellEditing;
+	let dirty = 0;
+	if(!extOptions) {
+		extOptions = {};
+	}
+	dirty |= _setBooleanOption(extOptions, "balloonMode", this._balloonMode, false);
+	dirty |= _setBooleanOption(extOptions, "editableTitle", this._editableTitle, false);
+	dirty |= _setBooleanOption(extOptions, "editableContent", this._editableContent, false);
+	dirty |= _setBooleanOption(extOptions, "tabToMove", this._tabToMove, false);
+	dirty |= _setBooleanOption(extOptions, "autoCommitText", this._autoCommitText, false);
+	dirty |= _setBooleanOption(extOptions, "dataBinding", this._dataBinding, true);
+	dirty |= _setBooleanOption(extOptions, "doubleClick", this._dblClick, true);
+	dirty |= _setBooleanOption(extOptions, "inlineStyling", this._inlineStyling, false);
+	dirty |= _setBooleanOption(extOptions, "disablingScroll", this._disablingScroll, false);
+	dirty |= _setBooleanOption(extOptions, "uiBlocking", this._uiBlocking, false);
+	dirty |= _setBooleanOption(extOptions, "closingOnScroll", this._closingOnScroll, true);
+	dirty |= _setBooleanOption(extOptions, "autoHiding", this._autoHiding, true);
+
+	if(this._contentSource !== "textContent") {
+		dirty = 1;
+		extOptions.contentSource = this._contentSource;
+	}
+
+	if(dirty) {
+		obj.inCellEditing = extOptions;
+	}
+
+	return obj;
 };
 
 /** @private
@@ -737,41 +791,47 @@ InCellEditingPlugin.prototype.getConfigObject = function (out_obj) {
 * @param {number} colIndex
 */
 InCellEditingPlugin.prototype._retrieveColumnOption = function (columnOption, colIndex) {
-  var pluginOptions = columnOption["inCellEditing"];
-  var editableContent = columnOption["editableContent"];
-  if (pluginOptions != null || editableContent != null) {
-    var colData = this._newColumnData(colIndex);
-    if (pluginOptions != null) {
-      colData["inCellEditing"] = pluginOptions;
-      pluginOptions.entries = CoralItems.create(pluginOptions.entries); // Create entries for coral select and combobox
-    }
+	let pluginOptions = columnOption["inCellEditing"];
+	let editableContent = columnOption["editableContent"];
 
-    if (editableContent != null) {
-      colData["editableContent"] = editableContent;
-    }
-  }
+	if(pluginOptions != null || editableContent != null) {
+		let colData = this._newColumnData(colIndex);
+		if(pluginOptions != null) {
+			colData["inCellEditing"] = pluginOptions;
+			pluginOptions.entries = CoralItems.create(pluginOptions.entries); // Create entries for coral select and combobox
+		}
+		if(editableContent != null) {
+			colData["editableContent"] = editableContent;
+		}
+	}
 };
 
 /** @override */
 InCellEditingPlugin.prototype.unload = function (host) {
-  var at = this._hosts.indexOf(host);
-  if (at < 0) {
-    return;
-  }
-  this._hosts.splice(at, 1);
-  host.unlisten("columnAdded", this._onColumnAdded);
-  host.getVScrollbar().unlisten("scroll", this._onScroll);
-  host.getHScrollbar().unlisten("scroll", this._onScroll);
-  host.unlisten("dblclick", this._onDoubleClick);
-  host.unlisten("touchstart", this._onTouchStart);
-  host.unlisten("touchend", this._onTouchEnd);
-  host.unlisten("touchcancel", this._onTouchEnd);
-  if (!this._hosts.length) {
-    this._touchTimerId = 0;
-    this._editorTimerId = 0;
-    window.removeEventListener("scroll", this._onScroll);
-  }
-  this._dispose();
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+	this._hosts.splice(at, 1);
+
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.getVScrollbar().unlisten("scroll", this._onScroll);
+	host.getHScrollbar().unlisten("scroll", this._onScroll);
+
+	host.unlisten("dblclick", this._onDoubleClick);
+	host.unlisten("touchstart", this._onTouchStart);
+	host.unlisten("touchend", this._onTouchEnd);
+	host.unlisten("touchcancel", this._onTouchEnd);
+
+	if(!this._hosts.length) {
+		if(this._touchTimerId) {
+			clearTimeout(this._touchTimerId);
+		}
+		if(this._editorTimerId) {
+			clearTimeout(this._editorTimerId);
+		}
+		window.removeEventListener("scroll", this._onScroll);
+	}
+
+	this._dispose();
 };
 
 /** @public
@@ -782,33 +842,38 @@ InCellEditingPlugin.prototype.unload = function (host) {
 * @fires InCellEditingPlugin#editorOpened
 */
 InCellEditingPlugin.prototype.openEditor = function (colIndex, rowIndex, sectionRef, grid) {
-  if (!grid) {
-    grid = this._hosts[0];
-    if (!grid) {
-      return;
-    }
-  }
-  var sectionSettings = grid.getSectionSettings(sectionRef || "content");
-  var activePos = this._activePos;
-  if (activePos) {
-    var sectionName = sectionSettings ? sectionSettings.getType() : "";
-    if (activePos["colIndex"] === colIndex && activePos["rowIndex"] === rowIndex && activePos["sectionName"] === sectionName && activePos["grid"] === grid) {
-      return; // The same cell is open twice
-    }
-
-    this.closeCellEditor(); // Close previously opened cell editor
-  }
-
-  var section = sectionSettings ? sectionSettings.getSection() : null;
-  var cell = section ? section.getCell(colIndex, rowIndex) : null;
-  if (!cell) {
-    return; // Some input is invalid
-  }
-
-  grid.scrollToColumn(colIndex);
-  grid.scrollToRow(null, rowIndex); // TODO: Fix this workaround
-
-  setTimeout(this._openEditor.bind(this, cell, grid), 100);
+	if(!grid) {
+		grid = this._hosts[0];
+		if(!grid) {
+			return;
+		}
+	}
+
+	let sectionSettings = grid.getSectionSettings(sectionRef || "content");
+	let activePos = this._activePos;
+	if(activePos) {
+		let sectionName = sectionSettings ? sectionSettings.getType() : "";
+
+		if(activePos["colIndex"] === colIndex &&
+			activePos["rowIndex"] === rowIndex &&
+			activePos["sectionName"] === sectionName &&
+			activePos["grid"] === grid
+		) {
+			return; // The same cell is open twice
+		}
+
+		this.closeCellEditor(); // Close previously opened cell editor
+	}
+	let section = sectionSettings ? sectionSettings.getSection() : null;
+	let cell = section ? section.getCell(colIndex, rowIndex) : null;
+	if(!cell) {
+		return; // Some input is invalid
+	}
+
+	grid.scrollToColumn(colIndex);
+	grid.scrollToRow(null, rowIndex); // TODO: Fix this workaround
+
+	setTimeout(this._openEditor.bind(this, cell, grid), 100);
 };
 
 /** @public
@@ -816,21 +881,21 @@ InCellEditingPlugin.prototype.openEditor = function (colIndex, rowIndex, section
 * @fires InCellEditingPlugin#cancelled
 */
 InCellEditingPlugin.prototype.closeCellEditor = function (opt_forceCommit) {
-  this._commitText(opt_forceCommit || this._autoCommitText);
+	this._commitText(opt_forceCommit || this._autoCommitText);
 };
 
 /** @public
 * @param {boolean=} opt_enabled
 */
 InCellEditingPlugin.prototype.enableBalloonMode = function (opt_enabled) {
-  this._balloonMode = opt_enabled !== false;
+	this._balloonMode = opt_enabled !== false;
 };
 
 /** @public
 * @param {boolean=} opt_enabled
 */
 InCellEditingPlugin.prototype.enableTitleEditing = function (opt_enabled) {
-  this._editableTitle = opt_enabled !== false;
+	this._editableTitle = opt_enabled !== false;
 };
 
 /** Disable editing on all title sections
@@ -838,7 +903,7 @@ InCellEditingPlugin.prototype.enableTitleEditing = function (opt_enabled) {
 * @param {boolean=} opt_disabled
 */
 InCellEditingPlugin.prototype.disableTitleEditing = function (opt_disabled) {
-  this._editableTitle = opt_disabled === false;
+	this._editableTitle = opt_disabled === false;
 };
 
 /** Disable editing on a per cell basis
@@ -847,29 +912,29 @@ InCellEditingPlugin.prototype.disableTitleEditing = function (opt_disabled) {
 * @param {boolean=} opt_disabled
 */
 InCellEditingPlugin.prototype.disableCellEditing = function (cell, opt_disabled) {
-  if (cell) {
-    cell.enableClass("no-editing", opt_disabled !== false);
-  }
+	if(cell) {
+		cell.enableClass("no-editing", opt_disabled !== false);
+	}
 };
 
 /** @public
 * @param {boolean=} opt_disabled
 */
 InCellEditingPlugin.prototype.disableDataBinding = function (opt_disabled) {
-  this._dataBinding = opt_disabled === false;
+	this._dataBinding = (opt_disabled === false);
 };
 
 /** @public
 * @param {boolean=} opt_disabled
 */
 InCellEditingPlugin.prototype.disableDblClick = function (opt_disabled) {
-  var dblClick = opt_disabled === false;
-  if (this._dblClick !== dblClick) {
-    this._dblClick = dblClick;
-    for (var i = this._hosts.length; --i >= 0;) {
-      this._listenForTriggering(this._hosts[i], dblClick);
-    }
-  }
+	let dblClick = (opt_disabled === false);
+	if(this._dblClick !== dblClick) {
+		this._dblClick = dblClick;
+		for(let i = this._hosts.length; --i >= 0;) {
+			this._listenForTriggering(this._hosts[i], dblClick);
+		}
+	}
 };
 
 /** Checking Editing is in process.
@@ -877,7 +942,7 @@ InCellEditingPlugin.prototype.disableDblClick = function (opt_disabled) {
 * @return {boolean}
 */
 InCellEditingPlugin.prototype.isEditing = function () {
-  return this._editing;
+	return this._editing;
 };
 
 /**
@@ -890,29 +955,28 @@ InCellEditingPlugin.prototype.isEditing = function () {
 * for cell editing mode. function not require param since only one editor can be opened at a time.
 */
 InCellEditingPlugin.prototype.getTextBox = function (columnIndex, grid) {
-  if (this._activeRowId) {
-    // for row editing mode
-    // get rowEditor that's stored in column data
-    grid = grid || this._hosts[0];
-    if (grid) {
-      var columnData = this._getColumnData(columnIndex, grid);
-      var inCellCache = columnData["inCellCache"];
-      if (inCellCache) {
-        return inCellCache["inputElement"];
-      }
-    }
-  } else if (this._activeInCellCache) {
-    // for cell editing mode
-    return this._activeInCellCache["inputElement"];
-  }
-  return null; // no editor open
+	if(this._activeRowId) { // for row editing mode
+		// get rowEditor that's stored in column data
+		grid = grid || this._hosts[0];
+		if(grid) {
+			let columnData = this._getColumnData(columnIndex, grid);
+			let inCellCache = columnData["inCellCache"];
+			if(inCellCache) {
+				return inCellCache["inputElement"];
+			}
+		}
+	} else if(this._activeInCellCache) { // for cell editing mode
+		return this._activeInCellCache["inputElement"];
+	}
+
+	return null; // no editor open
 };
 
 /** @public
 * @return {string}
 */
 InCellEditingPlugin.prototype.getInitialText = function () {
-  return this._initialText;
+	return this._initialText;
 };
 
 /** @private
@@ -920,29 +984,31 @@ InCellEditingPlugin.prototype.getInitialText = function () {
 * @param {number} rowIndex
 * @param {string} field
 * @param {Element=} content element that get from cell.getContent
+* @param {string} sectionType
 * @return {*}
 */
-InCellEditingPlugin.prototype._getSourceContent = function (dataSource, rowIndex, field, content) {
-  if (this._contentSource == "field") {
-    return this._getData(dataSource, rowIndex, field);
-  } else {
-    var textNode, str;
-    if (content) {
-      var len = content.childNodes.length;
-      for (var i = 0; i < len; ++i) {
-        if (content.childNodes[i].nodeType === 3) {
-          textNode = content.childNodes[i]; // To preserve current content structure
-          break;
-        }
-      }
-    }
-    if (textNode) {
-      str = textNode.textContent;
-    } else if (content) {
-      str = content.textContent;
-    }
-    return str;
-  }
+InCellEditingPlugin.prototype._getSourceContent = function (dataSource, rowIndex, field, content, sectionType) {
+	if(this._contentSource == "field" && sectionType !== "title") {
+		return this._getData(dataSource, rowIndex, field);
+	} else {
+		let textNode, str;
+		if(content) {
+			let len = content.childNodes.length;
+			for(let i = 0; i < len; ++i) {
+				if(content.childNodes[i].nodeType === 3) {
+					textNode = content.childNodes[i]; // To preserve current content structure
+					break;
+				}
+			}
+		}
+
+		if(textNode) {
+			str = textNode.textContent;
+		} else if(content) {
+			str = content.textContent;
+		}
+		return str;
+	}
 };
 
 /**
@@ -951,11 +1017,11 @@ InCellEditingPlugin.prototype._getSourceContent = function (dataSource, rowIndex
 * @return {!number} row index will return -1 if not found
 */
 InCellEditingPlugin.prototype._getRowIndex = function (rowId) {
-  if (rowId && this._lastActiveGrid) {
-    var dv = this._lastActiveGrid.getDataSource();
-    if (dv) return dv.getRowIndex(rowId);
-  }
-  return -1;
+	if(rowId && this._lastActiveGrid) {
+		let dv = this._lastActiveGrid.getDataSource();
+		if(dv) return dv.getRowIndex(rowId);
+	}
+	return -1;
 };
 
 /**
@@ -964,18 +1030,18 @@ InCellEditingPlugin.prototype._getRowIndex = function (rowId) {
 * @return {!string} return empty string if not found
 */
 InCellEditingPlugin.prototype._getRowId = function (rowIndex) {
-  if (rowIndex != null && this._lastActiveGrid) {
-    var dv = this._lastActiveGrid.getDataSource();
-    if (dv) return dv.getRowId(rowIndex);
-  }
-  return "";
+	if(rowIndex != null && this._lastActiveGrid) {
+		let dv = this._lastActiveGrid.getDataSource();
+		if(dv) return dv.getRowId(rowIndex);
+	}
+	return "";
 };
 
 /** @private
 * @return {Object|null} core grid object
 */
 InCellEditingPlugin.prototype.getActiveGrid = function () {
-  return this._activePos ? this._activePos["grid"] : null;
+	return this._activePos ? this._activePos["grid"] : null;
 };
 
 /** get active column index that editor had opended. Function can work only in cell editing mode.
@@ -983,11 +1049,11 @@ InCellEditingPlugin.prototype.getActiveGrid = function () {
 * @return {number} column index will return -1 if not found
 */
 InCellEditingPlugin.prototype.getActiveColIndex = function () {
-  if (this._activePos) {
-    var colIndex = this._activePos["colIndex"];
-    if (colIndex != null) return colIndex;
-  }
-  return -1;
+	if(this._activePos) {
+		let colIndex = this._activePos["colIndex"];
+		if(colIndex != null) return colIndex;
+	}
+	return -1;
 };
 
 /** get active row index that editor had opended. Function Can work in both cell/row editing modes.
@@ -995,29 +1061,27 @@ InCellEditingPlugin.prototype.getActiveColIndex = function () {
 * @return {number} row index will return -1 if not found
 */
 InCellEditingPlugin.prototype.getActiveRowIndex = function () {
-  if (this._activeRowId) {
-    // row editing mode
-    return this._getRowIndex(this._activeRowId);
-  } else if (this._activePos) {
-    // cell editing mode
-    var rowIndex = this._activePos["rowIndex"];
-    if (rowIndex != null) return rowIndex;
-  }
-  return -1;
+	if(this._activeRowId) { // row editing mode
+		return this._getRowIndex(this._activeRowId);
+	} else if(this._activePos) { // cell editing mode
+		let rowIndex = this._activePos["rowIndex"];
+		if(rowIndex != null) return rowIndex;
+	}
+	return -1;
 };
 
 /** @public
 * @return {Object}
 */
 InCellEditingPlugin.prototype.getInputElementPosition = function () {
-  return this._activePos || null;
+	return this._activePos || null;
 };
 
 /** @public
 * @param {boolean=} opt_enable
 */
 InCellEditingPlugin.prototype.enableAutoCommitText = function (opt_enable) {
-  this._autoCommitText = opt_enable !== false;
+	this._autoCommitText = (opt_enable !== false);
 };
 
 /** Check if the column can be edited by double click
@@ -1026,8 +1090,30 @@ InCellEditingPlugin.prototype.enableAutoCommitText = function (opt_enable) {
 * @return {boolean}
 */
 InCellEditingPlugin.prototype.isColumnEditable = function (colIndex) {
-  var val = this._getColumnOption(colIndex, "editableContent");
-  return val == null ? this._editableContent : val;
+	let val = this._getColumnOption(colIndex, "editableContent");
+	return val == null ? this._editableContent : val;
+};
+/** @public
+* @description Supply an keyboard input. This is for testing purpose.
+* @ignore
+* @param {string} keyName
+* @param {Object=} context
+*/
+InCellEditingPlugin.prototype.supplyKey = function(keyName, context) {
+	let eventObj = this._mockKeyboardEvent(keyName, context);
+	this._onTextKeyDown(eventObj);
+	this._onTextKeyUp(eventObj);
+};
+/** @public
+* @description Supply an double click event. This is for testing purpose.
+* @ignore
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {Object=} context
+*/
+InCellEditingPlugin.prototype.mockDoubleClick = function(colIndex, rowIndex, context) {
+	let eventObj = this._mockMouseEvent(colIndex, rowIndex, context);
+	this._onDoubleClick(eventObj);
 };
 /** @private
 * @param {Event|Element} e
@@ -1035,33 +1121,34 @@ InCellEditingPlugin.prototype.isColumnEditable = function (colIndex) {
 * @fires InCellEditingPlugin#editorOpened
 */
 InCellEditingPlugin.prototype._onDoubleClick = function (e, opt_host) {
-  var t = this;
-  var host = opt_host || t.getRelativeGrid(e);
-  if (t.isEditing() || !host) {
-    return;
-  }
-  var arg = host.getRelativePosition(e);
-  var sectionType = arg["sectionType"];
-  if (sectionType === "content" && !t.isColumnEditable(arg["colIndex"])) {
-    return;
-  } else if (sectionType === "title" && !t._editableTitle) {
-    return;
-  } else if (sectionType === "header") {
-    return;
-  }
-  var dataSource = arg["dataSource"];
-  if (dataSource != null) {
-    var rowId = dataSource.getRowId(arg["rowIndex"]);
-    if (dataSource.getGroupByRowId(rowId)) {
-      return;
-    }
-  }
-
-  // Initialize internal states
-  if (e["preventDefault"]) {
-    Dom.preventDefault(e);
-  }
-  t.openEditor(arg.colIndex, arg.rowIndex, arg.section, host);
+	let t = this;
+	let host = opt_host || t.getRelativeGrid(e);
+	if(t.isEditing() || !host) { return; }
+
+	let arg = host.getRelativePosition(e);
+	let sectionType = arg["sectionType"];
+
+	if(sectionType === "content" && !t.isColumnEditable(arg["colIndex"])) {
+		return;
+	} else if(sectionType === "title" && !t._editableTitle) {
+		return;
+	} else if(sectionType === "header") {
+		return;
+	}
+
+	let dataSource = arg["dataSource"];
+	if(dataSource != null) {
+		let rowId = dataSource.getRowId(arg["rowIndex"]);
+		if(dataSource.getGroupByRowId(rowId)) {
+			return;
+		}
+	}
+
+	// Initialize internal states
+	if(e["preventDefault"]) {
+		Dom.preventDefault(e);
+	}
+	t.openEditor(arg.colIndex, arg.rowIndex, arg.section, host);
 };
 
 /** @private
@@ -1070,159 +1157,175 @@ InCellEditingPlugin.prototype._onDoubleClick = function (e, opt_host) {
 * @param {Object=} arg
 */
 InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
-  var t = this;
-  if (!host.getElement() || this._hosts.indexOf(host) < 0) {
-    // Check validity due to asyncronous call
-    return;
-  }
-  if (!arg) {
-    arg = host.getRelativePosition(e);
-  }
-  if (!arg["hit"]) {
-    // The specified cell could be gone during the asyncronous process
-    return;
-  }
-  t._dispatch("preEditorOpening", arg);
-  if (arg["cancel"]) {
-    return;
-  }
-  var colIndex = arg["colIndex"];
-  var rowIndex = arg["rowIndex"];
-  var section = arg["section"];
-  var cell = section.getCell(colIndex, rowIndex);
-  var rowSpan = 1;
-  var stretchedCell = section.getStretchedCell(cell, rowIndex);
-  if (stretchedCell) {
-    cell = stretchedCell;
-  } else {
-    rowSpan = section.getCellRowSpan(colIndex, rowIndex);
-  }
-  if (!cell || cell.hasClass("no-editing")) {
-    return;
-  }
-  // Everything has been verified at this point. We can start the opening process.
-
-  // close row editor first
-  t.closeRowEditor(false, host);
-  section.addClass("edit-mode");
-  t._lastActiveGrid = host;
-  t._activePos = arg;
-  arg["cell"] = t._activeCell = cell;
-  arg["content"] = t._prevContent = cell.getContent();
-  arg["field"] = t._getField(colIndex);
-  var dataSource = arg["dataSource"];
-  if (dataSource != null) {
-    var rowId = arg["rowId"] = this._getRowId(arg["rowIndex"]);
-    arg["segmentSeparator"] = dataSource.isSegmentSeparator(rowId);
-    arg["groupHeader"] = dataSource.getGroupByRowId(rowId);
-    arg["rowData"] = this._getRow(dataSource, rowId);
-    if (dataSource["stall"]) {
-      dataSource["stall"](true);
-    }
-  }
-
-  // Initialize UIs
-  if (arg["sectionType"] === "title") {
-    t._activeInCellCache = t._createTitleEditor(host);
-  } else {
-    t._activeInCellCache = t._createContentEditor(colIndex, host);
-  }
-  var inputElement = arg["inputElement"] = t._activeInCellCache["inputElement"];
-  var editor = arg["editor"] = t._activeInCellCache["editor"];
-  var balloonPopup = t._activeInCellCache["balloonPopup"];
-  var sourceContent = arg ? t._getSourceContent(arg["dataSource"], arg["rowIndex"], arg["field"], arg["content"]) : "";
-  if (rowIndex + 1 >= section.getRowCount()) {
-    inputElement.classList.add("bottom");
-  } else {
-    inputElement.classList.remove("bottom");
-  }
-
-  // Initialize Balloon
-  t._usingBalloon = t._isBalloonMode(cell);
-  if (t._usingBalloon) {
-    editor.classList.add("balloon");
-  } else {
-    editor.classList.remove("balloon");
-  }
-  var editorStyle = editor.style;
-  if (this._elfVersion || t._inlineStyling) {
-    editorStyle.backgroundColor = section.getComputedStyle().backgroundColor;
-  }
-  var rowH = section.getRowHeight(rowIndex);
-  var width = cell.getWidth();
-  if (!host.isPinnedColumn(colIndex)) {
-    var hScrollbar = host.getHScrollbar();
-    if (hScrollbar.isActive()) {
-      var paneSize = hScrollbar.getPaneSize();
-      if (width > paneSize) {
-        width = paneSize;
-      }
-    }
-  }
-  if (!t._usingBalloon || width > 208) {
-    editorStyle.width = width + "px";
-  } else {
-    editorStyle.width = "";
-  }
-  if (rowSpan > 1) {
-    editorStyle.height = cell.getHeight() + "px";
-  } else {
-    editorStyle.height = rowH + "px";
-  }
-
-  // Attach our popup (balloon element)
-  var parentElement = document.body;
-  if (t._compositeGrid || t._realTimeGrid) {
-    var activeGrid = t.getActiveGrid();
-    if (activeGrid) {
-      parentElement = activeGrid.getElement().parentElement;
-    }
-  }
-  balloonPopup.enableUIBlocking(t._uiBlocking);
-  balloonPopup.addEventListener("hidden", t._onPopupHide);
-  balloonPopup.disableAutoHiding(!t._autoHiding);
-  balloonPopup.disableHideOnScroll(true);
-  balloonPopup.attachTo(cell.getElement());
-  balloonPopup.show(true, parentElement);
-  this._updateEditorPopup(t._activeInCellCache, cell, host);
-
-  // Attach user element
-  if (t._customElement) {
-    t._customElementPopup.attachTo(editor);
-    t._customElementPopup.show(true, parentElement);
-    t._customElementPopup.disableAutoHiding(false);
-    arg["popupElement"] = t._customElement;
-  }
-
-  // WARNING: value-changed event from ELF v3 component may NOT be triggered due to their design flaw
-  t._setText(sourceContent, inputElement);
-  arg["initialText"] = t._initialText = sourceContent;
-  if (t._disablingScroll) {
-    t._freezeScrolling(host, true);
-  }
-  arg["autoSuggest"] = t._autoSuggest;
-  if (t._autoSuggest) {
-    if (t._autoSuggest.attach === inputElement) {
-      t._autoSuggest.attach = null; // WORKAROUND: reset attach for re-attach target
-    }
-
-    if (t._autoSuggest.parentNode !== editor) {
-      // if we appendChild all time when open editor, events won't work
-      editor.appendChild(t._autoSuggest);
-    }
-    t._autoSuggest.attach = inputElement;
-    t._autoSuggest.positionTarget = inputElement; // for re-position of autosuggest
-  }
-
-  // Dispatch an event for user to setup stuff
-  t._dispatch("editorOpened", arg); // User may modify the editor
-
-  inputElement.focus();
-  if (typeof inputElement.select === "function") {
-    inputElement.select();
-  }
-  arg["initialText"] = t._initialText = t.getText(); // After all modifications, cache the string for text change event
-  t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
+	let t = this;
+	if(!host.getElement() || this._hosts.indexOf(host) < 0) { // Check validity due to asyncronous call
+		return;
+	}
+
+	if(!arg) {
+		arg = host.getRelativePosition(e);
+	}
+
+	if(!arg["hit"]) { // The specified cell could be gone during the asyncronous process
+		return;
+	}
+
+	t._dispatch("preEditorOpening", arg);
+
+	if(arg["cancel"]) {
+		return;
+	}
+
+	let colIndex = arg["colIndex"];
+	let rowIndex = arg["rowIndex"];
+	let section = arg["section"];
+	let cell = section.getCell(colIndex, rowIndex);
+	let rowSpan = 1;
+	let stretchedCell = section.getStretchedCell(cell, rowIndex);
+	if(stretchedCell){
+		cell = stretchedCell;
+	} else {
+		rowSpan = section.getCellRowSpan(colIndex, rowIndex);
+	}
+
+	if(!cell || cell.hasClass("no-editing")) {
+		return;
+	}
+	// Everything has been verified at this point. We can start the opening process.
+
+	// close row editor first
+	t.closeRowEditor(false, host);
+
+	section.addClass("edit-mode");
+	t._lastActiveGrid = host;
+	t._activePos = arg;
+	arg["cell"] = t._activeCell = cell;
+	arg["content"] = t._prevContent = cell.getContent();
+	arg["field"] = t._getField(colIndex);
+
+	let dataSource = arg["dataSource"];
+	if(dataSource != null) {
+		let rowId = arg["rowId"] = this._getRowId(arg["rowIndex"]);
+		arg["segmentSeparator"] = dataSource.isSegmentSeparator(rowId);
+		arg["groupHeader"] = dataSource.getGroupByRowId(rowId);
+		arg["rowData"] = this._getRow(dataSource, rowId);
+
+		if(dataSource["stall"]) {
+			dataSource["stall"](true);
+		}
+	}
+
+	// Initialize UIs
+	if(arg["sectionType"] === "title") {
+		t._activeInCellCache = t._createTitleEditor(host);
+	} else {
+		t._activeInCellCache = t._createContentEditor(colIndex, host);
+	}
+
+	let inputElement = arg["inputElement"] = t._activeInCellCache["inputElement"];
+	let editor = arg["editor"] = t._activeInCellCache["editor"];
+	let balloonPopup = t._activeInCellCache["balloonPopup"];
+	let sourceContent = arg ? t._getSourceContent(arg["dataSource"], arg["rowIndex"], arg["field"], arg["content"], arg["sectionType"]) : "";
+
+	if(rowIndex + 1 >= section.getRowCount()) {
+		inputElement.classList.add("bottom");
+	} else {
+		inputElement.classList.remove("bottom");
+	}
+
+	// Initialize Balloon
+	t._usingBalloon = t._isBalloonMode(cell);
+	if(t._usingBalloon) {
+		editor.classList.add("balloon");
+	} else {
+		editor.classList.remove("balloon");
+	}
+
+	let editorStyle = editor.style;
+	if(this._elfVersion || t._inlineStyling) {
+		editorStyle.backgroundColor = section.getComputedStyle().backgroundColor;
+	}
+
+	let rowH = section.getRowHeight(rowIndex);
+	let width = cell.getWidth();
+	if(!host.isPinnedColumn(colIndex)) {
+		let hScrollbar = host.getHScrollbar();
+		if(hScrollbar.isActive()) {
+			let paneSize = hScrollbar.getPaneSize();
+			if(width > paneSize) {
+				width = paneSize;
+			}
+		}
+	}
+	if(!t._usingBalloon || width > 208) {
+		editorStyle.width = width + "px";
+	} else {
+		editorStyle.width = "";
+	}
+
+	if(rowSpan > 1) {
+		editorStyle.height = cell.getHeight() + "px";
+	} else {
+		editorStyle.height = rowH + "px";
+	}
+
+	// Attach our popup (balloon element)
+	let parentElement = document.body;
+	if(t._compositeGrid || t._realTimeGrid) {
+		let activeGrid = t.getActiveGrid();
+		if(activeGrid) {
+			parentElement = activeGrid.getElement().parentElement;
+		}
+	}
+
+	balloonPopup.enableUIBlocking(t._uiBlocking);
+	balloonPopup.addEventListener("hidden", t._onPopupHide);
+	balloonPopup.disableAutoHiding(!t._autoHiding);
+	balloonPopup.disableHideOnScroll(true);
+	balloonPopup.attachTo(cell.getElement());
+	balloonPopup.show(true, parentElement);
+
+	this._updateEditorPopup(t._activeInCellCache, cell, host);
+
+	// Attach user element
+	if(t._customElement) {
+		t._customElementPopup.attachTo(editor);
+		t._customElementPopup.show(true, parentElement);
+		t._customElementPopup.disableAutoHiding(false);
+		arg["popupElement"] = t._customElement;
+	}
+
+	// WARNING: value-changed event from ELF v3 component may NOT be triggered due to their design flaw
+	t._setText(sourceContent, inputElement);
+	arg["initialText"] = t._initialText = sourceContent;
+
+	if(t._disablingScroll) {
+		t._freezeScrolling(host, true);
+	}
+
+	arg["autoSuggest"] = t._autoSuggest;
+	if(t._autoSuggest) {
+		if(t._autoSuggest.attach === inputElement) {
+			t._autoSuggest.attach = null; // WORKAROUND: reset attach for re-attach target
+		}
+
+		if(t._autoSuggest.parentNode !== editor ) { // if we appendChild all time when open editor, events won't work
+			editor.appendChild(t._autoSuggest);
+		}
+		t._autoSuggest.attach = inputElement;
+		t._autoSuggest.positionTarget = inputElement; // for re-position of autosuggest
+	}
+
+	// Dispatch an event for user to setup stuff
+	t._dispatch("editorOpened", arg); // User may modify the editor
+
+	inputElement.focus();
+	if(typeof inputElement.select === "function") {
+		inputElement.select();
+	}
+
+	arg["initialText"] = t._initialText = t.getText(); // After all modifications, cache the string for text change event
+	t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
 };
 
 /** Using to open row editor.
@@ -1231,98 +1334,102 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
 * @param {Object=} grid core grid object
 */
 InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
-  var t = this;
-  grid = grid || t._hosts[0];
-  // if open same row we will do nothing
-  if (t._getRowIndex(t._activeRowId) === rowIndex || !grid) {
-    return;
-  }
-
-  // close all open editor
-  t.closeRowEditor(false, grid);
-  t._commitText(false);
-  var firstInput, firstPopup;
-  var section = grid.getSection("content");
-  var dataSource = grid.getDataSource();
-  var lastIndex = (section.getColumnCount() || 0) - 1;
-  var isBottom = rowIndex + 1 >= section.getRowCount();
-  var sectionBGColor = this._elfVersion || t._inlineStyling ? section.getComputedStyle().backgroundColor : null;
-  var rowH = section.getRowHeight(rowIndex);
-
-  // if normally parent popup will be document.body
-  var parentElement = document.body;
-
-  // but if grid is _compositeGrid or _realTimeGrid then
-  // then we will use grid parent instead
-  if (t._compositeGrid || t._realTimeGrid) {
-    parentElement = grid.getElement().parentElement;
-  }
-
-  // loop for all column
-  for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
-    // ignore column that can't edit
-    if (!t.isColumnEditable(columnIndex)) {
-      continue;
-    }
-    var cell = section.getCell(columnIndex, rowIndex);
-    if (!cell || cell.hasClass("no-editing")) {
-      continue;
-    } // all verify is done
-
-    // create editor, popup, inputElement
-    var inCellCache = t._createContentEditor(columnIndex, grid);
-    var content = cell.getContent();
-    var field = t._getField(columnIndex);
-    var sourceContent = t._getSourceContent(dataSource, rowIndex, field, content);
-    var inputElement = inCellCache["inputElement"];
-    var editor = inCellCache["editor"];
-    var balloonPopup = inCellCache["balloonPopup"];
-    if (!firstInput) {
-      firstInput = inputElement;
-      firstPopup = balloonPopup;
-      balloonPopup.enableUIBlocking(t._uiBlocking);
-    } else {
-      balloonPopup.enableUIBlocking(false);
-    }
-    t._setText(sourceContent, inputElement); // WARNING: value-changed event from ELF v3 component may be triggered due to their design flaw
-
-    if (isBottom) {
-      inputElement.classList.add("bottom");
-    } else {
-      inputElement.classList.remove("bottom");
-    }
-    var editorStyle = editor.style;
-    if (sectionBGColor) {
-      editorStyle.backgroundColor = sectionBGColor;
-    }
-    editorStyle.height = rowH + "px";
-
-    // this is different from single edit mode
-    // row edit mode not support balloon mode
-    var width = section.getCellWidth(columnIndex, rowIndex);
-    editorStyle.width = width + "px";
-    editor.classList.remove("balloon");
-    balloonPopup.disableAutoHiding(true);
-    balloonPopup.disableHideOnScroll(true);
-    balloonPopup.attachTo(cell.getElement());
-    balloonPopup.show(true, parentElement);
-    this._updateEditorPopup(inCellCache, cell, grid);
-
-    // this._updateEditorLayout(inputElement); // Adjust sizes after append to the DOM
-  }
-
-  // if firstInput not undefined that mean at lease one popup is open
-  if (firstInput) {
-    firstPopup.addEventListener("hidden", t._onPopupHide);
-    t._lastActiveGrid = grid;
-    t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
-    t._activeRowId = this._getRowId(rowIndex);
-    firstInput.focus();
-    section.addClass("edit-mode");
-    if (t._disablingScroll) {
-      t._freezeScrolling(grid, true);
-    }
-  }
+	let t = this;
+	grid = grid || t._hosts[0];
+	// if open same row we will do nothing
+	if(t._getRowIndex(t._activeRowId) === rowIndex || !grid) { return; }
+
+	// close all open editor
+	t.closeRowEditor(false, grid);
+	t._commitText(false);
+
+	let firstInput, firstPopup;
+	let sectionType = "content";
+	let section = grid.getSection(sectionType);
+	let dataSource = grid.getDataSource();
+	let lastIndex = (section.getColumnCount() || 0) - 1;
+	let isBottom = (rowIndex + 1) >= section.getRowCount();
+	let sectionBGColor = (this._elfVersion || t._inlineStyling) ? section.getComputedStyle().backgroundColor : null;
+	let rowH = section.getRowHeight(rowIndex);
+
+	// if normally parent popup will be document.body
+	let parentElement = document.body;
+
+	// but if grid is _compositeGrid or _realTimeGrid then
+	// then we will use grid parent instead
+	if(t._compositeGrid || t._realTimeGrid) {
+		parentElement = grid.getElement().parentElement;
+	}
+
+	// loop for all column
+	for(let columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+		// ignore column that can't edit
+		if(!t.isColumnEditable(columnIndex)) { continue; }
+		let cell = section.getCell(columnIndex, rowIndex);
+		if(!cell || cell.hasClass("no-editing")) {
+			continue;
+		} // all verify is done
+
+		// create editor, popup, inputElement
+		let inCellCache = t._createContentEditor(columnIndex, grid);
+
+		let content = cell.getContent();
+		let field = t._getField(columnIndex);
+		let sourceContent = t._getSourceContent(dataSource, rowIndex, field, content, sectionType);
+		let inputElement = inCellCache["inputElement"];
+		let editor = inCellCache["editor"];
+		let balloonPopup = inCellCache["balloonPopup"];
+
+		if(!firstInput) {
+			firstInput = inputElement;
+			firstPopup = balloonPopup;
+			balloonPopup.enableUIBlocking(t._uiBlocking);
+		} else {
+			balloonPopup.enableUIBlocking(false);
+		}
+
+		t._setText(sourceContent, inputElement); // WARNING: value-changed event from ELF v3 component may be triggered due to their design flaw
+
+		if(isBottom) {
+			inputElement.classList.add("bottom");
+		} else {
+			inputElement.classList.remove("bottom");
+		}
+
+		let editorStyle = editor.style;
+		if(sectionBGColor) {
+			editorStyle.backgroundColor = sectionBGColor;
+		}
+		editorStyle.height = rowH + "px";
+
+		// this is different from single edit mode
+		// row edit mode not support balloon mode
+		let width = section.getCellWidth(columnIndex, rowIndex);
+		editorStyle.width = width + "px";
+		editor.classList.remove("balloon");
+
+		balloonPopup.disableAutoHiding(true);
+		balloonPopup.disableHideOnScroll(true);
+		balloonPopup.attachTo(cell.getElement());
+		balloonPopup.show(true, parentElement);
+
+		this._updateEditorPopup(inCellCache, cell, grid);
+
+		// this._updateEditorLayout(inputElement); // Adjust sizes after append to the DOM
+	}
+
+	// if firstInput not undefined that mean at lease one popup is open
+	if(firstInput) {
+		firstPopup.addEventListener("hidden", t._onPopupHide);
+		t._lastActiveGrid = grid;
+		t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
+		t._activeRowId = this._getRowId(rowIndex);
+		firstInput.focus();
+		section.addClass("edit-mode");
+		if(t._disablingScroll) {
+			t._freezeScrolling(grid, true);
+		}
+	}
 };
 
 /** Using to close row editor.
@@ -1332,105 +1439,108 @@ InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
 * @fires InCellEditingPlugin#rowEditorClosed
 */
 InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
-  var t = this;
-  var grid = t._lastActiveGrid;
-  // if no row active then do nothing
-  if (!t._activeRowId || !grid) {
-    return;
-  }
-  var rowId = t._activeRowId;
-  var rowIndex = t._getRowIndex(rowId);
-  if (rowIndex <= -1) {
-    isCommit = false; // rowIndex -1 mean row is not found or already disposed
-  } else {
-    isCommit = isCommit !== false; // default is true
-  }
-
-  var section = grid.getSection("content");
-  var columnLength = grid.getColumnCount();
-  var fieldValue = {};
-  var inCellCaches = [];
-  var inCellCache;
-
-  // in this section we just prepare data
-  for (var columnIndex = 0; columnIndex < columnLength; columnIndex++) {
-    var columnData = t._getColumnData(columnIndex, grid);
-    inCellCache = columnData && columnData["inCellCache"];
-
-    // if not have inCellCache then this column not have editor
-    if (!inCellCache) {
-      continue;
-    }
-    inCellCache.columnIndex = columnIndex;
-    inCellCaches.push(inCellCache);
-    if (isCommit) {
-      var field = t._getField(columnIndex);
-      inCellCache.field = field;
-      fieldValue[field] = this._getValue(inCellCache["inputElement"]);
-    }
-  }
-  var length = inCellCaches.length;
-  var i, e;
-
-  // dispatch event beforeRowCommit
-  if (isCommit) {
-    if (t.hasListener("beforeRowCommit")) {
-      e = {
-        grid: grid,
-        rowIndex: rowIndex,
-        fieldValue: fieldValue,
-        cancel: false,
-        rowId: t._activeRowId
-      };
-      t._dispatch("beforeRowCommit", e);
-      // e.cancel = true mean user want to cancel closeRowEditor operation
-      isCommit = !e.cancel;
-    }
-    if (isCommit) {
-      var dataSource = grid.getDataSource();
-      for (i = 0; i < length; i++) {
-        inCellCache = inCellCaches[i];
-        var value = fieldValue[inCellCache.field];
-        // set data to datasource
-        if (dataSource) {
-          // only use value from fieldValue
-          // because fieldValue maybe mutate from beforeRowCommit event
-          t._setData(dataSource, rowIndex, inCellCache.field, value);
-        }
-
-        // set value to ui if content is a build in text
-        var cell = section.getCell(inCellCache.columnIndex, rowIndex);
-        var content = cell.getContent();
-        if (content && content.classList.contains("text")) {
-          cell.setContent(value);
-        }
-      }
-    }
-  }
-  if (t.hasListener("rowEditorClosed")) {
-    e = {
-      grid: grid,
-      rowIndex: rowIndex,
-      fieldValue: fieldValue,
-      committed: isCommit
-    };
-    t._dispatch("rowEditorClosed", e);
-  }
-
-  // hide editor by remove popup from dom
-  for (i = 0; i < length; i++) {
-    var popup = inCellCaches[i].balloonPopup;
-    popup.removeEventListener("hidden", t._onPopupHide); // remove event every popup to make sure nothing left
-    popup.hide();
-  }
-  t._freezeScrolling(grid, false);
-
-  // reset status and resource
-  section.removeClass("edit-mode");
-  t._editing = false;
-  t._activeRowId = "";
-  t._lastActiveGrid = null;
-  grid.focus();
+	let t = this;
+	let grid = t._lastActiveGrid;
+	// if no row active then do nothing
+	if(!t._activeRowId || !grid) { return; }
+
+	let rowId = t._activeRowId;
+	let rowIndex = t._getRowIndex(rowId);
+	if(rowIndex <= -1) {
+		isCommit = false; // rowIndex -1 mean row is not found or already disposed
+	} else {
+		isCommit = isCommit !== false; // default is true
+	}
+
+	let section = grid.getSection("content");
+	let columnLength = grid.getColumnCount();
+	let fieldValue = {};
+	let inCellCaches = [];
+	let inCellCache;
+
+	// in this section we just prepare data
+	for(let columnIndex = 0; columnIndex < columnLength; columnIndex++) {
+		let columnData = t._getColumnData(columnIndex, grid);
+		inCellCache = columnData && columnData["inCellCache"];
+
+		// if not have inCellCache then this column not have editor
+		if(!inCellCache) { continue; }
+
+		inCellCache.columnIndex = columnIndex;
+		inCellCaches.push(inCellCache);
+
+		if(isCommit) {
+			let field = t._getField(columnIndex);
+			inCellCache.field = field;
+			fieldValue[field] = this._getValue(inCellCache["inputElement"]);
+		}
+	}
+
+	let length = inCellCaches.length;
+	let i, e;
+
+	// dispatch event beforeRowCommit
+	if(isCommit) {
+		if(t.hasListener("beforeRowCommit")) {
+			e = {
+				grid: grid,
+				rowIndex: rowIndex,
+				fieldValue: fieldValue,
+				cancel: false,
+				rowId: t._activeRowId
+			};
+			t._dispatch("beforeRowCommit", e);
+			// e.cancel = true mean user want to cancel closeRowEditor operation
+			isCommit = !e.cancel;
+		}
+
+		if(isCommit) {
+			let dataSource = grid.getDataSource();
+			for(i = 0; i < length; i++) {
+				inCellCache = inCellCaches[i];
+				let value = fieldValue[inCellCache.field];
+				// set data to datasource
+				if(dataSource) {
+					// only use value from fieldValue
+					// because fieldValue maybe mutate from beforeRowCommit event
+					t._setData(dataSource, rowIndex, inCellCache.field, value);
+				}
+
+				// set value to ui if content is a build in text
+				let cell = section.getCell(inCellCache.columnIndex, rowIndex);
+				let content = cell.getContent();
+				if(content && content.classList.contains("text")) {
+					cell.setContent(value);
+				}
+			}
+		}
+	}
+
+	if(t.hasListener("rowEditorClosed")) {
+		e = {
+			grid: grid,
+			rowIndex: rowIndex,
+			fieldValue: fieldValue,
+			committed: isCommit
+		};
+		t._dispatch("rowEditorClosed", e);
+	}
+
+	// hide editor by remove popup from dom
+	for(i = 0; i < length; i++) {
+		let popup = inCellCaches[i].balloonPopup;
+		popup.removeEventListener("hidden", t._onPopupHide); // remove event every popup to make sure nothing left
+		popup.hide();
+	}
+
+	t._freezeScrolling(grid, false);
+
+	// reset status and resource
+	section.removeClass("edit-mode");
+	t._editing = false;
+	t._activeRowId = "";
+	t._lastActiveGrid = null;
+	grid.focus();
 };
 
 /** open row editor if no any row editor opened, and close row editor if it already opened
@@ -1442,14 +1552,14 @@ InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
 * @fires InCellEditingPlugin#rowEditorClosed
 */
 InCellEditingPlugin.prototype.toggleRowEditor = function (rowIndex, isCommit, grid) {
-  if (this._getRowIndex(this._activeRowId) === rowIndex) {
-    this.closeRowEditor(isCommit, grid);
-  } else if (this._activeRowId) {
-    this.closeRowEditor(isCommit, grid);
-    this.openRowEditor(rowIndex, grid);
-  } else {
-    this.openRowEditor(rowIndex, grid);
-  }
+	if(this._getRowIndex(this._activeRowId) === rowIndex) {
+		this.closeRowEditor(isCommit, grid);
+	} else if(this._activeRowId) {
+		this.closeRowEditor(isCommit, grid);
+		this.openRowEditor(rowIndex, grid);
+	} else {
+		this.openRowEditor(rowIndex, grid);
+	}
 };
 
 /** handle grid scrolling not window scroll
@@ -1457,30 +1567,31 @@ InCellEditingPlugin.prototype.toggleRowEditor = function (rowIndex, isCommit, gr
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onScroll = function (e) {
-  this._scrolling = true;
-  if (!this._closingOnScroll && this._editing) {
-    if (this._activeInCellCache) {
-      var popup = this._activeInCellCache.balloonPopup;
-      popup.hide();
-    } else if (this._activeRowId) {
-      var grid = this.getActiveGrid() || this._lastActiveGrid;
-      var section = grid.getSection("content");
-      var lastIndex = (section.getColumnCount() || 0) - 1;
-      for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
-        var columnData = this._getColumnData(columnIndex, grid);
-        var inCellCache = columnData["inCellCache"];
-        if (!inCellCache) {
-          continue;
-        }
-        var popupCache = inCellCache["balloonPopup"];
-        if (popupCache) {
-          popupCache.hide();
-        }
-      }
-    }
-  }
-  this._onPopupHide();
-  this._scrolling = false;
+	this._scrolling = true;
+	if(!this._closingOnScroll && this._editing){
+		if(this._activeInCellCache){
+			let popup =  this._activeInCellCache.balloonPopup;
+			popup.hide();
+		}
+		else if(this._activeRowId){
+			let grid = this.getActiveGrid() || this._lastActiveGrid;
+			let section = grid.getSection("content");
+			let lastIndex = (section.getColumnCount() || 0) - 1;
+			for(let columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+				let columnData = this._getColumnData(columnIndex, grid);
+				let inCellCache = columnData["inCellCache"];
+				if(!inCellCache){
+					continue;
+				}
+				let popupCache = inCellCache["balloonPopup"];
+				if(popupCache) {
+					popupCache.hide();
+				}
+			}
+		}
+	}
+	this._onPopupHide();
+	this._scrolling = false;
 };
 
 /** handle popup hidden event
@@ -1488,152 +1599,157 @@ InCellEditingPlugin.prototype._onScroll = function (e) {
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onPopupHide = function (e) {
-  if (!this._closingOnScroll) {
-    if (this._scrolling) {
-      this.requestShowEditorPopup();
-      return;
-    }
-  }
-  // in cell editing mode, when popup hide for any reason
-  // cell editing will be close and make a commit. (depend on _autoCommitText flag)
-  // WARNING: when user scroll outside grid. it will call _onPopupHide as well
-  this._commitText(this._autoCommitText);
-
-  // for row editing mode if editor hide by any reason
-  // we will call close closeRowEditor to reset all internal flag status
-  // row editing mode not care about _autoCommitText. (for the time being)
-  this.closeRowEditor(false);
+	if(!this._closingOnScroll){
+		if(this._scrolling){
+			this.requestShowEditorPopup();
+			return;
+		}
+	}
+	// in cell editing mode, when popup hide for any reason
+	// cell editing will be close and make a commit. (depend on _autoCommitText flag)
+	// WARNING: when user scroll outside grid. it will call _onPopupHide as well
+	this._commitText(this._autoCommitText);
+
+	// for row editing mode if editor hide by any reason
+	// we will call close closeRowEditor to reset all internal flag status
+	// row editing mode not care about _autoCommitText. (for the time being)
+	this.closeRowEditor(false);
 };
 
 /** @private
 * @param {Object} event
 */
-InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function (event) {
-  var eventDetail = event.detail;
-  if (!eventDetail) {
-    return;
-  }
-  var targetSelected = eventDetail.target;
-  if (!targetSelected) {
-    return;
-  }
-  var suggestionMethod = eventDetail.method;
-  // Need to check the details of the methods, another method like a navigation, reset, clear shouldn't commit text
-  // TODO: We need to handled tab to move. Currently, the property suggestionDetail in 'beforeCommit' event doesn't handlded when we use autosuggest with tab to move.
-  if (suggestionMethod === "click" || suggestionMethod === "enter") {
-    this.setText(targetSelected.value);
-    this._commitText(true, eventDetail.suggestion);
-  }
+InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function(event) {
+	let eventDetail = event.detail;
+	if(!eventDetail) {
+		return;
+	}
+
+	let targetSelected = eventDetail.target;
+
+	if(!targetSelected) {
+		return;
+	}
+
+	let suggestionMethod = eventDetail.method;
+	// Need to check the details of the methods, another method like a navigation, reset, clear shouldn't commit text
+	// TODO: We need to handled tab to move. Currently, the property suggestionDetail in 'beforeCommit' event doesn't handlded when we use autosuggest with tab to move.
+	if(suggestionMethod === "click" || suggestionMethod === "enter") {
+		this.setText(targetSelected.value);
+		this._commitText(true, eventDetail.suggestion);
+	}
 };
 
 /** @private
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onValueChanged = function (e) {
-  if (this._activeRowId) {
-    return;
-  } // do nothing in rowEditMode
+	if(this._activeRowId) { return; } // do nothing in rowEditMode
 
-  this._commitText(true);
+	this._commitText(true);
 };
 /** @private
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onMultiSelectionValueChanged = function (e) {
-  e.currentTarget.dirty = true;
+	e.currentTarget.dirty = true;
 };
 /** @private
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onMultiSelectionEditorChanged = function (e) {
-  if (e.detail && e.detail.value === false) {
-    if (this._activePos) {
-      var inputElement = this._activePos["inputElement"];
-      if (inputElement.dirty) {
-        this._onValueChanged(e);
-        inputElement.dirty = false;
-      }
-    }
-  }
+	if(e.detail && e.detail.value === false){
+		if(this._activePos){
+			let inputElement = this._activePos["inputElement"];
+			if(inputElement.dirty){
+				this._onValueChanged(e);
+				inputElement.dirty = false;
+			}
+		}
+	}
 };
 
 /** @private
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onTextKeyDown = function (e) {
-  e.stopPropagation();
-  if (this._activeRowId) {
-    return;
-  } // do nothing in rowEditMode
-
-  // KeyCodes.ESC = 27
-  if (e.keyCode === 27) {
-    this._commitText(this._autoCommitText);
-  }
-  // KeyCodes.TAB = 9
-  if (e.keyCode === 9) {
-    // For check press tab key when user tab on auto suggest list
-    // When user tab on auto suggest, the focus should be in input and data doesn't commit
-    if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
-      this._activeInCellCache.inputElement.focus();
-    }
-    e.preventDefault(); // stop losing focus
-  }
+	e.stopPropagation();
+
+	if(this._activeRowId) { return; } // do nothing in rowEditMode
+
+	// KeyCodes.ESC = 27
+	if(e.keyCode === 27) {
+		this._commitText(this._autoCommitText);
+	}
+	// KeyCodes.TAB = 9
+	if(e.keyCode === 9) {
+		// For check press tab key when user tab on auto suggest list
+		// When user tab on auto suggest, the focus should be in input and data doesn't commit
+		if(this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+			this._activeInCellCache.inputElement.focus();
+		}
+		e.preventDefault(); // stop losing focus
+	}
 };
 
 /** @private
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
-  e.stopPropagation();
-  if (this._activeRowId) {
-    return;
-  } // do nothing in rowEditMode
-
-  if (this.hasListener("keyUp")) {
-    this._activePos["text"] = this._activePos["enteredText"] = this._activeInCellCache["inputElement"].value;
-    this._dispatch("keyUp", this._activePos);
-  }
-
-  // KeyCodes.ENTER = 13 && KeyCodes.TAB = 9
-  var tabKey = e.keyCode === 9;
-  if (tabKey || e.keyCode === 13) {
-    var text = this.getText();
-    var cellInfo = this._activePos;
-    if (this._initialText !== text) {
-      e.preventDefault(); // TODO: Check if this is needed
-      // Clear auto suggest and doesn't commit when user tab on auto suggest item
-      if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
-        this._activeInCellCache.inputElement.focus();
-        this._autoSuggest.suggestions = [];
-        return; // when use tabToMove with auto suggest, it shouldn't be effect when doesn't commit text
-      } else {
-        this._commitText(true);
-      }
-    } else {
-      this._commitText(false);
-    }
-    if (tabKey && this._tabToMove && !e.altKey && !e.ctrlKey) {
-      var host = cellInfo ? cellInfo["grid"] : null;
-      if (host && host["getCellInfo"]) {
-        var dv = host.getDataSource();
-        while (cellInfo) {
-          cellInfo = e.shiftKey ? host.getPrevCell(cellInfo) : host.getNextCell(cellInfo);
-          if (cellInfo && cellInfo["cell"]) {
-            if (dv.getRowDataAt(cellInfo["rowIndex"])) {
-              // Check group header row
-              if (this.isColumnEditable(cellInfo["colIndex"])) {
-                this.openEditor(cellInfo["colIndex"], cellInfo["rowIndex"], cellInfo["sectionName"], cellInfo["grid"]);
-                break;
-              }
-            }
-          } else {
-            cellInfo = null;
-          }
-        }
-      }
-    }
-  }
+	e.stopPropagation();
+
+	if(this._activeRowId) { return; } // do nothing in rowEditMode
+
+	if(this.hasListener("keyUp")) {
+		this._activePos["text"] = this._activePos["enteredText"] = this._activeInCellCache["inputElement"].value;
+		this._dispatch("keyUp", this._activePos);
+	}
+
+	// KeyCodes.ENTER = 13 && KeyCodes.TAB = 9
+	let tabKey = e.keyCode === 9;
+	if(tabKey || e.keyCode === 13) {
+		let text = this.getText();
+		let cellInfo = this._activePos;
+
+		if(this._initialText !== text) {
+			e.preventDefault(); // TODO: Check if this is needed
+			// Clear auto suggest and doesn't commit when user tab on auto suggest item
+			if(this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+				this._activeInCellCache.inputElement.focus();
+				this._autoSuggest.suggestions = [];
+				return; // when use tabToMove with auto suggest, it shouldn't be effect when doesn't commit text
+			} else {
+				this._commitText(true);
+			}
+		} else {
+			this._commitText(false);
+		}
+
+		if(tabKey && this._tabToMove && !e.altKey && !e.ctrlKey) {
+			let host = cellInfo ? cellInfo["grid"] : null;
+			if(host && host["getCellInfo"]) {
+				let dv = host.getDataSource();
+				while (cellInfo) {
+					cellInfo = (e.shiftKey) ? host.getPrevCell(cellInfo) : host.getNextCell(cellInfo);
+					if(cellInfo && cellInfo["cell"]) {
+						if(dv.getRowDataAt(cellInfo["rowIndex"])) { // Check group header row
+							if(this.isColumnEditable(cellInfo["colIndex"])) {
+								this.openEditor(
+									cellInfo["colIndex"],
+									cellInfo["rowIndex"],
+									cellInfo["sectionName"],
+									cellInfo["grid"]
+								);
+								break;
+							}
+						}
+					} else {
+						cellInfo = null;
+					}
+				}
+			}
+		}
+	}
 };
 /** Commit text from editor to cell.
 * @private
@@ -1641,97 +1757,103 @@ InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
 * @param {Object} suggestionDetail suggestion detail for auto suggest element
 */
 InCellEditingPlugin.prototype._commitText = function (committed, suggestionDetail) {
-  var t = this;
-  var arg = t._activePos;
-  if (!t.isEditing() || !arg) {
-    return;
-  }
-  arg["section"].removeClass("edit-mode");
-  t._editing = false;
-  var enteredValue = arg["text"] = this.getValue();
-  var groupHeader = arg["groupHeader"] || false;
-  if (committed) {
-    if (suggestionDetail) {
-      // This property is only available when the user commits text from the 'item-select' event of the auto suggest.
-      arg["suggestionDetail"] = suggestionDetail;
-    }
-    if (t.hasListener("beforeCommit")) {
-      t._dispatch("beforeCommit", arg);
-      committed = !arg["cancel"];
-      enteredValue = arg["text"];
-    }
-    if (committed && t._dataBinding && !groupHeader) {
-      var sectionSettings = arg["sectionSettings"];
-      var sectionType = sectionSettings.getType();
-      // case edit content
-      if ("content" === sectionType) {
-        if (this._realTimeGrid && arg["field"] === "X_RIC_NAME") {
-          var ricOpt = null;
-          if (suggestionDetail) {
-            var suggestionVal = suggestionDetail["value"];
-            if (suggestionVal["p"]) {
-              var permId = suggestionVal["p"]["PermId"];
-              if (permId) {
-                ricOpt = {
-                  permId: permId
-                };
-              }
-            }
-          }
-          this._realTimeGrid.setRic(arg["rowId"], enteredValue, ricOpt);
-        } else {
-          var dv = sectionSettings.getDataSource();
-          if (dv) {
-            if (this._realTimeGrid) {
-              t._setStaticData(dv, arg["rowIndex"], arg["field"], enteredValue);
-            } else {
-              t._setData(dv, arg["rowIndex"], arg["field"], enteredValue);
-            }
-          }
-        }
-        if (!t._prevContent || t._prevContent.classList.contains("text")) {
-          // Bind data only if previous content is a build in text
-          t._activeCell.setContent(enteredValue);
-        }
-      } else if ("title" === sectionType) {
-        var gridApi = this.getGridApi();
-        if (gridApi) {
-          gridApi.setColumnName(arg["colIndex"], enteredValue);
-        }
-      } else {
-        t._activeCell.setContent(enteredValue);
-      }
-    }
-  }
-  if (t.hasListener("editorClosed")) {
-    arg["canceled"] = arg["cancelled"] = !committed;
-    arg["committed"] = committed;
-    t._dispatch("editorClosed", arg);
-  }
-  if (t._activeInCellCache && t._activeInCellCache.balloonPopup) {
-    t._activeInCellCache.balloonPopup.removeEventListener("hidden", t._onPopupHide);
-    t._activeInCellCache.balloonPopup.hide();
-  }
-  Dom.removeParent(t._customElement);
-  var grid = arg["grid"];
-  if (grid) {
-    t._freezeScrolling(grid, false);
-    grid.focus();
-  }
-  var dataSource = arg["dataSource"];
-  if (dataSource) {
-    if (dataSource["stall"]) {
-      dataSource["stall"](false);
-    }
-  }
-  t._activePos = t._activeCell = t._prevContent = t._lastActiveGrid = t._activeInCellCache = null;
+	let t = this;
+	let arg = t._activePos;
+	if(!t.isEditing() || !arg) {
+		return;
+	}
+
+	arg["section"].removeClass("edit-mode");
+	t._editing = false;
+
+	let enteredValue = arg["text"] = this.getValue();
+	let groupHeader = arg["groupHeader"] || false;
+
+	if(committed){
+		if(suggestionDetail) { // This property is only available when the user commits text from the 'item-select' event of the auto suggest.
+			arg["suggestionDetail"] = suggestionDetail;
+		}
+		if(t.hasListener("beforeCommit")) {
+			t._dispatch("beforeCommit", arg);
+			committed = !arg["cancel"];
+			enteredValue = arg["text"];
+		}
+
+		if(committed && t._dataBinding && !groupHeader) {
+			let sectionSettings = arg["sectionSettings"];
+			let sectionType = sectionSettings.getType();
+			// case edit content
+			if("content" === sectionType) {
+				if(this._realTimeGrid && arg["field"] === "X_RIC_NAME") {
+					let ricOpt = null;
+					if(suggestionDetail) {
+						let suggestionVal = suggestionDetail["value"];
+						if(suggestionVal["p"]) {
+							let permId = suggestionVal["p"]["PermId"];
+							if(permId) {
+								ricOpt = { permId: permId };
+							}
+						}
+					}
+
+					this._realTimeGrid.setRic(arg["rowId"], enteredValue, ricOpt);
+				} else {
+					let dv = sectionSettings.getDataSource();
+					if(dv) {
+						if(this._realTimeGrid) {
+							t._setStaticData(dv, arg["rowIndex"], arg["field"], enteredValue);
+						} else {
+							t._setData(dv, arg["rowIndex"], arg["field"], enteredValue);
+						}
+					}
+				}
+
+				if(!t._prevContent || t._prevContent.classList.contains("text")) { // Bind data only if previous content is a build in text
+					t._activeCell.setContent(enteredValue);
+				}
+			} else if("title" === sectionType) {
+				let gridApi = this.getGridApi();
+				if(gridApi) {
+					gridApi.setColumnName(arg["colIndex"], enteredValue);
+				}
+			} else {
+				t._activeCell.setContent(enteredValue);
+			}
+		}
+	}
+
+	if(t.hasListener("editorClosed")) {
+		arg["canceled"] = arg["cancelled"] = !committed;
+		arg["committed"] = committed;
+		t._dispatch("editorClosed", arg);
+	}
+
+	if(t._activeInCellCache && t._activeInCellCache.balloonPopup) {
+		t._activeInCellCache.balloonPopup.removeEventListener("hidden", t._onPopupHide);
+		t._activeInCellCache.balloonPopup.hide();
+	}
+	Dom.removeParent(t._customElement);
+
+	let grid = arg["grid"];
+	if(grid) {
+		t._freezeScrolling(grid, false);
+		grid.focus();
+	}
+	let dataSource = arg["dataSource"];
+	if(dataSource) {
+		if(dataSource["stall"]) {
+			dataSource["stall"](false);
+		}
+	}
+
+	t._activePos = t._activeCell = t._prevContent = t._lastActiveGrid = t._activeInCellCache = null;
 };
 
 /** @private
 * @param {Event} e
 */
 InCellEditingPlugin.prototype._stopPropagation = function (e) {
-  e.stopPropagation();
+	e.stopPropagation();
 };
 
 /** Using for Check balloon mode is turn on/off.
@@ -1740,9 +1862,10 @@ InCellEditingPlugin.prototype._stopPropagation = function (e) {
 * @return {boolean}
 */
 InCellEditingPlugin.prototype._isBalloonMode = function (cell) {
-  var cellElem = cell.getElement();
-  var compStyles = cellElem ? window.getComputedStyle(cellElem) : {};
-  return this._balloonMode || compStyles.display === "none" || compStyles.visibility === "hidden";
+	let cellElem = cell.getElement();
+	let compStyles = (cellElem) ? window.getComputedStyle(cellElem) : {};
+
+	return (this._balloonMode || compStyles.display === "none" || compStyles.visibility === "hidden");
 };
 
 /** @private
@@ -1750,30 +1873,31 @@ InCellEditingPlugin.prototype._isBalloonMode = function (cell) {
 * @param {boolean} bool
 */
 InCellEditingPlugin.prototype._listenForTriggering = function (host, bool) {
-  if (bool) {
-    host.listen("dblclick", this._onDoubleClick);
-
-    // Make a comparable functionality for touchscreen
-    if (isTouchDevice()) {
-      host.listen("touchstart", this._onTouchStart);
-      host.listen("touchend", this._onTouchEnd);
-      host.listen("touchcancel", this._onTouchEnd);
-    }
-  } else {
-    host.unlisten("dblclick", this._onDoubleClick);
-    host.unlisten("touchstart", this._onTouchStart);
-    host.unlisten("touchend", this._onTouchEnd);
-    host.unlisten("touchcancel", this._onTouchEnd);
-  }
+	if(bool) {
+		host.listen("dblclick", this._onDoubleClick);
+
+		// Make a comparable functionality for touchscreen
+		if(isTouchDevice()) {
+			host.listen("touchstart", this._onTouchStart);
+			host.listen("touchend", this._onTouchEnd);
+			host.listen("touchcancel", this._onTouchEnd);
+		}
+	} else {
+		host.unlisten("dblclick", this._onDoubleClick);
+		host.unlisten("touchstart", this._onTouchStart);
+		host.unlisten("touchend", this._onTouchEnd);
+		host.unlisten("touchcancel", this._onTouchEnd);
+	}
 };
 
+
 /** Use only On-Touch-Start event on mobile devices.
 * @private
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onTouchStart = function (e) {
-  this._resetTouchTimer();
-  this._touchTimerId = setTimeout(this._onTouchTimer, this._longPressTime);
+	this._resetTouchTimer();
+	this._touchTimerId = setTimeout(this._onTouchTimer, this._longPressTime);
 };
 
 /** Use only press time on mobile devices.
@@ -1781,7 +1905,7 @@ InCellEditingPlugin.prototype._onTouchStart = function (e) {
 * @param {Object} e
 */
 InCellEditingPlugin.prototype._onTouchTimer = function (e) {
-  this._touchTimerId = 0;
+	this._touchTimerId = 0;
 };
 
 /** Use only On-Touch-End event on mobile devices.
@@ -1789,9 +1913,9 @@ InCellEditingPlugin.prototype._onTouchTimer = function (e) {
 * @param {Event} e
 */
 InCellEditingPlugin.prototype._onTouchEnd = function (e) {
-  if (!this._resetTouchTimer()) {
-    this._onDoubleClick(e); // Trigger cell editor
-  }
+	if(!this._resetTouchTimer()) {
+		this._onDoubleClick(e); // Trigger cell editor
+	}
 };
 
 /** Use only to reset timer on mobile devices.
@@ -1799,12 +1923,12 @@ InCellEditingPlugin.prototype._onTouchEnd = function (e) {
 * @return {boolean}
 */
 InCellEditingPlugin.prototype._resetTouchTimer = function () {
-  if (this._touchTimerId) {
-    clearTimeout(this._touchTimerId);
-    this._touchTimerId = 0;
-    return true;
-  }
-  return false;
+	if(this._touchTimerId) {
+		clearTimeout(this._touchTimerId);
+		this._touchTimerId = 0;
+		return true;
+	}
+	return false;
 };
 
 /** Set other elements to using like popup when editing cell.
@@ -1812,17 +1936,19 @@ InCellEditingPlugin.prototype._resetTouchTimer = function () {
 * @param {Element} elm
 */
 InCellEditingPlugin.prototype.setPopupElement = function (elm) {
-  var balloonPopup = this._activeInCellCache && this._activeInCellCache["balloonPopup"];
-  if (this._customElement) {
-    balloonPopup && balloonPopup.removeFocusElement(this._customElement);
-    this._customElementPopup.dispose();
-    this._customElementPopup = null;
-  }
-  this._customElement = elm;
-  if (this._customElement) {
-    this._customElementPopup = new Popup(this._customElement);
-    balloonPopup && balloonPopup.addFocusElement(this._customElement);
-  }
+	let balloonPopup = this._activeInCellCache && this._activeInCellCache["balloonPopup"];
+	if(this._customElement) {
+		balloonPopup && balloonPopup.removeFocusElement(this._customElement);
+		this._customElementPopup.dispose();
+		this._customElementPopup = null;
+	}
+
+	this._customElement = elm;
+
+	if(this._customElement) {
+		this._customElementPopup = new Popup(this._customElement);
+		balloonPopup && balloonPopup.addFocusElement(this._customElement);
+	}
 };
 
 /** Set content to the editor but do not commit anything to internal storage.
@@ -1830,9 +1956,9 @@ InCellEditingPlugin.prototype.setPopupElement = function (elm) {
 * @param {*} content
 */
 InCellEditingPlugin.prototype.setText = function (content) {
-  // TODO: since we have inputElement per each column
-  // we should receive column index to set value in specific column
-  this._activeInCellCache && this._setText(content, this._activeInCellCache["inputElement"]);
+	// TODO: since we have inputElement per each column
+	// we should receive column index to set value in specific column
+	this._activeInCellCache && this._setText(content, this._activeInCellCache["inputElement"]);
 };
 
 /** @private
@@ -1840,43 +1966,41 @@ InCellEditingPlugin.prototype.setText = function (content) {
 * @param {Element} inputElement editor element
 */
 InCellEditingPlugin.prototype._setText = function (content, inputElement) {
-  inputElement._origValue = content;
-  var inputTag = inputElement.tagName.toLowerCase();
-  var typeMap = InCellEditingPlugin._uiElementTypesMap;
-  if (inputTag === typeMap.checkbox) {
-    var checked = content ? !(content === "f" || content === "false") : false;
-    if (checked) {
-      inputElement.setAttribute("checked", "true");
-    } else {
-      inputElement.removeAttribute("checked");
-    }
-  } else if (inputTag === typeMap.combobox) {
-    var isMultiple = inputElement.getAttribute("multiple");
-    if (isMultiple) {
-      inputElement.values = content.split(/, */);
-    } else if (this._elfVersion <= 3) {
-      inputElement.value = "";
-      inputElement.value = {
-        value: content,
-        label: content
-      };
-    } else {
-      inputElement.value = content;
-    }
-  } else if (inputTag === typeMap.date) {
-    ElfDate.setDate(inputElement, content);
-  } else {
-    var txt = "";
-    if (content != null) {
-      if (typeof content === "string") {
-        txt = content;
-      } else {
-        // content could be false, 0, NaN or etc.
-        txt = content + "";
-      }
-    }
-    inputElement.value = txt;
-  }
+	inputElement._origValue = content;
+
+	let inputTag = inputElement.tagName.toLowerCase();
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	if(inputTag === typeMap.checkbox) {
+		let checked = (content) ? !(content === "f" || content === "false") : false;
+		if(checked) {
+			inputElement.setAttribute("checked", "true");
+		} else {
+			inputElement.removeAttribute("checked");
+		}
+	} else if(inputTag === typeMap.combobox) {
+		let isMultiple = inputElement.getAttribute("multiple");
+
+		if(isMultiple){
+			inputElement.values = content.split(/, */);
+		} else if(this._elfVersion <= 3) {
+			inputElement.value = "";
+			inputElement.value = { value: content, label: content };
+		} else {
+			inputElement.value = content;
+		}
+	} else if(inputTag === typeMap.date) {
+		ElfDate.setDate(inputElement, content);
+	} else {
+		let txt = "";
+		if(content != null) {
+			if(typeof content === "string") {
+				txt = content;
+			} else { // content could be false, 0, NaN or etc.
+				txt = content + "";
+			}
+		}
+		inputElement.value = txt;
+	}
 };
 
 /** Get current text from the editor
@@ -1885,9 +2009,12 @@ InCellEditingPlugin.prototype._setText = function (content, inputElement) {
 * @see {@link InCellEditingPlugin#getValue}
 */
 InCellEditingPlugin.prototype.getText = function () {
-  // TODO: since we have inputElement per each column
-  // we should receive column index to return text of inputElement in specific column
-  if (this._activeInCellCache) return this._getText(this._activeInCellCache["inputElement"]);else return "";
+	// TODO: since we have inputElement per each column
+	// we should receive column index to return text of inputElement in specific column
+	if(this._activeInCellCache)
+		return this._getText(this._activeInCellCache["inputElement"]);
+	else
+		return "";
 };
 
 /** @private
@@ -1895,18 +2022,18 @@ InCellEditingPlugin.prototype.getText = function () {
 * @return {string}
 */
 InCellEditingPlugin.prototype._getText = function (inputElement) {
-  var inputTag = inputElement.tagName.toLowerCase();
-  var typeMap = InCellEditingPlugin._uiElementTypesMap;
-  if (inputTag === typeMap.checkbox) {
-    return inputElement.checked + "";
-  } else if (inputTag === typeMap.combobox) {
-    if (this._elfVersion <= 3) {
-      return inputElement.value ? inputElement.value.value : "";
-    }
-  } else if (inputTag === typeMap.date) {
-    return inputElement.value + "";
-  }
-  return inputElement.value;
+	let inputTag = inputElement.tagName.toLowerCase();
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	if(inputTag === typeMap.checkbox) {
+		return inputElement.checked + "";
+	} else if(inputTag === typeMap.combobox) {
+		if(this._elfVersion <= 3) {
+			return inputElement.value ? inputElement.value.value : "";
+		}
+	} else if(inputTag === typeMap.date) {
+		return inputElement.value + "";
+	}
+	return inputElement.value;
 };
 
 /** Convert current text from the editor to value corresponding to the type of the editor
@@ -1915,9 +2042,9 @@ InCellEditingPlugin.prototype._getText = function (inputElement) {
 * @see {@link InCellEditingPlugin#getText}
 */
 InCellEditingPlugin.prototype.getValue = function () {
-  // TODO: since we have inputElement per each column
-  // we should receive column index to return value of inputElement in specific column
-  return this._activeInCellCache ? this._getValue(this._activeInCellCache["inputElement"]) : null;
+	// TODO: since we have inputElement per each column
+	// we should receive column index to return value of inputElement in specific column
+	return this._activeInCellCache ? this._getValue(this._activeInCellCache["inputElement"]) : null;
 };
 
 /** @private
@@ -1925,26 +2052,29 @@ InCellEditingPlugin.prototype.getValue = function () {
 * @return {*} Returned type is based on the type of the editor
 */
 InCellEditingPlugin.prototype._getValue = function (inputElement) {
-  var inputTag = inputElement.tagName.toLowerCase();
-  var typeMap = InCellEditingPlugin._uiElementTypesMap;
-  if (inputTag === typeMap.checkbox) {
-    return inputElement.checked ? true : false;
-  } else if (inputTag === typeMap.date) {
-    return ElfDate.getDate(inputElement);
-  } else if (inputTag === typeMap.number || typeof inputElement._origValue === "number" // Smart data conversion based orignal value
-  ) {
-    return +inputElement.value;
-  } else if (inputTag === typeMap.combobox && inputElement.getAttribute("multiple")) {
-    return inputElement.values.join(", ");
-  }
-  return this._getText(inputElement);
+	let inputTag = inputElement.tagName.toLowerCase();
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	if(inputTag === typeMap.checkbox) {
+		return inputElement.checked ? true : false;
+	} else if(inputTag === typeMap.date) {
+		return ElfDate.getDate(inputElement);
+	} else if(
+		inputTag === typeMap.number ||
+		typeof inputElement._origValue === "number" // Smart data conversion based orignal value
+	) {
+		return +inputElement.value;
+	} else if(inputTag === typeMap.combobox && inputElement.getAttribute("multiple")) {
+		return inputElement.values.join(", ");
+	}
+
+	return this._getText(inputElement);
 };
 
 /** Use to clear text in text editor.
 * @public
 */
 InCellEditingPlugin.prototype.clearText = function () {
-  this.setText("");
+	this.setText("");
 };
 
 /** Use to append text in text editor. WARNING: Only works with the text type editor
@@ -1952,11 +2082,11 @@ InCellEditingPlugin.prototype.clearText = function () {
 * @param {string} word
 */
 InCellEditingPlugin.prototype.appendText = function (word) {
-  // TODO: since we have inputElement per each column
-  // we should receive column index to return append text in specific column
-  if (word && this._activeInCellCache) {
-    this._activeInCellCache["inputElement"].value += word;
-  }
+	// TODO: since we have inputElement per each column
+	// we should receive column index to return append text in specific column
+	if(word && this._activeInCellCache) {
+		this._activeInCellCache["inputElement"].value += word;
+	}
 };
 
 /** Commit text will set text and commit to cell.
@@ -1964,10 +2094,10 @@ InCellEditingPlugin.prototype.appendText = function (word) {
 * @param {string=} word
 */
 InCellEditingPlugin.prototype.commitText = function (word) {
-  if (word) {
-    this.setText(word);
-  }
-  this._commitText(true);
+	if(word) {
+		this.setText(word);
+	}
+	this._commitText(true);
 };
 
 /** Get Balloon Popup Element to access any API provided.
@@ -1975,9 +2105,9 @@ InCellEditingPlugin.prototype.commitText = function (word) {
 * @return {Popup|null}
 */
 InCellEditingPlugin.prototype.getBalloonPopup = function () {
-  // TODO: since we have balloonPopup per each column
-  // we should receive column index to return balloonPopup in specific column
-  return this._activeInCellCache ? this._activeInCellCache["balloonPopup"] : null;
+	// TODO: since we have balloonPopup per each column
+	// we should receive column index to return balloonPopup in specific column
+	return this._activeInCellCache ? this._activeInCellCache["balloonPopup"] : null;
 };
 
 /** Get ef-autosuggest or atlas-autosuggest
@@ -1985,7 +2115,7 @@ InCellEditingPlugin.prototype.getBalloonPopup = function () {
 * @return {Element}
 */
 InCellEditingPlugin.prototype.getAutoSuggest = function () {
-  return this._autoSuggest;
+	return this._autoSuggest;
 };
 
 /**
@@ -1994,9 +2124,9 @@ InCellEditingPlugin.prototype.getAutoSuggest = function () {
 * @return {boolean} previous disablingScroll status
 */
 InCellEditingPlugin.prototype.setDisablingScroll = function (disabled) {
-  var prev = disabled;
-  this._disablingScroll = disabled;
-  return prev;
+	let prev = disabled;
+	this._disablingScroll = disabled;
+	return prev;
 };
 
 /** stop scrolling to move to prevent editor close
@@ -2005,71 +2135,77 @@ InCellEditingPlugin.prototype.setDisablingScroll = function (disabled) {
 * @param {boolean=} frozen
 */
 InCellEditingPlugin.prototype._freezeScrolling = function (grid, frozen) {
-  if (!grid) return;
-  var vs = grid.getVScrollbar();
-  var hs = grid.getHScrollbar();
-  vs && vs.freezeScrolling(frozen);
-  hs && hs.freezeScrolling(frozen);
+	if(!grid) return;
+
+	let vs = grid.getVScrollbar();
+	let hs = grid.getHScrollbar();
+	vs && vs.freezeScrolling(frozen);
+	hs && hs.freezeScrolling(frozen);
 };
 
 /** Set a timer to call onUpdateEditorPopup only once to avoid performance issue
 * @public
 */
-InCellEditingPlugin.prototype.requestShowEditorPopup = function () {
-  if (!this._editorTimerId) {
-    this._editorTimerId = setTimeout(this._onUpdateEditorPopup.bind(this), 100);
-  }
+InCellEditingPlugin.prototype.requestShowEditorPopup = function() {
+	if(!this._editorTimerId) {
+		this._editorTimerId = setTimeout(this._onUpdateEditorPopup.bind(this), 100);
+	}
 };
 
 /** @private */
-InCellEditingPlugin.prototype._onUpdateEditorPopup = function () {
-  this._editorTimerId = 0;
-  var grid = this.getActiveGrid() || this._lastActiveGrid;
-  if (!grid) {
-    return;
-  }
-  var parentElement = document.body;
-  if (this._compositeGrid || this._realTimeGrid) {
-    parentElement = grid.getElement().parentElement;
-  }
-  var rowIndex, colIndex;
-  if (this._activeInCellCache) {
-    var activePos = this._activePos;
-    if (activePos) {
-      rowIndex = activePos["rowIndex"];
-      colIndex = activePos["colIndex"];
-      var section = grid.getSection(activePos["sectionType"]);
-      var cell = section.getCell(colIndex, rowIndex);
-      var stretchedCell = section.getStretchedCell(cell, rowIndex);
-      if (stretchedCell) {
-        cell = stretchedCell;
-      }
-      if (cell) {
-        var popup = this._activeInCellCache["balloonPopup"];
-        popup.attachTo(cell.getElement());
-        popup.show(true, parentElement);
-        this._updateEditorPopup(this._activeInCellCache, cell, grid);
-      }
-    }
-  } else if (this._activeRowId) {
-    var sectionContent = grid.getSection("content");
-    rowIndex = this._getRowIndex(this._activeRowId);
-    if (sectionContent.isRowVisible(rowIndex)) {
-      var lastIndex = (sectionContent.getColumnCount() || 0) - 1;
-      for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
-        var columnData = this._getColumnData(columnIndex, grid);
-        var inCellCache = columnData["inCellCache"];
-        var cellContent = sectionContent.getCell(columnIndex, rowIndex);
-        if (!inCellCache || !cellContent) {
-          continue;
-        }
-        var popupCache = inCellCache["balloonPopup"];
-        popupCache.attachTo(cellContent.getElement());
-        popupCache.show(true, parentElement);
-        this._updateEditorPopup(inCellCache, cellContent, grid);
-      }
-    }
-  }
+InCellEditingPlugin.prototype._onUpdateEditorPopup = function() {
+	this._editorTimerId = 0;
+	let grid = this.getActiveGrid() || this._lastActiveGrid;
+	if(!grid){
+		return;
+	}
+	let parentElement = document.body;
+	if(this._compositeGrid || this._realTimeGrid) {
+		parentElement = grid.getElement().parentElement;
+	}
+
+	let rowIndex, colIndex;
+
+	if(this._activeInCellCache){
+		let activePos = this._activePos;
+		if(activePos){
+			rowIndex = activePos["rowIndex"];
+			colIndex = activePos["colIndex"];
+			let section = grid.getSection(activePos["sectionType"]);
+			let cell = section.getCell(colIndex, rowIndex);
+			let stretchedCell = section.getStretchedCell(cell, rowIndex);
+			if(stretchedCell){
+				cell = stretchedCell;
+			}
+			if(cell){
+				let popup = this._activeInCellCache["balloonPopup"];
+				popup.attachTo(cell.getElement());
+				popup.show(true, parentElement);
+
+				this._updateEditorPopup(this._activeInCellCache, cell, grid);
+			}
+		}
+	}
+	else if(this._activeRowId){
+		let sectionContent = grid.getSection("content");
+		rowIndex = this._getRowIndex(this._activeRowId);
+		if(sectionContent.isRowVisible(rowIndex)){
+			let lastIndex = (sectionContent.getColumnCount() || 0) - 1;
+			for(let columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+				let columnData = this._getColumnData(columnIndex, grid);
+				let inCellCache = columnData["inCellCache"];
+				let cellContent = sectionContent.getCell(columnIndex, rowIndex);
+				if(!inCellCache || !cellContent){
+					continue;
+				}
+				let popupCache = inCellCache["balloonPopup"];
+				popupCache.attachTo(cellContent.getElement());
+				popupCache.show(true, parentElement);
+
+				this._updateEditorPopup(inCellCache, cellContent, grid);
+			}
+		}
+	}
 };
 /** Update editor popup position and styles
 * @private
@@ -2077,82 +2213,92 @@ InCellEditingPlugin.prototype._onUpdateEditorPopup = function () {
 * @param {Object} cell
 * @param {Object} grid grid instance
 */
-InCellEditingPlugin.prototype._updateEditorPopup = function (contentEditor, cell, grid) {
-  var popup = contentEditor["balloonPopup"];
-  var editor = contentEditor["editor"];
-  var inputElement = contentEditor["inputElement"];
-  var popupElem = popup.getElement();
-  var pos = grid.getRelativePosition(cell);
-  var width = cell.getWidth();
-  var height = cell.getHeight();
-  var colRect = grid.getColumnRect(0, grid.getColumnCount());
-  var rowRect = grid.getRowRect(0, grid.getRowCount());
-  var offsetWidth = colRect.scrollViewSize;
-  var offsetHeight = rowRect.scrollViewSize;
-  var offsetLeft = 0;
-  var offsetTop = pos["sectionType"] == "content" ? rowRect.scrollViewTop : 0;
-  var newHeight = height;
-  var newWidth = width;
-  var displayStyle = "inline-block";
-  var marginLeft = 0;
-  var marginTop = 0;
-  if (colRect.leftPinnedIndex != -1) {
-    var diff = 0;
-    if (grid.getVScrollbar().isActive()) {
-      diff -= 8; // If column is left pinned, scrollbar width need to be subtracted
-    }
-
-    diff += colRect.width - colRect.scrollViewSize;
-    offsetWidth += diff;
-    offsetLeft += diff;
-  }
-  if (editor.classList.contains("balloon") && !this._activeRowId) {
-    popupElem.style.display = "";
-    editor.style.width = "";
-    editor.style.marginLeft = "";
-    editor.style.marginTop = "";
-    marginLeft = -4;
-    marginTop = -4;
-    newWidth = popup.getElement().offsetWidth;
-  }
-  if (!pos["hit"]) {
-    displayStyle = "none";
-  } else {
-    var acquiredWidth = pos["x"] + newWidth;
-    var acquiredHeight = pos["y"] - offsetTop + newHeight;
-    var isPinned = grid.isPinnedColumn(pos["colIndex"]);
-    // if column is pinned, doesn't need to calculate left overflow
-    if (!isPinned) {
-      // Left overflow
-      if (pos["x"] < offsetLeft) {
-        newWidth = newWidth - (offsetLeft - pos["x"]);
-        marginLeft = marginLeft + Math.abs(pos["x"] - offsetLeft);
-      }
-    }
-
-    // Right overflow
-    if (acquiredWidth > offsetWidth) {
-      newWidth = newWidth - (acquiredWidth - offsetWidth);
-    }
-    // Top overflow
-    if (pos["y"] < offsetTop) {
-      newHeight = newHeight + pos["y"] - offsetTop;
-      marginTop = marginTop + Math.abs(pos["y"] - offsetTop);
-    }
-    // Bottom overflow
-    if (acquiredHeight > offsetHeight) {
-      newHeight = newHeight - (acquiredHeight - offsetHeight);
-    }
-    if (newWidth < 48 && newWidth != width || newHeight < 16 && newHeight != height) {
-      displayStyle = "none";
-    }
-  }
-  popupElem.style.display = displayStyle;
-  editor.style.width = newWidth ? newWidth + "px" : "";
-  editor.style.height = newHeight ? newHeight + "px" : "";
-  editor.style.marginLeft = marginLeft ? marginLeft + "px" : 0;
-  editor.style.marginTop = marginTop ? marginTop + "px" : 0;
-  inputElement.focus();
+InCellEditingPlugin.prototype._updateEditorPopup = function(contentEditor, cell, grid) {
+	let popup = contentEditor["balloonPopup"];
+	let editor = contentEditor["editor"];
+	let inputElement = contentEditor["inputElement"];
+	let popupElem = popup.getElement();
+	let pos = grid.getRelativePosition(cell);
+	let width = cell.getWidth();
+	let height = cell.getHeight();
+	let colRect = grid.getColumnRect(0, grid.getColumnCount());
+	let rowRect = grid.getRowRect(0, grid.getRowCount());
+	let offsetWidth = colRect.scrollViewSize;
+	let offsetHeight = rowRect.scrollViewSize;
+	let offsetLeft = 0;
+	let offsetTop = pos["sectionType"] == "content" ? rowRect.scrollViewTop : 0;
+
+	let newHeight = height;
+	let newWidth = width;
+	let displayStyle =  "inline-block";
+	let marginLeft = 0;
+	let marginTop = 0;
+
+	if(colRect.leftPinnedIndex != -1){
+		let diff = 0;
+		if(grid.getVScrollbar().isActive()){
+			diff -= 8; // If column is left pinned, scrollbar width need to be subtracted
+		}
+		diff += colRect.width - colRect.scrollViewSize;
+		offsetWidth += diff;
+		offsetLeft += diff;
+	}
+
+	if(editor.classList.contains("balloon") && !this._activeRowId){
+		popupElem.style.display = "";
+		editor.style.width = "";
+		editor.style.marginLeft = "";
+		editor.style.marginTop = "";
+		marginLeft = -4;
+		marginTop = -4;
+
+		newWidth = popup.getElement().offsetWidth;
+	}
+
+	if(!pos["hit"]){
+		displayStyle = "none";
+	} else {
+		let acquiredWidth = pos["x"] + newWidth;
+		let acquiredHeight = pos["y"] - offsetTop + newHeight;
+
+		let isPinned = grid.isPinnedColumn(pos["colIndex"]);
+		// if column is pinned, doesn't need to calculate left overflow
+		if(!isPinned) {
+			// Left overflow
+			if(pos["x"] < offsetLeft){
+				newWidth = (newWidth - (offsetLeft - pos["x"]));
+				marginLeft = marginLeft + Math.abs(pos["x"] - offsetLeft);
+			}
+		}
+
+		// Right overflow
+		if(acquiredWidth > offsetWidth){
+			newWidth = newWidth - (acquiredWidth - offsetWidth);
+		}
+		// Top overflow
+		if(pos["y"] < offsetTop){
+			newHeight = (newHeight + pos["y"] - offsetTop);
+			marginTop = marginTop + Math.abs(pos["y"] - offsetTop);
+		}
+		// Bottom overflow
+		if(acquiredHeight > offsetHeight){
+			newHeight = newHeight - (acquiredHeight - offsetHeight);
+		}
+
+		if((newWidth < 48 && newWidth != width) || (newHeight < 16 && newHeight != height)){
+			displayStyle = "none";
+		}
+	}
+
+	popupElem.style.display = displayStyle;
+	editor.style.width = newWidth ? newWidth + "px" : "";
+	editor.style.height = newHeight ? newHeight + "px" : "";
+	editor.style.marginLeft = marginLeft ? marginLeft + "px" : 0;
+	editor.style.marginTop = marginTop ? marginTop + "px" : 0;
+	inputElement.focus();
 };
+
+
+
 export default InCellEditingPlugin;
-export { InCellEditingPlugin, InCellEditingPlugin as InCellEditing, InCellEditingPlugin as InCellEditingExtension };
+export { InCellEditingPlugin, InCellEditingPlugin as InCellEditing, InCellEditingPlugin as InCellEditingExtension };