@syncfusion/ej2-dropdowns 24.1.43 → 24.1.45-12082

package/dist/ts/combo-box/combo-box.ts

@@ -0,0 +1,1099 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path='../drop-down-list/drop-down-list-model.d.ts'/>
+import { EventHandler, Property, Event, EmitType, addClass, Browser, KeyboardEventArgs, removeClass, detach } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';
+import { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';
+import { FilteringEventArgs } from '../drop-down-base/drop-down-base';
+import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
+import { ComboBoxModel } from '../combo-box/combo-box-model';
+import { Search } from '../common/incremental-search';
+import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+const SPINNER_CLASS: string = 'e-atc-spinner-icon';
+
+dropDownListClasses.root = 'e-combobox';
+const inputObject: InputObject = {
+    container: null,
+    buttons: []
+};
+/**
+ * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.
+ * ```html
+ * <select id="list">
+ *      <option value='1'>Badminton</option>
+ *      <option value='2'>Basketball</option>
+ *      <option value='3'>Cricket</option>
+ *      <option value='4'>Football</option>
+ *      <option value='5'>Tennis</option>
+ * </select>
+ * ```
+ * ```typescript
+ *   let games:ComboBox = new ComboBox();
+ *   games.appendTo("#list");
+ * ```
+ */
+@NotifyPropertyChanges
+export class ComboBox extends DropDownList {
+    /**
+     * Specifies whether suggest a first matched item in input when searching. No action happens when no matches found.
+     *
+     * @default false
+     */
+    @Property(false)
+    public autofill: boolean;
+    /**
+     * Specifies whether the component allows user defined value which does not exist in data source.
+     *
+     * @default true
+     */
+    @Property(true)
+    public allowCustom: boolean;
+    /**
+     * Allows additional HTML attributes such as title, name, etc., and
+     * accepts n number of attributes in a key-value pair format.
+     *
+     * {% codeBlock src='combobox/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     * @deprecated
+     */
+    @Property({})
+    public htmlAttributes: { [key: string]: string };
+    /**
+     * When allowFiltering is set to true, show the filter bar (search box) of the component.
+     * The filter action retrieves matched items through the `filtering` event based on
+     * the characters typed in the search TextBox.
+     * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
+     *
+     * {% codeBlock src="combobox/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/allow-filtering-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default false
+     * @deprecated
+     */
+    @Property(false)
+    public allowFiltering: boolean;
+    /**
+     * Accepts the external `Query`
+     * that execute along with [`data processing`](../../combo-box/data-binding).
+     *
+     * {% codeBlock src='combobox/query/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     * @deprecated
+     */
+    @Property(null)
+    public query: Query;
+    /**
+     * Gets or sets the index of the selected item in the component.
+     *
+     * {% codeBlock src="combobox/index-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/index-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default null
+     * @deprecated
+     */
+    @Property(null)
+    public index: number;
+    /**
+     * Specifies whether to show or hide the clear button.
+     * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
+     *
+     * @default true
+     */
+    @Property(true)
+    public showClearButton: boolean;
+    /**
+     * Enable or disable rendering component in right to left direction.
+     *
+     * @default false
+     * @deprecated
+     */
+    @Property(false)
+    public enableRtl: boolean;
+    /**
+     * Triggers on set a
+     * [`custom value`](../../combo-box/getting-started#custom-values) to this component.
+     *
+     * @event customValueSpecifier
+     */
+    @Event()
+    public customValueSpecifier: EmitType<CustomValueSpecifierEventArgs>;
+
+    /**
+     * Triggers on typing a character in the component.
+     * > For more details about the filtering refer to [`Filtering`](../../combo-box/filtering) documentation.
+     *
+     * @event filtering
+     */
+    @Event()
+    public filtering: EmitType<FilteringEventArgs>;
+
+    /**
+     * Not applicable to this component.
+     *
+     * @default null
+     * @aspType string
+     * @private
+     */
+    @Property(null)
+    public valueTemplate: string | Function;
+    /**
+     * Specifies whether to display the floating label above the input element.
+     * Possible values are:
+     * * Never: The label will never float in the input when the placeholder is available.
+     * * Always: The floating label will always float above the input.
+     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
+     *
+     * {% codeBlock src="combobox/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/float-label-type-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
+     * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
+     * @isEnumeration true
+     * @deprecated
+     */
+    @Property('Never')
+    public floatLabelType: FloatLabelType;
+    /**
+     * Not applicable to this component.
+     *
+     * @default null
+     * @private
+     * @deprecated
+     */
+    @Property(null)
+    public filterBarPlaceholder: string;
+    /**
+     * Sets CSS classes to the root element of the component that allows customization of appearance.
+     *
+     * @default null
+     * @deprecated
+     */
+    @Property(null)
+    public cssClass: string;
+    /**
+     * Accepts the template design and assigns it to the header container of the popup list.
+     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
+     *
+     * @default null
+     * @aspType string
+     * @deprecated
+     */
+    @Property(null)
+    public headerTemplate: string | Function;
+    /**
+     * Accepts the template design and assigns it to the footer container of the popup list.
+     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
+     *
+     * @default null
+     * @aspType string
+     * @deprecated
+     */
+    @Property(null)
+    public footerTemplate: string | Function;
+    /**
+     * Specifies a short hint that describes the expected value of the DropDownList component.
+     *
+     * @default null
+     * @deprecated
+     */
+    @Property(null)
+    public placeholder: string;
+    /**
+     * Specifies the width of the component. By default, the component width sets based on the width of
+     * its parent container. You can also set the width in pixel values.
+     *
+     * @default '100%'
+     * @aspType string
+     * @deprecated
+     */
+    @Property('100%')
+    public width: string | number;
+    /**
+     * Specifies the height of the popup list.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
+     *
+     * @default '300px'
+     * @aspType string
+     * @deprecated
+     */
+    @Property('300px')
+    public popupHeight: string | number;
+    /**
+     * Specifies the width of the popup list. By default, the popup width sets based on the width of
+     * the component.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
+     *
+     * @default '100%'
+     * @aspType string
+     * @deprecated
+     */
+    @Property('100%')
+    public popupWidth: string | number;
+    /**
+     * When set to true, the user interactions on the component are disabled.
+     *
+     * @default false
+     * @deprecated
+     */
+    @Property(false)
+    public readonly: boolean;
+    /**
+     * Gets or sets the display text of the selected item in the component.
+     *
+     * @default null
+     * @deprecated
+     */
+    @Property(null)
+    public text: string;
+    /**
+     * Gets or sets the value of the selected item in the component.
+     *
+     * @default null
+     * @isGenericType true
+     * @deprecated
+     */
+    @Property(null)
+    public value: number | string | boolean;
+    /**
+     * *Constructor for creating the component
+     *
+     * @param {ComboBoxModel} options - Specifies the ComboBox model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    public constructor(options?: ComboBoxModel, element?: string | HTMLElement) {
+        super(options, element);
+    }
+    /**
+     * Initialize the event handler
+     *
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void {
+        super.preRender();
+    }
+
+    protected getLocaleName(): string {
+        return 'combo-box';
+    }
+
+    protected wireEvent(): void {
+        if (this.getModuleName() === 'combobox') {
+            EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur, this);
+            EventHandler.add(this.inputWrapper.container, 'blur', this.onBlurHandler, this);
+        }
+        if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {
+            EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick, this);
+        }
+        EventHandler.add(this.inputElement, 'focus', this.targetFocus, this);
+        if (!this.readonly) {
+            EventHandler.add(this.inputElement, 'input', this.onInput, this);
+            EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);
+            EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);
+            EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);
+            EventHandler.add(<HTMLElement & Window>window, 'resize',this.windowResize, this);
+        }
+        this.bindCommonEvent();
+    }
+
+    private preventBlur(e: MouseEvent): void {
+        if ((!this.allowFiltering && document.activeElement !== this.inputElement &&
+            !document.activeElement.classList.contains(dropDownListClasses.input) && Browser.isDevice || !Browser.isDevice)) {
+            e.preventDefault();
+        }
+    }
+
+    protected onBlurHandler(e: MouseEvent): void {
+        const inputValue: string = this.inputElement && this.inputElement.value === '' ?
+            null : this.inputElement && this.inputElement.value;
+        if (!isNullOrUndefined(this.listData) && !isNullOrUndefined(inputValue) && inputValue !== this.text) {
+            this.customValue(e);
+        }
+        super.onBlurHandler(e);
+    }
+
+    protected targetElement(): HTMLElement | HTMLInputElement {
+        return this.inputElement;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    protected setOldText(text: string): void {
+        Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+        this.customValue();
+        this.removeSelection();
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    protected setOldValue(value: string | number): void {
+        if (this.allowCustom) {
+            this.valueMuteChange(this.value);
+        } else {
+            this.valueMuteChange(null);
+        }
+        this.removeSelection();
+        this.setHiddenValue();
+    }
+    private valueMuteChange(value: string | number | boolean): void {
+        const inputValue: string = isNullOrUndefined(value) ? null : value.toString();
+        Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
+        this.setProperties({ value: value, text: value, index: null }, true);
+        this.activeIndex = this.index;
+        const fields: FieldSettingsModel = this.fields;
+        const dataItem: { [key: string]: string | Object } = {};
+        dataItem[fields.text] = isNullOrUndefined(value) ? null : value.toString();
+        dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();
+        this.itemData = <{ [key: string]: Object }>dataItem;
+        this.item = null;
+        if (this.previousValue !== this.value) {
+            this.detachChangeEvent(null);
+        }
+    }
+    protected updateValues(): void {
+        if (!isNullOrUndefined(this.value)) {
+            const li: Element = this.getElementByValue(this.value);
+            if (li) {
+                this.setSelection(li, null);
+            } else if (this.allowCustom) {
+                this.valueMuteChange(this.value);
+            } else {
+                this.valueMuteChange(null);
+            }
+        } else if (this.text && isNullOrUndefined(this.value)) {
+            const li: Element = this.getElementByText(this.text);
+            if (li) {
+                this.setSelection(li, null);
+            } else {
+                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+                this.customValue();
+            }
+        } else {
+            this.setSelection(this.liCollections[this.activeIndex], null);
+        }
+        this.setHiddenValue();
+        Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+    }
+
+    protected updateIconState(): void {
+        if (this.showClearButton) {
+            if (this.inputElement && this.inputElement.value !== '' && !this.readonly) {
+                removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);
+            } else {
+                addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);
+            }
+        }
+    }
+
+    protected getAriaAttributes(): { [key: string]: string } {
+        const ariaAttributes: { [key: string]: string } = {
+            'role': 'combobox',
+            'aria-autocomplete': 'both',
+            'aria-labelledby': this.hiddenElement.id,
+            'aria-expanded': 'false',
+            'aria-readonly': this.readonly.toString(),
+            'autocomplete': 'off',
+            'autocapitalize': 'off',
+            'spellcheck': 'false'
+        };
+        return ariaAttributes;
+    }
+
+    protected searchLists(e: KeyboardEventArgs | MouseEvent): void {
+        this.isTyped = true;
+        if (this.isFiltering()) {
+            super.searchLists(e);
+            if (this.ulElement && this.filterInput.value.trim() === '') {
+                this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));
+            }
+        } else {
+            if (this.ulElement && this.inputElement.value === '' && this.preventAutoFill) {
+                this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));
+            }
+            this.incrementalSearch(e as KeyboardEventArgs);
+        }
+    }
+
+    protected getNgDirective(): string {
+        return 'EJS-COMBOBOX';
+    }
+
+    protected setSearchBox(): InputObject {
+        this.filterInput = this.inputElement;
+        let searchBoxContainer = (this.isFiltering() || ((this as any).isReact && this.getModuleName() === 'combobox'))? this.inputWrapper : inputObject;
+        return searchBoxContainer;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    protected onActionComplete(ulElement: HTMLElement, list: { [key: string]: Object }[], e?: Object, isUpdated?: boolean): void {
+        super.onActionComplete(ulElement, list, e);
+        if (this.isSelectCustom) {
+            this.removeSelection();
+        }
+        if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {
+            setTimeout(() => {
+                this.inlineSearch();
+            });
+        }
+    }
+
+    protected getFocusElement(): Element {
+        const dataItem: { [key: string]: string } = this.isSelectCustom ? { text: '' } : this.getItemData();
+        const selected: HTMLElement = !isNullOrUndefined(this.list) ? <HTMLElement>this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
+        const isSelected: boolean = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);
+        if (isSelected) {
+            return selected;
+        }
+        if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
+            !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
+            const inputValue: string = this.inputElement.value;
+            const dataSource: { [key: string]: Object }[] = this.sortedData as { [key: string]: Object }[];
+            const type: string = this.typeOfData(dataSource).typeof as string;
+            let activeItem: { [key: string]: Element | number } =
+                Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {
+                var updatingincrementalindex = false;
+                if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                    updatingincrementalindex = true;
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    if (this.incrementalEndIndex == 0) {
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                    }
+                    else {
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    }
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                }
+                if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                    this.updateIncrementalView(0, this.itemCount);
+                }
+                activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
+                while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
+                    if (!isNullOrUndefined(activeItem)) {
+                        break;
+                    }
+                    if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {
+                        this.incrementalStartIndex = 0;
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                        break;
+                    }
+                }
+                if (activeItem.index) {
+                    if ((!(this.viewPortInfo.startIndex >= (activeItem.index as number))) || (!((activeItem.index as number) >= this.viewPortInfo.endIndex))) {
+                        var startIndex = (activeItem.index as number) - ((this.itemCount / 2) - 2) > 0 ? (activeItem.index as number) - ((this.itemCount / 2) - 2) : 0;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        if(startIndex != this.viewPortInfo.startIndex) {
+                            this.updateIncrementalView(startIndex, endIndex);
+                        }
+                    }
+                }
+                if (!isNullOrUndefined(activeItem.item)) {
+                    var index_1 = this.getIndexByValue((activeItem.item as Element).getAttribute('data-value')) - this.skeletonCount;
+                    if (index_1 > this.itemCount / 2) {
+                        var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                    activeItem.item = this.getElementByValue((activeItem.item as Element).getAttribute('data-value'));
+                }
+                else {
+                    this.updateIncrementalView(0, this.itemCount);
+                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                     (this.list.getElementsByClassName('e-virtual-ddl-content')[0] as any).style = this.getTransformValues();
+                    this.list.scrollTop = 0;
+                }
+                if(activeItem && activeItem.item){
+                    activeItem.item = this.getElementByValue((activeItem.item as Element).getAttribute('data-value'));
+                }
+            }
+            const activeElement: Element = activeItem.item as Element;
+            if (!isNullOrUndefined(activeElement)) {
+                const count: number = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
+                const height: number = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);
+                if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {
+                    this.removeFocus();
+                    const fixedHead: number = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;
+                    if (!this.enableVirtualization) {
+                        this.list.scrollTop = count * height + fixedHead;
+                    } else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        (this.list.getElementsByClassName('e-virtual-ddl-content')[0] as any).style = this.getTransformValues();
+                        if (this.enableVirtualization && !this.fields.groupBy) {
+                            var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? (activeElement as HTMLElement).offsetTop + (this.virtualListInfo.startIndex * (activeElement as HTMLElement).offsetHeight) : (activeElement as HTMLElement).offsetTop;
+                            this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * (activeElement as HTMLElement).offsetHeight);
+                        }
+                    }
+                    addClass([activeElement], dropDownListClasses.focus);
+                }
+            } else {
+                if (this.isSelectCustom && this.inputElement.value.trim() !== '') {
+                    this.removeFocus();
+                    if (!this.enableVirtualization) {
+                        this.list.scrollTop = 0;
+                    }
+                }
+            }
+            return activeElement;
+        } else {
+            return null;
+        }
+    }
+
+    protected setValue(e?: KeyboardEventArgs): boolean {
+        if (e && e.type === 'keydown' && e.action === 'enter') {
+            this.removeFillSelection();
+        }
+        if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {
+            this.preventAutoFill = false;
+            this.inlineSearch(e);
+            return false;
+        } else {
+            return super.setValue(e);
+        }
+    }
+    protected checkCustomValue(): void {
+        this.itemData = this.getDataByValue(this.value);
+        const dataItem: { [key: string]: string } = this.getItemData();
+        if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
+            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
+        }
+    }
+    /**
+     * Shows the spinner loader.
+     *
+     * @returns {void}
+     * @deprecated
+     */
+    public showSpinner(): void {
+        if (isNullOrUndefined(this.spinnerElement)) {
+            this.spinnerElement = (this.getModuleName() === 'autocomplete') ? (this.inputWrapper.buttons[0] ||
+                this.inputWrapper.clearButton ||
+                Input.appendSpan('e-input-group-icon ' + SPINNER_CLASS, this.inputWrapper.container, this.createElement)) :
+                (this.inputWrapper.buttons[0] || this.inputWrapper.clearButton);
+            addClass([this.spinnerElement], dropDownListClasses.disableIcon);
+            createSpinner(
+                {
+                    target: this.spinnerElement,
+                    width: Browser.isDevice ? '16px' : '14px'
+                },
+                this.createElement);
+            showSpinner(this.spinnerElement);
+        }
+    }
+    /**
+     * Hides the spinner loader.
+     *
+     * @returns {void}
+     * @deprecated
+     */
+    public hideSpinner(): void {
+        if (!isNullOrUndefined(this.spinnerElement)) {
+            hideSpinner(this.spinnerElement);
+            removeClass([this.spinnerElement], dropDownListClasses.disableIcon);
+            if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {
+                detach(this.spinnerElement);
+            } else {
+                this.spinnerElement.innerHTML = '';
+            }
+            this.spinnerElement = null;
+        }
+    }
+
+    protected setAutoFill(activeElement: Element, isHover?: boolean): void {
+        if (!isHover) {
+            this.setHoverList(activeElement);
+        }
+        if (this.autofill && !this.preventAutoFill) {
+            const currentValue: string = <string>this.getTextByValue(activeElement.getAttribute('data-value')).toString();
+            const currentFillValue: string | number | boolean = this.getFormattedValue(activeElement.getAttribute('data-value'));
+            if (this.getModuleName() === 'combobox') {
+                if (!this.isSelected && this.previousValue !== currentFillValue) {
+                    this.updateSelectedItem(activeElement, null);
+                    this.isSelected = true;
+                    this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));
+                } else {
+                    this.updateSelectedItem(activeElement, null, true);
+                }
+            }
+            if (!this.isAndroidAutoFill(currentValue)) {
+                this.setAutoFillSelection(currentValue, isHover);
+            }
+        }
+    }
+
+    private isAndroidAutoFill(value: string): boolean {
+        if (Browser.isAndroid) {
+            const currentPoints: { [key: string]: number } = this.getSelectionPoints();
+            const prevEnd: number = this.prevSelectPoints.end;
+            const curEnd: number = currentPoints.end;
+            const prevStart: number = this.prevSelectPoints.start;
+            const curStart: number = currentPoints.start;
+            if (prevEnd !== 0 && ((prevEnd === value.length && prevStart === value.length) ||
+                (prevStart > curStart && prevEnd > curEnd) || (prevEnd === curEnd && prevStart === curStart))) {
+                return true;
+            } else {
+                return false;
+            }
+        } else {
+            return false;
+        }
+    }
+
+    protected clearAll(e?: MouseEvent | KeyboardEventArgs, property?: ComboBoxModel): void {
+        if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {
+            super.clearAll(e);
+        }
+        if (this.isFiltering() && !isNullOrUndefined(e) && e.target === this.inputWrapper.clearButton) {
+            this.searchLists(e);
+        }
+    }
+
+    protected isSelectFocusItem(element: Element): boolean {
+        return !isNullOrUndefined(element);
+    }
+
+    private inlineSearch(e?: KeyboardEventArgs): void {
+        const isKeyNavigate: boolean = (e && (e.action === 'down' || e.action === 'up' ||
+            e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown'));
+        const activeElement: Element = isKeyNavigate ? this.liCollections[this.activeIndex] : this.getFocusElement();
+        if (!isNullOrUndefined(activeElement)) {
+            if (!isKeyNavigate) {
+                const value: string | number | boolean = this.getFormattedValue(activeElement.getAttribute('data-value'));
+                this.activeIndex = this.getIndexByValue(value);
+                this.activeIndex = !isNullOrUndefined(this.activeIndex) ? this.activeIndex : null;
+            }
+            this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;
+            this.setAutoFill(activeElement, isKeyNavigate);
+        } else if (this.inputElement.value === '') {
+            this.activeIndex = null;
+            if (!isNullOrUndefined(this.list)) {
+                if (!this.enableVirtualization) {
+                    this.list.scrollTop = 0;
+                }
+                const focusItem: Element = this.list.querySelector('.' + dropDownListClasses.li);
+                this.setHoverList(focusItem);
+            }
+        } else {
+            this.activeIndex = null;
+            this.removeSelection();
+            if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
+                this.removeFocus();
+            }
+        }
+    }
+
+    protected incrementalSearch(e: KeyboardEventArgs): void {
+        this.showPopup(e);
+        if (!isNullOrUndefined(this.listData)) {
+            this.inlineSearch(e);
+            e.preventDefault();
+        }
+    }
+
+    private setAutoFillSelection(currentValue: string, isKeyNavigate: boolean = false): void {
+        const selection: { [key: string]: number } = this.getSelectionPoints();
+        const value: string = this.inputElement.value.substr(0, selection.start);
+        if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {
+            const inputValue: string = value + currentValue.substr(value.length, currentValue.length);
+            Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
+            this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);
+        } else if (isKeyNavigate) {
+            Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);
+            this.inputElement.setSelectionRange(0, this.inputElement.value.length);
+        }
+    }
+
+    protected getValueByText(text: string): string | number | boolean {
+        return super.getValueByText(text, true, this.ignoreAccent);
+    }
+
+    protected unWireEvent(): void {
+        if (this.getModuleName() === 'combobox') {
+            EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur);
+            EventHandler.remove(this.inputWrapper.container, 'blur', this.onBlurHandler);
+        }
+        if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {
+            EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick);
+        }
+        if (this.inputElement) {
+            EventHandler.remove(this.inputElement, 'focus', this.targetFocus);
+            if (!this.readonly) {
+                EventHandler.remove(this.inputElement, 'input', this.onInput);
+                EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);
+                EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);
+                EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
+                EventHandler.remove(<HTMLElement & Window>window, 'resize', this.windowResize);
+            }
+        }
+        this.unBindCommonEvent();
+    }
+
+    protected setSelection(li: Element, e: MouseEvent | KeyboardEventArgs | TouchEvent): void {
+        super.setSelection(li, e);
+        if (!isNullOrUndefined(li) && !this.autofill && !this.isDropDownClick) {
+            this.removeFocus();
+        }
+    }
+    protected selectCurrentItem(e: KeyboardEventArgs): void {
+        let li: Element;
+        if (this.isPopupOpen) {
+            if (this.isSelected) {
+                li = this.list.querySelector('.' + dropDownListClasses.selected);
+            } else {
+                li = this.list.querySelector('.' + dropDownListClasses.focus);
+            }
+            if (li) {
+                this.setSelection(li, e);
+                this.isTyped = false;
+            }
+            if (this.isSelected) {
+                this.isSelectCustom = false;
+                this.onChangeEvent(e);
+            }
+        }
+        if (e.action === 'enter' && this.inputElement.value.trim() === '') {
+            this.clearAll(e);
+        } else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {
+            this.customValue(e);
+        }
+        this.hidePopup(e);
+    }
+
+    protected setHoverList(li: Element): void {
+        this.removeSelection();
+        if (this.isValidLI(li) && !li.classList.contains(dropDownListClasses.selected)) {
+            this.removeFocus();
+            li.classList.add(dropDownListClasses.focus);
+        }
+    }
+    private targetFocus(e: MouseEvent): void {
+        if (Browser.isDevice && !this.allowFiltering) {
+            this.preventFocus = false;
+        }
+        this.onFocus(e);
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+    }
+    protected dropDownClick(e: MouseEvent): void {
+        e.preventDefault();
+        if (Browser.isDevice && !this.isFiltering()) {
+            this.preventFocus = true;
+        }
+        super.dropDownClick(e);
+    }
+    private customValue(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void {
+        const value: string | number | boolean = this.getValueByText(this.inputElement.value);
+        if (!this.allowCustom && this.inputElement.value !== '') {
+            const previousValue: string | number | boolean = this.previousValue;
+            const currentValue: string | number | boolean = this.value;
+            this.setProperties({ value: value });
+            if (isNullOrUndefined(this.value)) {
+                Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
+            }
+            if (this.autofill && previousValue === this.value && currentValue !== this.value) {
+                this.onChangeEvent(null);
+            }
+        } else if (this.inputElement.value.trim() !== '') {
+            const previousValue: string | number | boolean = this.value;
+            if (isNullOrUndefined(value)) {
+                const value: string | Object = this.inputElement.value === '' ? null : this.inputElement.value;
+                // eslint-disable-next-line max-len
+                const eventArgs: { [key: string]: Object | string | number } = <{ [key: string]: Object | string | number }>{ text: value, item: {} };
+                if (!this.initial) {
+                    this.trigger('customValueSpecifier', eventArgs, (eventArgs: { [key: string]: Object | string | number }) => {
+                        this.updateCustomValueCallback(value, eventArgs, previousValue, e);
+                    });
+                } else {
+                    this.updateCustomValueCallback(value, eventArgs, previousValue);
+                }
+            } else {
+                this.isSelectCustom = false;
+                this.setProperties({ value: value });
+                if (previousValue !== this.value) {
+                    this.onChangeEvent(e);
+                }
+            }
+        } else if (this.allowCustom) {
+            this.isSelectCustom = true;
+        }
+    }
+    private updateCustomValueCallback(
+        value: string | Object,
+        eventArgs: { [key: string]: Object | string | number },
+        previousValue: string | number | boolean,
+        e?: MouseEvent | KeyboardEventArgs | TouchEvent): void {
+        const fields: FieldSettingsModel = this.fields;
+        const item: { [key: string]: string | Object } = <{ [key: string]: string | Object }>eventArgs.item;
+        let dataItem: { [key: string]: string | Object } = {};
+        if (item && getValue(fields.text, item) && getValue(fields.value, item)) {
+            dataItem = item;
+        } else {
+            setValue(fields.text, value, dataItem);
+            setValue(fields.value, value, dataItem);
+        }
+        this.itemData = <{ [key: string]: Object }>dataItem;
+        const changeData: { [key: string]: Object } = {
+            text: getValue(fields.text, this.itemData),
+            value: getValue(fields.value, this.itemData),
+            index: null
+        };
+        this.setProperties(changeData, true);
+        this.setSelection(null, null);
+        this.isSelectCustom = true;
+        if (previousValue !== this.value) {
+            this.onChangeEvent(e);
+        }
+    }
+    /**
+     * Dynamically change the value of properties.
+     *
+     * @param {ComboBoxModel} newProp - Returns the dynamic property value of the component.
+     * @param {ComboBoxModel} oldProp - Returns the previous property value of the component.
+     * @private
+     * @returns {void}
+     */
+    public onPropertyChanged(newProp: ComboBoxModel, oldProp: ComboBoxModel): void {
+        if (this.getModuleName() === 'combobox') {
+            this.checkData(newProp);
+            this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp as { [key: string]: string });
+        }
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'readonly':
+                    Input.setReadonly(this.readonly, this.inputElement as HTMLInputElement);
+                    if (this.readonly) {
+                        EventHandler.remove(this.inputElement, 'input', this.onInput);
+                        EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);
+                        EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);
+                    } else {
+                        EventHandler.add(this.inputElement, 'input', this.onInput, this);
+                        EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);
+                        EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);
+                    }
+                    this.setReadOnly();
+                    break;
+                case 'allowFiltering':
+                    this.setSearchBox();
+                    if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
+                        super.renderList();
+                    }
+                    break;
+                case 'allowCustom':
+                    break;
+                default: {
+                    // eslint-disable-next-line max-len
+                    const comboProps: { [key: string]: Object } = this.getPropObject(prop, <{ [key: string]: string }>newProp, <{ [key: string]: string }>oldProp);
+                    super.onPropertyChanged(comboProps.newProperty, comboProps.oldProperty);
+                    if (this.isFiltering() && prop === 'dataSource' && isNullOrUndefined(this.list) && this.itemTemplate &&
+                        this.getModuleName() === 'combobox') {
+                        super.renderList();
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    /**
+     * To initialize the control rendering.
+     *
+     * @private
+     * @returns {void}
+     */
+    public render(): void {
+        super.render();
+        this.setSearchBox();
+        if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
+            super.renderList();
+        }
+        this.renderComplete();
+    }
+    /**
+     * Return the module name of this component.
+     *
+     * @private
+     * @returns {string} Return the module name of this component.
+     */
+    public getModuleName(): string {
+        return 'combobox';
+    }
+    /**
+     * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,
+     * but you can insert based on the index parameter.
+     *
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
+     * @returns {void}
+     * @deprecated
+     */
+    public addItem(
+        items: { [key: string]: Object }[] | { [key: string]: Object } | string | boolean | number | string[] | boolean[] | number[],
+        itemIndex?: number): void {
+        super.addItem(items, itemIndex);
+    }
+    /**
+     * To filter the data from given data source by using query
+     *
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @returns {void}
+     * @deprecated
+     */
+    public filter(
+        dataSource: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[],
+        query?: Query, fields?: FieldSettingsModel): void {
+        super.filter(dataSource, query, fields);
+    }
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
+    /**
+     * Opens the popup that displays the list of items.
+     *
+     * @returns {void}
+     * @deprecated
+     */
+    public showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
+        super.showPopup(e);
+    }
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
+    /**
+     * Hides the popup if it is in open state.
+     *
+     * @returns {void}
+     * @deprecated
+     */
+    public hidePopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
+        const inputValue: string | Object = this.inputElement && this.inputElement.value === '' ? null
+            : this.inputElement && this.inputElement.value;
+        if (!isNullOrUndefined(this.listData)) {
+            const isEscape: boolean = this.isEscapeKey;
+            if (this.isEscapeKey) {
+                Input.setValue(this.typedString, this.inputElement, this.floatLabelType, this.showClearButton);
+                this.isEscapeKey = false;
+            }
+            if (this.autofill) {
+                this.removeFillSelection();
+            }
+            const dataItem: { [key: string]: string } = this.isSelectCustom ? { text: '' } : this.getItemData();
+            const selected: HTMLElement = !isNullOrUndefined(this.list) ? <HTMLElement>this.list.querySelector('.' + dropDownListClasses.selected) : null;
+            if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {
+                if (this.isSelected) {
+                    this.onChangeEvent(e);
+                    this.isSelectCustom = false;
+                }
+                super.hidePopup(e);
+                return;
+            }
+            if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {
+                const dataSource: { [key: string]: Object }[] = this.sortedData as { [key: string]: Object }[];
+                const type: string = this.typeOfData(dataSource).typeof as string;
+                const searchItem: { [key: string]: number | Element } = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);
+                this.selectedLI = searchItem.item as HTMLElement;
+                if (isNullOrUndefined(searchItem.index)) {
+                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index as number;
+                }
+                this.activeIndex = searchItem.index as number;
+                if (!isNullOrUndefined(this.selectedLI)) {
+                    this.updateSelectedItem(this.selectedLI, null, true);
+                } else if (isEscape) {
+                    this.isSelectCustom = true;
+                    this.removeSelection();
+                }
+            }
+            if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {
+                this.customValue(e);
+            }
+        }
+        if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {
+            this.customValue();
+        }
+        super.hidePopup(e);
+    }
+    /**
+     * Sets the focus to the component for interaction.
+     *
+     * @returns {void}
+     */
+    public focusIn(): void {
+        if (!this.enabled) {
+            return;
+        }
+        if (Browser.isDevice && !this.isFiltering()) {
+            this.preventFocus = true;
+        }
+        super.focusIn();
+    }
+    /**
+     * Allows you to clear the selected values from the component.
+     *
+     * @returns {void}
+     * @deprecated
+     */
+    public clear(): void {
+        this.value = null;
+    }
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
+    /**
+     * Moves the focus from the component if the component is already focused.
+     *
+     * @returns {void}
+     * @deprecated
+     */
+    public focusOut(e?: MouseEvent | KeyboardEventArgs): void {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
+        super.focusOut(e);
+    }
+    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
+    /**
+     * Gets all the list items bound on this component.
+     *
+     * @returns {Element[]}
+     * @deprecated
+     */
+    public getItems(): Element[] {
+        return super.getItems();
+    }
+    /**
+     * Gets the data Object that matches the given value.
+     *
+     * @param { string | number } value - Specifies the value of the list item.
+     * @returns {Object}
+     * @deprecated
+     */
+    public getDataByValue(value: string | number | boolean)
+        : { [key: string]: Object } | string | number | boolean {
+        return super.getDataByValue(value);
+    }
+    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
+    protected renderHightSearch(): void {
+        // update high light search
+    }
+}
+export interface CustomValueSpecifierEventArgs {
+    /**
+     * Gets the typed custom text to make a own text format and assign it to `item` argument.
+     */
+    text: string
+    /**
+     * Sets the text custom format data for set a `value` and `text`.
+     *
+     */
+    item: { [key: string]: string | Object }
+}