@refinitiv-ui/efx-grid 6.0.126 → 6.0.128

package/lib/tr-grid-filter-input/es6/FilterInput.js

@@ -1,8 +1,9 @@
-import { Ext } from '../../tr-grid-util/es6/Ext.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
-import { ElfDate } from '../../tr-grid-util/es6/ElfDate.js';
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+import {ElfDate} from '../../tr-grid-util/es6/ElfDate.js';
 import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
+
 /** @typedef {Object} FilterInputPlugin~GridColumn
 * @description FilterInputPlugin options available in each individual grid's column
 * @property {FilterInputPlugin~ColumnOptions=} filterInput=null
@@ -51,141 +52,120 @@ import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
 * @param {string} str
 * @return {string}
 */
-
 function convertToLowerCase(str) {
-  if (typeof str === "string") {
-    return str.toLowerCase();
-  }
-
-  return "";
+	if(typeof str === "string") {
+		return str.toLowerCase();
+	}
+	return "";
 }
+
 /** @constructor
 * @extends {GridPlugin}
 * @param {FilterInputPlugin~Options=} options
 */
-
-
-var FilterInputPlugin = function FilterInputPlugin(options) {
-  this._onInputChanged = this._onInputChanged.bind(this);
-  this._onOpenedChanged = this._onOpenedChanged.bind(this);
-  this._onDateChanged = this._onDateChanged.bind(this);
-  this._onPostDataSourceChanged = this._onPostDataSourceChanged.bind(this);
-  this._onColumnAdded = this._onColumnAdded.bind(this);
-  this._onRowFilteringRetrieved = this._onRowFilteringRetrieved.bind(this);
-  this._onRowFilteringFailed = this._onRowFilteringFailed.bind(this);
-  this._onColumnFilterFailed = this._onColumnFilterFailed.bind(this);
-  this.refresh = this.refresh.bind(this);
-  this._updateUIs = this._updateUIs.bind(this);
-  this._hosts = [];
-
-  if (options) {
-    this.config({
-      "filterInput": options
-    });
-  }
+var FilterInputPlugin = function (options) {
+	this._onInputChanged = this._onInputChanged.bind(this);
+	this._onOpenedChanged = this._onOpenedChanged.bind(this);
+	this._onDateChanged = this._onDateChanged.bind(this);
+	this._onPostDataSourceChanged = this._onPostDataSourceChanged.bind(this);
+	this._onColumnAdded = this._onColumnAdded.bind(this);
+	this._onRowFilteringRetrieved = this._onRowFilteringRetrieved.bind(this);
+	this._onRowFilteringFailed = this._onRowFilteringFailed.bind(this);
+	this._onColumnFilterFailed = this._onColumnFilterFailed.bind(this);
+	this.refresh = this.refresh.bind(this);
+	this._updateUIs = this._updateUIs.bind(this);
+
+	this._hosts = [];
+	if(options) {
+		this.config({"filterInput": options});
+	}
 };
-
 Ext.inherits(FilterInputPlugin, GridPlugin);
+
 /** Filter Processor used to perform actual filtering (This extension provides only UIs).
 * @type {*}
 * @private
 */
-
 FilterInputPlugin.prototype._filterProc = null;
 /** @type {Object}
 * @private
 */
-
 FilterInputPlugin.prototype._gridConfig = null;
+
 /** Array of grid sections
 * @type {Array.<Object>}
 * @private
 */
-
 FilterInputPlugin.prototype._inputSects = null;
+
 /** @type {number}
 * @private
 */
-
 FilterInputPlugin.prototype._refreshTimer = 0;
 /** @type {number}
 * @private
 */
-
 FilterInputPlugin.prototype._uiTimer = 0;
 /** @type {boolean}
 * @private
 */
-
 FilterInputPlugin.prototype._freezeInputValue = false;
 /** @type {string|boolean}
 * @private
 */
-
 FilterInputPlugin.prototype._inputTrigger = "keyup";
+
 /** @public
 * @return {string}
 */
-
 FilterInputPlugin.prototype.getName = function () {
-  return "FilterInputPlugin"; // Read Only
+	return "FilterInputPlugin"; // Read Only
 };
 /** @public
 * @param {Object} host core grid object
 * @param {Object=} options
 */
-
-
 FilterInputPlugin.prototype.initialize = function (host, options) {
-  if (this._hosts.indexOf(host) >= 0) {
-    return;
-  }
-
-  this._hosts.push(host);
-
-  host.listen("postDataSourceChanged", this._onPostDataSourceChanged);
-  host.listen("columnAdded", this._onColumnAdded);
-  this.config(options); // In case of lazy loading
-  // var title = host.getSection("title");
-  // if(title) {
-  // 	this._onPostDataSourceChanged();
-  // }
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	host.listen("postDataSourceChanged", this._onPostDataSourceChanged);
+	host.listen("columnAdded", this._onColumnAdded);
+
+	this.config(options);
+	// In case of lazy loading
+	// var title = host.getSection("title");
+	// if(title) {
+	// 	this._onPostDataSourceChanged();
+	// }
 };
 /** @public
 * @param {Object} host core grid object
 */
-
-
 FilterInputPlugin.prototype.unload = function (host) {
-  var at = this._hosts.indexOf(host);
-
-  if (at < 0) {
-    return;
-  }
-
-  host.unlisten("postDataSourceChanged", this._onPostDataSourceChanged);
-
-  this._hosts.splice(at, 1);
-
-  if (this._inputSects && at < this._inputSects.length) {
-    this._inputSects.splice(at, 1);
-  }
-
-  if (!this._hosts.length) {
-    this._compositeGrid = this._realTimeGrid = this._filterBuilder = null;
-    this._filterProc = this._gridConfig = this._inputSects = null;
-
-    if (this._refreshTimer) {
-      clearTimeout(this._refreshTimer);
-      this._refreshTimer = 0;
-    }
-
-    if (this._uiTimer) {
-      clearTimeout(this._uiTimer);
-      this._uiTimer = 0;
-    }
-  }
+	var at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+
+	host.unlisten("postDataSourceChanged", this._onPostDataSourceChanged);
+	this._hosts.splice(at, 1);
+	if(this._inputSects && at < this._inputSects.length) {
+		this._inputSects.splice(at, 1);
+	}
+	if(!this._hosts.length) {
+		this._compositeGrid = this._realTimeGrid = this._filterBuilder = null;
+		this._filterProc = this._gridConfig = this._inputSects = null;
+
+		if(this._refreshTimer) {
+			clearTimeout(this._refreshTimer);
+			this._refreshTimer = 0;
+		}
+		if(this._uiTimer) {
+			clearTimeout(this._uiTimer);
+			this._uiTimer = 0;
+		}
+	}
 };
+
 /** Prevent built-in config
 * @public
 * @ignore
@@ -193,758 +173,636 @@ FilterInputPlugin.prototype.unload = function (host) {
 * @param {Object} options
 * @return {*}
 */
-
-
-FilterInputPlugin.prototype.beforeProcessOption = function (optionName, options) {
-  if (optionName === 'filterRow' || optionName === 'FilterRow') {
-    return false; // eslint-disable-line
-  }
-
-  return; // eslint-disable-line
+FilterInputPlugin.prototype.beforeProcessOption = function(optionName, options) {
+	if (optionName === 'filterRow' || optionName === 'FilterRow') {
+		return false; // eslint-disable-line
+	}
+	return; // eslint-disable-line
 };
 /** @private
 * @param {string} optionName
 * @param {Object} options
 */
-
-
-FilterInputPlugin.prototype._afterInit = function () {
-  // Retrieve RowFilteringPlugin is async operation
-  // onPostDataSourceChange has logic to apply default filter, which need to be done after RowFilteringPlugin is loaded
-  this._requestPlugin(this._hosts[0], "RowFilteringPlugin", this._gridConfig).then(this._onRowFilteringRetrieved)["catch"](this._onRowFilteringFailed)["finally"](this._onPostDataSourceChanged);
+FilterInputPlugin.prototype._afterInit = function() {
+	// Retrieve RowFilteringPlugin is async operation
+	// onPostDataSourceChange has logic to apply default filter, which need to be done after RowFilteringPlugin is loaded
+	this._requestPlugin(this._hosts[0], "RowFilteringPlugin", this._gridConfig)
+		.then(this._onRowFilteringRetrieved)
+		.catch(this._onRowFilteringFailed)
+		.finally(this._onPostDataSourceChanged);
 };
+
 /** @public
 * @param {Object=} options
 */
-
-
 FilterInputPlugin.prototype.config = function (options) {
-  if (!options) {
-    return;
-  }
-
-  this._gridConfig = options; // For loading dependency
-
-  var filterInputOptions = options["filterInput"];
-  this.addListener(filterInputOptions, "inputCreated");
-
-  if (filterInputOptions) {
-    if (filterInputOptions["trigger"] != null) {
-      this._inputTrigger = filterInputOptions["trigger"];
-    }
-  }
-
-  var columns = options["columns"];
-  var len = columns ? columns.length : 0;
-
-  for (var c = 0; c < len; ++c) {
-    this._retrieveColumnOption(c, columns[c]);
-  }
+	if(!options) { return; }
+	this._gridConfig = options; // For loading dependency
+
+	var filterInputOptions = options["filterInput"];
+	this.addListener(filterInputOptions, "inputCreated");
+
+	if(filterInputOptions){
+		if(filterInputOptions["trigger"] != null){
+			this._inputTrigger = filterInputOptions["trigger"];
+		}
+	}
+
+	var columns = options["columns"];
+	var len = columns ? columns.length : 0;
+	for(var c = 0; c < len; ++c) {
+		this._retrieveColumnOption(c, columns[c]);
+	}
 };
+
 /** Get a current state of grid and extension config
  * @public
  * @param {Object=} out_obj
  * @returns {!Object}
  */
-
-
 FilterInputPlugin.prototype.getConfigObject = function (out_obj) {
-  var obj = out_obj || {};
-  var columns = obj.columns;
-
-  if (!columns) {
-    columns = obj.columns = [];
-  }
-
-  var len = this.getColumnCount();
-
-  for (var i = 0; i < len; ++i) {
-    var col = columns[i];
-
-    if (!col) {
-      col = columns[i] = {};
-    }
-
-    var filterInput = col.filterInput = {};
-
-    var opt = this._getExtColumnOption(i);
-
-    if (!opt) {
-      continue;
-    }
-
-    if (opt.disabled != null) {
-      filterInput.disabled = opt.disabled;
-    }
-
-    if (opt.placeholder != null) {
-      filterInput.placeholder = opt.placeholder;
-    }
-
-    if (opt.type != null) {
-      filterInput.type = opt.type;
-    }
-
-    if (opt.entries != null) {
-      filterInput.entries = opt.entries;
-    }
-
-    if (opt.defaultValue != null) {
-      filterInput.defaultValue = opt.defaultValue;
-    }
-
-    if (opt.trigger != null) {
-      filterInput.trigger = opt.trigger;
-    }
-  }
-
-  return obj;
+	var obj = out_obj || {};
+
+	var columns = obj.columns;
+	if (!columns) {
+		columns = obj.columns = [];
+	}
+
+	var len = this.getColumnCount();
+	for(var i = 0; i < len; ++i) {
+		var col = columns[i];
+		if (!col) {
+			col = columns[i] = {};
+		}
+
+		var filterInput = col.filterInput = {};
+
+		var opt = this._getExtColumnOption(i);
+
+		if (!opt) { continue; }
+		if (opt.disabled != null) {
+			filterInput.disabled = opt.disabled;
+		}
+		if (opt.placeholder != null) {
+			filterInput.placeholder = opt.placeholder;
+		}
+		if (opt.type != null) {
+			filterInput.type = opt.type;
+		}
+		if (opt.entries != null) {
+			filterInput.entries = opt.entries;
+		}
+
+		if (opt.defaultValue != null) {
+			filterInput.defaultValue = opt.defaultValue;
+		}
+
+		if (opt.trigger != null) {
+			filterInput.trigger = opt.trigger;
+		}
+	}
+	return obj;
 };
+
 /** @private
 * @param {*} proc Filter Processor
 */
-
-
 FilterInputPlugin.prototype._onRowFilteringRetrieved = function (proc) {
-  this._gridConfig = null;
-
-  if (proc) {
-    this._filterProc = proc;
-    this.refresh();
-  }
+	this._gridConfig = null;
+	if(proc) {
+		this._filterProc = proc;
+		this.refresh();
+	}
 };
 /** @private
 * @param {*} proc Filter Processor
 * @returns {*}
 */
-
-
 FilterInputPlugin.prototype._onRowFilteringFailed = function () {
-  return this._requestPlugin(this._hosts[0], "ColumnFilterPlugin", this._gridConfig).then(this._onRowFilteringRetrieved)["catch"](this._onColumnFilterFailed); // Gracefully resolve if we fail this time
+	return this._requestPlugin(this._hosts[0], "ColumnFilterPlugin", this._gridConfig)
+		.then(this._onRowFilteringRetrieved)
+		.catch(this._onColumnFilterFailed); // Gracefully resolve if we fail this time
 };
 /** @private */
-
-
 FilterInputPlugin.prototype._onColumnFilterFailed = function () {
-  this._gridConfig = null;
+	this._gridConfig = null;
 };
+
 /** @private
 * @param {Object=} e
 */
-
-
 FilterInputPlugin.prototype._onColumnAdded = function (e) {
-  if (e.context && e.colIndex != null) {
-    this._retrieveColumnOption(e.colIndex, e.context);
-  }
-
-  this._requestUIUpdate();
+	if(e.context && e.colIndex != null) {
+		this._retrieveColumnOption(e.colIndex, e.context);
+	}
+	this._requestUIUpdate();
 };
-/** @private */
-
 
+/** @private */
 FilterInputPlugin.prototype._requestUIUpdate = function () {
-  if (!this._uiTimer) {
-    // HACK: To wait for other plugins receive columnAdded and avoid removing the wrong column filter
-    this._uiTimer = setTimeout(this._updateUIs, 50);
-  }
+	if(!this._uiTimer) { // HACK: To wait for other plugins receive columnAdded and avoid removing the wrong column filter
+		this._uiTimer = setTimeout(this._updateUIs, 50);
+	}
 };
 /** @private */
-
-
 FilterInputPlugin.prototype._updateUIs = function () {
-  this._uiTimer = 0;
-
-  if (this._inputSects) {
-    var len = this._inputSects.length;
-
-    for (var i = 0; i < len; ++i) {
-      this._createColumnInputs(this._inputSects[i], this._hosts[i]);
-    }
-  }
+	this._uiTimer = 0;
+	if(this._inputSects) {
+		var len = this._inputSects.length;
+		for(var i = 0; i < len; ++i) {
+			this._createColumnInputs(this._inputSects[i], this._hosts[i]);
+		}
+	}
 };
 /** @private
 * @param {Object=} e
 */
-
-
 FilterInputPlugin.prototype._onPostDataSourceChanged = function (e) {
-  if (this._inputSects) {
-    // TODO: Handle multiple hosts
-    return;
-  }
+	if(this._inputSects) { // TODO: Handle multiple hosts
+		return;
+	}
 
-  var len = this._hosts.length;
+	var len = this._hosts.length;
+	if (!len) {
+		return;
+	}
 
-  if (!len) {
-    return;
-  }
+	this._inputSects = [];
 
-  this._inputSects = [];
-  var rowHeight = window.getComputedStyle(this._hosts[0].getElement()).getPropertyValue('--grid-row-height'); // TODO: This should be retrieved from core grid
+	var rowHeight = window.getComputedStyle(this._hosts[0].getElement()).getPropertyValue('--grid-row-height'); // TODO: This should be retrieved from core grid
+	if (rowHeight) {
+		rowHeight = parseInt(rowHeight, 10);
+	}
 
-  if (rowHeight) {
-    rowHeight = parseInt(rowHeight, 10);
-  }
+	var host;
 
-  var host;
+	for(var i = 0; i < len; ++i) {
+		host = this._hosts[i];
+		var titles = host.getAllSections("title");
+		var lastTitle = titles[titles.length - 1];
+		var at = lastTitle ? lastTitle.getIndex() + 1 : 0;
+		var section = this._inputSects[i] = host.addSectionAt(at, "title", "filterInputs");
 
-  for (var i = 0; i < len; ++i) {
-    host = this._hosts[i];
-    var titles = host.getAllSections("title");
-    var lastTitle = titles[titles.length - 1];
-    var at = lastTitle ? lastTitle.getIndex() + 1 : 0;
-    var section = this._inputSects[i] = host.addSectionAt(at, "title", "filterInputs");
+		if (rowHeight) {
+			section.setDefaultRowHeight(rowHeight);
+		}
 
-    if (rowHeight) {
-      section.setDefaultRowHeight(rowHeight);
-    }
+		section.enableClass("filter-inputs");
+		section.addRow(1);
+	}
 
-    section.enableClass("filter-inputs");
-    section.addRow(1);
-  }
+	if(!host.getVScrollStartIndex || host.getVScrollStartIndex() >= 0) {
+		host.freezeSection(at);
+	}
 
-  if (!host.getVScrollStartIndex || host.getVScrollStartIndex() >= 0) {
-    host.freezeSection(at);
-  }
-
-  this._requestUIUpdate();
+	this._requestUIUpdate();
 };
+
 /** @private
 * @param {Object=} e
 */
-
-
 FilterInputPlugin.prototype._onDateChanged = function (e) {
-  var host = this.getRelativeGrid(e);
-
-  if (host) {
-    var pos = host.getRelativePosition(e);
-    var colIndex = pos.colIndex;
-    var dateObj = ElfDate.getDate(e.detail) || e.target.value; // TODO: Date object should be used for filtering instead of string
-
-    var dateStr = dateObj ? dateObj.toDateString().substr(4) : "";
-    this.filterColumn(colIndex, dateStr);
-  }
+	var host = this.getRelativeGrid(e);
+
+	if(host) {
+		var pos = host.getRelativePosition(e);
+		var colIndex = pos.colIndex;
+		var dateObj = ElfDate.getDate(e.detail) || e.target.value;
+		// TODO: Date object should be used for filtering instead of string
+		var dateStr = dateObj ? dateObj.toDateString().substr(4) : "";
+		this.filterColumn(colIndex, dateStr);
+	}
 };
+
 /** @private
 * @param {Object} section ILayoutGrid
 * @param {Object} host core grid object
 */
-
-
-FilterInputPlugin.prototype._createColumnInputs = function (section, host) {
-  var colCount = section.getColumnCount();
-
-  for (var c = 0; c < colCount; ++c) {
-    var cell = section.getCell(c, 0);
-    var elem = cell.getContent();
-
-    if (elem) {
-      continue;
-    }
-
-    cell.enableClass("no-sort"); // Prevent sorting
-
-    var colOpt = this._newExtColumnOption(c);
-
-    if (colOpt["disabled"]) {
-      continue;
-    }
-
-    elem = this._createFilterUI(colOpt);
-    cell.setContent(elem);
-    var arg = colOpt._filterArguments = {};
-    arg.input = elem;
-    arg.field = this._getField(c);
-    arg.cell = cell;
-    arg.grid = host;
-    var inputArgs = {
-      "input": elem,
-      "cell": cell,
-      "colIndex": c,
-      "rowIndex": 0,
-      "grid": host,
-      "section": section
-    };
-
-    if (this._compositeGrid) {
-      inputArgs['colId'] = this._compositeGrid.getColumnId(c);
-    }
-
-    this._dispatch("inputCreated", inputArgs); // To apply default filter, colOpt._filterArguments needs to be initailzed
-
-
-    var defaultValue = colOpt.defaultValue;
-
-    if (defaultValue) {
-      var elemType = convertToLowerCase(colOpt.type);
-
-      if (elemType === "date") {
-        var dateObj = ElfDate.from(defaultValue);
-        defaultValue = dateObj ? dateObj.toDateString().substr(4) : "";
-      }
-
-      if (elemType === "multiselect") {
-        var textMap = FilterInputPlugin._createMapObject(defaultValue);
-
-        this.filterColumn(c, "", textMap);
-      } else {
-        this.filterColumn(c, defaultValue);
-      }
-    }
-  }
+FilterInputPlugin.prototype._createColumnInputs = function(section, host) {
+	var colCount = section.getColumnCount();
+
+	for(var c = 0; c < colCount; ++c) {
+		var cell = section.getCell(c, 0);
+		var elem = cell.getContent();
+		if(elem) {
+			continue;
+		}
+		cell.enableClass("no-sort"); // Prevent sorting
+		var colOpt = this._newExtColumnOption(c);
+		if(colOpt["disabled"]) {
+			continue;
+		}
+		elem = this._createFilterUI(colOpt);
+
+		cell.setContent(elem);
+
+		var arg = colOpt._filterArguments = {};
+		arg.input = elem;
+		arg.field = this._getField(c);
+		arg.cell = cell;
+		arg.grid = host;
+
+		var inputArgs = {
+			"input": elem,
+			"cell": cell,
+			"colIndex": c,
+			"rowIndex": 0,
+			"grid": host,
+			"section": section
+		};
+		if (this._compositeGrid) {
+			inputArgs['colId'] = this._compositeGrid.getColumnId(c);
+		}
+
+		this._dispatch("inputCreated", inputArgs);
+
+		// To apply default filter, colOpt._filterArguments needs to be initailzed
+		var defaultValue = colOpt.defaultValue;
+		if(defaultValue){
+			var elemType = convertToLowerCase(colOpt.type);
+			if(elemType === "date"){
+				var dateObj =  ElfDate.from(defaultValue);
+				defaultValue = dateObj ? dateObj.toDateString().substr(4) : "";
+			}
+
+			if(elemType === "multiselect"){
+				var textMap = FilterInputPlugin._createMapObject(defaultValue);
+				this.filterColumn(c, "", textMap);
+			} else {
+				this.filterColumn(c, defaultValue);
+			}
+		}
+	}
 };
+
 /** @type {Object.<string, string>=}
 * @private
 */
-
-
 FilterInputPlugin._uiMap = {
-  number: "ef-input",
-  select: "ef-select",
-  multiselect: "ef-combo-box",
-  dropdown: "ef-select",
-  date: "ef-datetime-picker"
+	number: "ef-input",
+	select: "ef-select",
+	multiselect: "ef-combo-box",
+	dropdown: "ef-select",
+	date: "ef-datetime-picker"
 };
+
 /** @private
 * @param {Object} colOpt
 * @return {!Element}
 */
-
-FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
-  var elemType = convertToLowerCase(colOpt.type);
-  var defaultValue = colOpt.defaultValue;
-  var elemTrigger = colOpt.trigger != null ? colOpt.trigger : this._inputTrigger;
-  var uiTag = FilterInputPlugin._uiMap[elemType] || "input";
-
-  if (uiTag == "ef-input") {
-    if (ElfUtil.hasComponent("ef-number-field")) {
-      uiTag = "ef-number-field";
-    }
-  } else if (uiTag == "input") {
-    if (ElfUtil.hasComponent("ef-search-field")) {
-      uiTag = "ef-search-field";
-    }
-  }
-
-  var elem = document.createElement(uiTag);
-  elem.className = "filter-input";
-  elem.style.width = "100%";
-  elem.style.margin = "0";
-  elem.setAttribute("aria-label", "column filtering");
-  var placeholder = colOpt["placeholder"];
-
-  if (placeholder) {
-    elem.setAttribute("placeholder", placeholder);
-  } // Prevent trigering other actions when a user interacts with filter input
-
-
-  elem.addEventListener("keydown", FilterInputPlugin._stopPropagation, false);
-  elem.addEventListener("click", FilterInputPlugin._stopPropagation, false);
-
-  switch (uiTag) {
-    case "ef-input":
-      elem.setAttribute("type", "number");
-
-      if (elemTrigger != false && elemTrigger != "") {
-        elem.addEventListener("value-changed", this._onInputChanged, false);
-      }
-
-      break;
-
-    case "ef-number-field":
-      if (elemTrigger != false && elemTrigger != "") {
-        elem.addEventListener("value-changed", this._onInputChanged, false);
-      }
-
-      break;
-
-    case "ef-select":
-      elem.data = CoralItems.create(colOpt.entries);
-      elem.addEventListener("opened-changed", this._onOpenedChanged, false);
-
-      if (elemTrigger != false && elemTrigger != "") {
-        elem.addEventListener("value-changed", this._onInputChanged, false);
-      }
-
-      break;
-
-    case "ef-combo-box":
-      elem.multiple = true;
-      elem.data = CoralItems.create(colOpt.entries);
-
-      if (elemTrigger != false && elemTrigger != "") {
-        elem.addEventListener("value-changed", this._onInputChanged, false);
-      }
-
-      break;
-
-    case "ef-datetime-picker":
-      if (elemTrigger != false && elemTrigger != "") {
-        elem.addEventListener("value-changed", this._onDateChanged, false);
-      }
-
-      break;
-
-    case "ef-search-field":
-      if (elemTrigger != false && elemTrigger != "") {
-        if (elemTrigger == "enter") {
-          var plugin = this;
-          elem.addEventListener("keyup", function (e) {
-            if (e.key == "Enter") {
-              plugin._onInputChanged(e);
-            }
-          }, false);
-        } else {
-          elem.addEventListener("value-changed", this._onInputChanged, false);
-        }
-      }
-
-      break;
-
-    default:
-      elem.setAttribute("type", "search");
-
-      if (elemTrigger != false && elemTrigger != "") {
-        if (elemTrigger == "enter") {
-          var fip = this;
-          elem.addEventListener("keyup", function (e) {
-            if (e.key == "Enter") {
-              fip._onInputChanged(e);
-            }
-          }, false);
-        } else {
-          elem.addEventListener("keyup", this._onInputChanged, false);
-        }
-      }
-
-      break;
-  }
-
-  if (defaultValue) {
-    if (elemType === "multiselect") {
-      elem.values = defaultValue;
-    } else {
-      elem.value = defaultValue;
-    }
-  }
-
-  return elem;
+FilterInputPlugin.prototype._createFilterUI = function(colOpt) {
+	var elemType = convertToLowerCase(colOpt.type);
+	var defaultValue = colOpt.defaultValue;
+	var elemTrigger = colOpt.trigger != null ? colOpt.trigger : this._inputTrigger;
+	var uiTag = FilterInputPlugin._uiMap[elemType] || "input";
+	if (uiTag == "ef-input") {
+		if(ElfUtil.hasComponent("ef-number-field")) {
+			uiTag = "ef-number-field";
+		}
+	} else if (uiTag == "input") {
+		if (ElfUtil.hasComponent("ef-search-field")) {
+			uiTag = "ef-search-field";
+		}
+	}
+
+	var elem = document.createElement(uiTag);
+	elem.className = "filter-input";
+	elem.style.width = "100%";
+	elem.style.margin = "0";
+	elem.setAttribute("aria-label", "column filtering");
+	var placeholder = colOpt["placeholder"];
+	if(placeholder) {
+		elem.setAttribute("placeholder", placeholder);
+	}
+
+	// Prevent trigering other actions when a user interacts with filter input
+	elem.addEventListener("keydown", FilterInputPlugin._stopPropagation, false);
+	elem.addEventListener("click", FilterInputPlugin._stopPropagation, false);
+
+	switch(uiTag) {
+	case "ef-input":
+		elem.setAttribute("type", "number");
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-number-field":
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-select":
+		elem.data = CoralItems.create(colOpt.entries);
+		elem.addEventListener("opened-changed", this._onOpenedChanged, false);
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-combo-box":
+		elem.multiple = true;
+		elem.data = CoralItems.create(colOpt.entries);
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-datetime-picker":
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onDateChanged, false);
+		}
+		break;
+	case "ef-search-field":
+		if(elemTrigger != false && elemTrigger != ""){
+			if(elemTrigger == "enter"){
+				var plugin = this;
+				elem.addEventListener("keyup", function(e){
+					if(e.key == "Enter"){
+						plugin._onInputChanged(e);
+					}
+				}, false);
+			} else {
+				elem.addEventListener("value-changed", this._onInputChanged, false);
+			}
+		}
+		break;
+	default:
+		elem.setAttribute("type", "search");
+		if(elemTrigger != false && elemTrigger != ""){
+			if(elemTrigger == "enter"){
+				var fip = this;
+				elem.addEventListener("keyup", function(e){
+					if(e.key == "Enter"){
+						fip._onInputChanged(e);
+					}
+				}, false);
+			} else {
+				elem.addEventListener("keyup", this._onInputChanged, false);
+			}
+		}
+		break;
+	}
+
+	if(defaultValue){
+		if(elemType === "multiselect"){
+			elem.values = defaultValue;
+		} else {
+			elem.value = defaultValue;
+		}
+	}
+
+	return elem;
 };
+
 /** @private
 * @param {number} colIndex
 * @return {Object}
 */
-
-
-FilterInputPlugin.prototype._getExtColumnOption = function (colIndex) {
-  return this._getColumnOption(colIndex, "filterInputOption") || null;
+FilterInputPlugin.prototype._getExtColumnOption = function(colIndex) {
+	return this._getColumnOption(colIndex, "filterInputOption") || null;
 };
 /** @private
 * @param {number} colIndex
 * @return {!Object}
 */
-
-
-FilterInputPlugin.prototype._newExtColumnOption = function (colIndex) {
-  var colData = this._newColumnData(colIndex);
-
-  var option = colData["filterInputOption"];
-
-  if (!option) {
-    option = colData["filterInputOption"] = {};
-    option._comparingLogic = FilterInputPlugin._containingFilter;
-  }
-
-  return option;
+FilterInputPlugin.prototype._newExtColumnOption = function(colIndex) {
+	var colData = this._newColumnData(colIndex);
+	var option = colData["filterInputOption"];
+	if(!option) {
+		option = colData["filterInputOption"] = {};
+		option._comparingLogic = FilterInputPlugin._containingFilter;
+	}
+	return option;
 };
 /** @private
 * @param {number} colIndex
 * @param {Object} colDef
 */
-
-
-FilterInputPlugin.prototype._retrieveColumnOption = function (colIndex, colDef) {
-  var filterOption = colDef ? colDef["filterInput"] : null;
-
-  if (filterOption != null) {
-    var option = this._newExtColumnOption(colIndex);
-
-    if (filterOption) {
-      var elemType = convertToLowerCase(filterOption["type"]);
-
-      if (elemType) {
-        option["type"] = elemType;
-      }
-
-      var defaultLogic = filterOption["filterLogic"] || filterOption["defaultLogic"];
-
-      if (defaultLogic != null) {
-        if (typeof defaultLogic === "function") {
-          option._comparingLogic = defaultLogic;
-        } else if (!defaultLogic) {
-          option._comparingLogic = null;
-        }
-      }
-
-      if (elemType === "multiselect" && option._comparingLogic === FilterInputPlugin._containingFilter) {
-        option._comparingLogic = FilterInputPlugin._multiSelectionFilter;
-      }
-
-      var disabled = filterOption["disabled"];
-
-      if (disabled != null) {
-        option["disabled"] = disabled ? true : false;
-      }
-
-      var placeholder = filterOption["placeholder"];
-
-      if (typeof placeholder == "string") {
-        option["placeholder"] = placeholder;
-      }
-
-      var entries = filterOption["entries"];
-
-      if (Array.isArray(entries)) {
-        // Add Clear filter option
-        if (elemType === "select") {
-          entries.push({
-            label: 'No Filter',
-            value: 'No Filter'
-          });
-        }
-
-        option["entries"] = entries;
-      }
-
-      var defaultValue = filterOption["defaultValue"];
-
-      if (defaultValue) {
-        option["defaultValue"] = defaultValue;
-      }
-
-      var trigger = filterOption["trigger"];
-
-      if (typeof trigger == "string" || trigger == false) {
-        option["trigger"] = trigger;
-      }
-    } else {
-      option["disabled"] = true;
-    }
-  } else if (this._getExtColumnOption(colIndex)) {
-    // Reset everything to default
-    this._getColumnData(colIndex)["filterInputOption"] = null;
-  }
+FilterInputPlugin.prototype._retrieveColumnOption = function(colIndex, colDef) {
+	var filterOption = colDef ? colDef["filterInput"] : null;
+	if(filterOption != null) {
+		var option = this._newExtColumnOption(colIndex);
+		if(filterOption) {
+			var elemType = convertToLowerCase(filterOption["type"]);
+			if(elemType) {
+				option["type"] = elemType;
+			}
+
+			var defaultLogic = filterOption["filterLogic"] || filterOption["defaultLogic"];
+			if(defaultLogic != null) {
+				if(typeof defaultLogic === "function") {
+					option._comparingLogic = defaultLogic;
+				} else if(!defaultLogic) {
+					option._comparingLogic = null;
+				}
+			}
+			if(elemType === "multiselect" && option._comparingLogic === FilterInputPlugin._containingFilter){
+				option._comparingLogic = FilterInputPlugin._multiSelectionFilter;
+			}
+
+			var disabled = filterOption["disabled"];
+			if(disabled != null) {
+				option["disabled"] = disabled ? true : false;
+			}
+			var placeholder = filterOption["placeholder"];
+			if(typeof placeholder == "string") {
+				option["placeholder"] = placeholder;
+			}
+
+			var entries = filterOption["entries"];
+			if (Array.isArray(entries)) {
+				// Add Clear filter option
+				if(elemType === "select") {
+					entries.push({
+						label: 'No Filter',
+						value: 'No Filter'
+					});
+				}
+				option["entries"] = entries;
+			}
+
+			var defaultValue = filterOption["defaultValue"];
+			if(defaultValue) {
+				option["defaultValue"] = defaultValue;
+			}
+
+			var trigger = filterOption["trigger"];
+			if(typeof trigger == "string" || trigger == false) {
+				option["trigger"] = trigger;
+			}
+		} else {
+			option["disabled"] = true;
+		}
+	} else if(this._getExtColumnOption(colIndex)) {
+		// Reset everything to default
+		this._getColumnData(colIndex)["filterInputOption"] = null;
+	}
 };
+
 /** @public
 * @ignore
 * @param {number} colIndex
 * @param {string} text
 */
-
-
 FilterInputPlugin.prototype.updateUI = function (colIndex, text) {
-  if (this._freezeInputValue) return;
-  var input = this.getColumnInput(colIndex);
+	if (this._freezeInputValue) return;
 
-  if (input) {
-    input.value = text;
-  }
+	var input = this.getColumnInput(colIndex);
+	if (input) {
+		input.value = text;
+	}
 
-  this._updateColumnOption(colIndex, text);
+	this._updateColumnOption(colIndex, text);
 };
+
 /** @private
 * @param {number} colIndex
 * @param {string|number} text
 * @param {Object=} textMap
 * @return {Object} Column option
 */
-
-
 FilterInputPlugin.prototype._updateColumnOption = function (colIndex, text, textMap) {
-  var option = this._getExtColumnOption(colIndex);
-
-  if (!option) {
-    return null;
-  }
-
-  var inputText = "";
-
-  if (text || text === 0) {
-    inputText = typeof text !== "string" ? text + "" : text;
-  }
-
-  var arg = option._filterArguments;
-
-  if (arg) {
-    arg.inputText = option.inputText = inputText;
-    arg.lowerCasedText = inputText.toLowerCase();
-    arg.colIndex = colIndex;
-
-    if (textMap && !Object.keys(textMap).length) {
-      textMap = null;
-    }
-
-    arg.textMap = option.textMap = textMap;
-  }
-
-  return option;
+	var option = this._getExtColumnOption(colIndex);
+	if (!option) { return null; }
+
+	var inputText = "";
+	if (text || text === 0) {
+		inputText = typeof text !== "string" ? text + "" : text;
+	}
+	var arg = option._filterArguments;
+	if (arg) {
+		arg.inputText = option.inputText = inputText;
+		arg.lowerCasedText = inputText.toLowerCase();
+		arg.colIndex = colIndex;
+		if(textMap && !Object.keys(textMap).length){
+			textMap = null;
+		}
+		arg.textMap = option.textMap = textMap;
+	}
+	return option;
 };
+
 /** @public
 * @param {number} colIndex
 * @return {Element} Input element
 */
-
-
-FilterInputPlugin.prototype.getColumnInput = function (colIndex) {
-  if (this._inputSects) {
-    var sect = this._inputSects[0]; // TODO: Handle multi-grids
-
-    var cell = sect.getCell(colIndex, 0);
-
-    if (cell && cell.getElement()) {
-      return cell.getContent();
-    }
-  }
-
-  return null;
+FilterInputPlugin.prototype.getColumnInput = function(colIndex) {
+	if(this._inputSects) {
+		var sect = this._inputSects[0]; // TODO: Handle multi-grids
+		var cell = sect.getCell(colIndex, 0);
+		if(cell && cell.getElement()) {
+			return cell.getContent();
+		}
+	}
+	return null;
 };
+
 /** Clear input UI and remove all filters from the specified column
 * @public
 * @param {(null|number)=} colIndex=null clear filter input at specific colIndex, if null then all input will be clear.
 */
-
-
 FilterInputPlugin.prototype.removeColumnFilters = function (colIndex) {
-  var sect = this._inputSects && this._inputSects[0]; // TODO: Handle multi-grids
-
-  if (sect) {
-    if (colIndex != null) {
-      this.updateUI(colIndex, '');
-    } else {
-      var count = this.getColumnCount();
-
-      for (var index = 0; index < count; index++) {
-        this.updateUI(index, '');
-      }
-    }
-  }
-
-  this._freezeInputValue = true;
-
-  this._filterProc.removeColumnFilters(colIndex);
-
-  this._freezeInputValue = false;
+	var sect = this._inputSects && this._inputSects[0]; // TODO: Handle multi-grids
+	if (sect) {
+		if (colIndex != null) {
+			this.updateUI(colIndex, '');
+		} else {
+			var count = this.getColumnCount();
+			for (var index = 0; index < count; index++) {
+				this.updateUI(index, '');
+			}
+		}
+	}
+	this._freezeInputValue = true;
+	this._filterProc.removeColumnFilters(colIndex);
+	this._freezeInputValue = false;
 };
+
 /** Alias to {@link FilterInputPlugin#removeColumnFilters} Clear input UI and remove all filters from the specified column
 * @public
 * @function
 * @param {(null|number)=} colIndex=null clear filter input at specific colIndex, if null then all input will be clear.
 */
-
-
 FilterInputPlugin.prototype.removeColumnFilter = FilterInputPlugin.prototype.removeColumnFilters;
+
 /** @public
 * @param {number} colIndex
 * @param {*} value
 */
+FilterInputPlugin.prototype.setInputValue = function(colIndex, value) {
+	var inputElem = this.getColumnInput(colIndex);
+	if(!inputElem){
+		return;
+	}
+	var colOpt = this._getExtColumnOption(colIndex);
+	var elemType = convertToLowerCase(colOpt.type);
+
+	var dateValue;
+	if(elemType === "date"){
+		var dateObj =  ElfDate.from(value);
+		dateValue = dateObj ? dateObj.toDateString().substr(4) : "";
+	}
+
+	if(elemType === "multiselect"){
+		inputElem.values = value;
+		var textMap = FilterInputPlugin._createMapObject(value);
+		this.filterColumn(colIndex, "", textMap);
+	} else {
+		inputElem.value = value;
+		this.filterColumn(colIndex, elemType === "date" ? dateValue : value);
+	}
 
-FilterInputPlugin.prototype.setInputValue = function (colIndex, value) {
-  var inputElem = this.getColumnInput(colIndex);
-
-  if (!inputElem) {
-    return;
-  }
-
-  var colOpt = this._getExtColumnOption(colIndex);
-
-  var elemType = convertToLowerCase(colOpt.type);
-  var dateValue;
-
-  if (elemType === "date") {
-    var dateObj = ElfDate.from(value);
-    dateValue = dateObj ? dateObj.toDateString().substr(4) : "";
-  }
-
-  if (elemType === "multiselect") {
-    inputElem.values = value;
-
-    var textMap = FilterInputPlugin._createMapObject(value);
-
-    this.filterColumn(colIndex, "", textMap);
-  } else {
-    inputElem.value = value;
-    this.filterColumn(colIndex, elemType === "date" ? dateValue : value);
-  }
 };
 /** @public
 * @param {number} colIndex
 * @param {boolean=} disabled
 */
-
-
-FilterInputPlugin.prototype.disableColumnInput = function (colIndex, disabled) {
-  var inputElem = this.getColumnInput(colIndex);
-
-  if (inputElem) {
-    disabled = disabled != null ? disabled : true;
-
-    if (disabled) {
-      inputElem.setAttribute("disabled", "");
-    } else {
-      inputElem.removeAttribute("disabled");
-    }
-  }
+FilterInputPlugin.prototype.disableColumnInput = function(colIndex, disabled) {
+	var inputElem = this.getColumnInput(colIndex);
+	if(inputElem) {
+		disabled = disabled != null ? disabled : true;
+		if(disabled) {
+			inputElem.setAttribute("disabled", "");
+		} else {
+			inputElem.removeAttribute("disabled");
+		}
+	}
 };
 /** @public
 * @ignore
 * @param {number} colIndex
 * @return {Object}
 */
-
-
-FilterInputPlugin.prototype.getColumnFilter = function (colIndex) {
-  var proc = this._filterProc;
-
-  if (proc) {
-    return proc.getColumnFilterState(colIndex);
-  }
-
-  return null;
+FilterInputPlugin.prototype.getColumnFilter = function(colIndex) {
+	var proc = this._filterProc;
+	if(proc){
+	 return proc.getColumnFilterState(colIndex);
+	}
+	return null;
 };
 /** @public
 * @ignore
 * @param {number} colIndex
 * @return {Function}
 */
-
-
-FilterInputPlugin.prototype.getFilterLogic = function (colIndex) {
-  var option = this._getExtColumnOption(colIndex);
-
-  return option._comparingLogic;
+FilterInputPlugin.prototype.getFilterLogic = function(colIndex) {
+	var option = this._getExtColumnOption(colIndex);
+	return option._comparingLogic;
 };
 /** Force filtering for every column
 * @public
 * @param {number=} delayMs=0 Set delay in millisecond to avoid repeatedly filtering
 */
-
-
-FilterInputPlugin.prototype.refresh = function (delayMs) {
-  if (delayMs) {
-    if (!this._refreshTimer) {
-      this._refreshTimer = setTimeout(this.refresh, delayMs);
-    }
-
-    return;
-  }
-
-  this._refreshTimer = 0;
-
-  if (this._filterProc) {
-    this._filterProc.refresh();
-  }
+FilterInputPlugin.prototype.refresh = function(delayMs) {
+	if(delayMs) {
+		if(!this._refreshTimer) {
+			this._refreshTimer = setTimeout(this.refresh, delayMs);
+		}
+		return;
+	}
+	this._refreshTimer = 0;
+
+	if(this._filterProc) {
+		this._filterProc.refresh();
+	}
 };
 /** Change filter logic or context
 * @public
@@ -952,216 +810,166 @@ FilterInputPlugin.prototype.refresh = function (delayMs) {
 * @param {Function} func
 * @param {*=} ctx Context object that will be provided as the first parameter of the filter function
 */
-
-
-FilterInputPlugin.prototype.setFilterLogic = function (colIndex, func, ctx) {
-  if (colIndex < 0) {
-    return;
-  }
-
-  var option = this._newExtColumnOption(colIndex);
-
-  var inputText = option.inputText;
-  var textMap = option.textMap;
-
-  if (func) {
-    if (ctx != null) {
-      option._filterArguments = ctx; // WARNING: This replaces all existing argument
-    }
-  } else {
-    func = null;
-  }
-
-  option._comparingLogic = func;
-
-  if (inputText || textMap) {
-    this.filterColumn(colIndex, inputText, textMap);
-  }
+FilterInputPlugin.prototype.setFilterLogic = function(colIndex, func, ctx) {
+	if(colIndex < 0) { return; }
+
+	var option = this._newExtColumnOption(colIndex);
+	var inputText = option.inputText;
+	var textMap = option.textMap;
+
+	if(func) {
+		if(ctx != null) {
+			option._filterArguments = ctx; // WARNING: This replaces all existing argument
+		}
+	} else {
+		func = null;
+	}
+	option._comparingLogic = func;
+	if(inputText || textMap) {
+		this.filterColumn(colIndex, inputText, textMap);
+	}
 };
+
 /** Force filtering for a single column by changing filtering text
 * @public
 * @param {number} colIndex
 * @param {string} text
 * @param {Object=} textMap
 */
-
-
 FilterInputPlugin.prototype.filterColumn = function (colIndex, text, textMap) {
-  var option = this._updateColumnOption(colIndex, text, textMap);
-
-  if (!option) {
-    return;
-  } // This is because we need to toggle the icon
-
+	var option = this._updateColumnOption(colIndex, text, textMap);
+	if (!option) { return; }
 
-  this._setColumnFilter(colIndex, option);
+	// This is because we need to toggle the icon
+	this._setColumnFilter(colIndex, option);
 };
 /** @private
 * @param {number} colIndex
 * @param {Object} filterOptions
 */
+FilterInputPlugin.prototype._setColumnFilter = function(colIndex, filterOptions) {
+	var proc = this._filterProc;
+	if (proc) {
+		this._freezeInputValue = true;
+		if (proc.hasColumnFilter()) { // TODO: There should be a way to get column filters
+			proc.removeColumnFilters(colIndex); // TODO: this is slow
+		}
+		var hasFilterContent = filterOptions.inputText || filterOptions.textMap;
+		if(filterOptions._comparingLogic && hasFilterContent) {
+			var columnFilter = filterOptions._columnFilter;
+			if(!columnFilter) {
+				// The given rowData for the filter function has already been converted by RowFiltering Extension
+				columnFilter = filterOptions._columnFilter = FilterInputPlugin._compareRow.bind(null, filterOptions);
+			}
+
+			proc.addColumnFilter(colIndex, columnFilter);
+		}
+		this._freezeInputValue = false;
+	}
+};
 
 
-FilterInputPlugin.prototype._setColumnFilter = function (colIndex, filterOptions) {
-  var proc = this._filterProc;
-
-  if (proc) {
-    this._freezeInputValue = true;
-
-    if (proc.hasColumnFilter()) {
-      // TODO: There should be a way to get column filters
-      proc.removeColumnFilters(colIndex); // TODO: this is slow
-    }
-
-    var hasFilterContent = filterOptions.inputText || filterOptions.textMap;
-
-    if (filterOptions._comparingLogic && hasFilterContent) {
-      var columnFilter = filterOptions._columnFilter;
-
-      if (!columnFilter) {
-        columnFilter = this._realTimeGrid ? FilterInputPlugin._rtCompareRow : FilterInputPlugin._compareRow;
-        columnFilter = filterOptions._columnFilter = columnFilter.bind(null, filterOptions);
-      }
-
-      proc.addColumnFilter(colIndex, columnFilter);
-    }
-
-    this._freezeInputValue = false;
-  }
-};
 /** @private
 * @param {Object=} e
 */
-
-
 FilterInputPlugin.prototype._onInputChanged = function (e) {
-  FilterInputPlugin._stopPropagation(e);
-
-  var host = this.getRelativeGrid(e);
-
-  if (!host) {
-    return;
-  }
-
-  var pos = host.getRelativePosition(e);
-  var colIndex = pos.colIndex;
-  var input =
-  /** @type{Element} */
-  e.currentTarget;
-  var filterValue = input.value;
-  var textMap; // If selected No Filter option - remove select filter
-
-  if (filterValue === "No Filter" && input.tagName.indexOf("SELECT") >= 0) {
-    filterValue = null;
-  } else if (input.tagName.indexOf("COMBO-BOX") >= 0) {
-    textMap = FilterInputPlugin._createMapObject(input.values);
-  }
-
-  this.filterColumn(colIndex, filterValue, textMap);
+	FilterInputPlugin._stopPropagation(e);
+
+	var host = this.getRelativeGrid(e);
+	if(!host) { return; }
+	var pos = host.getRelativePosition(e);
+	var colIndex = pos.colIndex;
+
+	var input = /** @type{Element} */(e.currentTarget);
+	var filterValue = input.value;
+	var textMap;
+
+	// If selected No Filter option - remove select filter
+	if (filterValue === "No Filter" && input.tagName.indexOf("SELECT") >= 0) {
+		filterValue = null;
+	}
+	else if(input.tagName.indexOf("COMBO-BOX") >= 0){
+		textMap = FilterInputPlugin._createMapObject(input.values);
+	}
+
+	this.filterColumn(colIndex, filterValue, textMap);
 };
 /** @private
 * @param {Object=} e
 * @description WORKAROUND:: set pointer events none to ef-select when options popup opened.
 * this will make ef-select can close popup when click at ef-select
 */
-
-
 FilterInputPlugin.prototype._onOpenedChanged = function (e) {
-  if (e.detail.value) {
-    //open
-    e.currentTarget.style.pointerEvents = "none";
-  } else {
-    //close
-    var ect = e.currentTarget;
-    setTimeout(function () {
-      ect.style.pointerEvents = "";
-    });
-  }
+	if (e.detail.value) { //open
+		e.currentTarget.style.pointerEvents = "none";
+	} else { //close
+		var ect = e.currentTarget;
+		setTimeout(function(){
+			ect.style.pointerEvents = "";
+		});
+	}
 };
+
 /** @private
 * @param {Object=} e
 */
-
-
 FilterInputPlugin._stopPropagation = function (e) {
-  if (e) {
-    e.stopPropagation();
-  }
+	if(e) {
+		e.stopPropagation();
+	}
 };
-/** @private
-* @function
-* @param {Object} filterOptions
-* @param {Object} rowData
-* @param {string|number} rid
-* @return {boolean}
-*/
 
-
-FilterInputPlugin._compareRow = function (filterOptions, rowData, rid) {
-  return filterOptions._comparingLogic(filterOptions._filterArguments, rowData);
-};
 /** @private
 * @function
 * @param {Object} filterOptions
-* @param {Object} rowData
+* @param {Object} rowData The given rowData has already been converted by RowFiltering Extension
 * @param {string|number} rid
 * @return {boolean}
 */
-
-
-FilterInputPlugin._rtCompareRow = function (filterOptions, rowData, rid) {
-  return filterOptions._comparingLogic(filterOptions._filterArguments, rowData["ROW_DEF"].getRowData());
+FilterInputPlugin._compareRow = function(filterOptions, rowData, rid) {
+	return filterOptions._comparingLogic(filterOptions._filterArguments, rowData);
 };
+
 /** @private
 * @function
 * @param {Array<string|number>} ary
 * @return {Object}
 */
-
-
-FilterInputPlugin._createMapObject = function (ary) {
-  var textMap = {};
-
-  if (ary) {
-    var count = ary.length;
-
-    for (var i = 0; i < count; i++) {
-      var key = ary[i];
-
-      if (key == null || key === "") {
-        continue;
-      }
-
-      var str = FilterInputPlugin._transformToLowercaseString(key);
-
-      textMap[str] = true;
-    }
-  }
-
-  return textMap;
+FilterInputPlugin._createMapObject = function(ary) {
+	var textMap = {};
+	if(ary){
+		var count  = ary.length;
+		for(var i = 0; i < count; i++){
+			var key = ary[i];
+			if(key == null || key === ""){
+				continue;
+			}
+			var str = FilterInputPlugin._transformToLowercaseString(key);
+			textMap[str] = true;
+		}
+	}
+	return textMap;
 };
+
 /** @private
 * @function
 * @param {Object} data
 * @return {string}
 */
-
-
-FilterInputPlugin._transformToLowercaseString = function (data) {
-  var dataStr = "";
-
-  if (typeof data != "string") {
-    if (data instanceof Date) {
-      dataStr = data.toDateString().toLowerCase();
-    } else {
-      dataStr = (data + "").toLocaleLowerCase();
-    }
-  } else if (data) {
-    dataStr = data.toLowerCase();
-  }
-
-  return dataStr;
+FilterInputPlugin._transformToLowercaseString = function(data) {
+	var dataStr = "";
+	if(typeof data != "string") {
+		if(data instanceof Date) {
+			dataStr = data.toDateString().toLowerCase();
+		} else {
+			dataStr = (data + "").toLocaleLowerCase();
+		}
+	} else if(data) {
+		dataStr = data.toLowerCase();
+	}
+	return dataStr;
 };
+
 /** Default Filter Logic
 * @private
 * @function
@@ -1169,34 +977,28 @@ FilterInputPlugin._transformToLowercaseString = function (data) {
 * @param {Object} rowData
 * @return {boolean}
 */
-
-
-FilterInputPlugin._containingFilter = function (e, rowData) {
-  var str = e.lowerCasedText || e.inputText;
-  var eventType = e.input && e.input.type;
-
-  if (str) {
-    var data = rowData[e.field];
-
-    if (data != null) {
-      var dataStr = FilterInputPlugin._transformToLowercaseString(data);
-
-      if (dataStr) {
-        if (eventType === "number") {
-          // Custom check if type is number
-          return Number(dataStr) === Number(str);
-        } else {
-          // Normal check if type is not a number
-          return dataStr.indexOf(str) >= 0;
-        }
-      }
-    }
-
-    return false;
-  }
-
-  return true;
+FilterInputPlugin._containingFilter = function(e, rowData) {
+	var str = e.lowerCasedText || e.inputText;
+	var eventType = e.input && e.input.type;
+	if(str) {
+		var data = rowData[e.field];
+		if(data != null) {
+			var dataStr =  FilterInputPlugin._transformToLowercaseString(data);
+			if (dataStr) {
+				if (eventType === "number") {
+					// Custom check if type is number
+					return Number(dataStr) === Number(str);
+				} else {
+					// Normal check if type is not a number
+					return dataStr.indexOf(str) >= 0;
+				}
+			}
+		}
+		return false;
+	}
+	return true;
 };
+
 /** Filter Logic for multi selection input
 * @private
 * @function
@@ -1204,27 +1006,22 @@ FilterInputPlugin._containingFilter = function (e, rowData) {
 * @param {Object} rowData
 * @return {boolean}
 */
+FilterInputPlugin._multiSelectionFilter = function(e, rowData) {
+	var inputMap = e.textMap;
+	if(inputMap) {
+		var data = rowData[e.field];
+		if(data != null) {
+			var dataStr =  FilterInputPlugin._transformToLowercaseString(data);
+			if (dataStr) {
+				return inputMap[dataStr] ? true : false;
+			}
+		}
+		return false;
+	}
+	return true;
+};
 
 
-FilterInputPlugin._multiSelectionFilter = function (e, rowData) {
-  var inputMap = e.textMap;
-
-  if (inputMap) {
-    var data = rowData[e.field];
-
-    if (data != null) {
-      var dataStr = FilterInputPlugin._transformToLowercaseString(data);
-
-      if (dataStr) {
-        return inputMap[dataStr] ? true : false;
-      }
-    }
-
-    return false;
-  }
-
-  return true;
-};
 
 export default FilterInputPlugin;
-export { FilterInputPlugin, FilterInputPlugin as FilterInput, FilterInputPlugin as FilterInputExtension };
+export { FilterInputPlugin, FilterInputPlugin as FilterInput, FilterInputPlugin as FilterInputExtension };