bug(EJ2-2547): Flickering issue corrected in filtering sample.

Author: pipeline

src/dropdownlist/filtering-plnkr.json

@@ -1 +1 @@
-{"index.ts":"/**\n * DropDownList Filtering Sample\n */\nimport { DropDownList, FilteringEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\nimport { Browser, EmitType } from '@syncfusion/ej2-base';\n\n\n    let objectData1: DataManager = new DataManager({\n        url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',\n        adaptor: new ODataV4Adaptor,\n        crossDomain: true\n    });\n    let targetElement: HTMLElement;\n    let popupElement: HTMLElement;\n    let spinnerElement: HTMLElement;\n    let onFiltering: EmitType<FilteringEventArgs> = debounce(\n        (e: FilteringEventArgs) => {\n            let query: Query = new Query().select(['ContactName', 'CustomerID']);\n            query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;\n            e.updateData(objectData1, query);\n        },\n        200);\n    let dropDownListObj: DropDownList = new DropDownList({\n        placeholder: 'Select a customer',\n        filterBarPlaceholder: 'Search',\n        dataSource: objectData1,\n        query: new Query().select(['ContactName', 'CustomerID']).take(25),\n        fields: { text: 'ContactName', value: 'CustomerID' },\n        popupHeight: '250px',\n        allowFiltering: true,\n        filtering: onFiltering,\n        actionBegin: () => {\n            popupElement = <HTMLElement>document.getElementById('list_popup');\n            if (Browser.isDevice && document.getElementById('list_popup')) {\n                if (!spinnerElement) {\n                    spinnerElement = <HTMLElement>document.createElement('span');\n                    spinnerElement.classList.add('e-spinner-icon');\n                    popupElement.appendChild(spinnerElement);\n                }\n            } else {\n                let element: HTMLElement = <HTMLElement>document.querySelector('.control-section').querySelector('.e-input-group-icon');\n                targetElement = popupElement ? <HTMLElement>popupElement.querySelector('.e-clear-icon') : element;\n                if (targetElement) {\n                    if (!popupElement) {\n                        targetElement.classList.remove('e-ddl-icon', 'e-search-icon');\n                    }\n                    targetElement.classList.add('e-spinner-icon');\n                }\n            }\n        },\n        actionComplete: () => {\n            removeIcon();\n        },\n        actionFailure: () => {\n            removeIcon();\n        }\n    });\n    dropDownListObj.appendTo('#list');\n\n    function removeIcon(): void {\n        if (Browser.isDevice && popupElement && spinnerElement) {\n            spinnerElement.remove();\n            spinnerElement = null;\n        } else if (targetElement) {\n            targetElement.classList.remove('e-spinner-icon');\n            if (!popupElement) {\n                targetElement.classList.add('e-ddl-icon', 'e-search-icon');\n            }\n        }\n        if (!targetElement) {\n            let element: Element = document.getElementsByClassName('e-spinner-icon')[0];\n            if (element) {\n                element.classList.remove('e-spinner-icon');\n            }\n        }\n    }\n\n    function debounce(func: Function, wait: number): EmitType<FilteringEventArgs> {\n        let timeout: number;\n        let isTypedFirst: boolean = false;\n        /* tslint:disable */\n        return function () {\n            /* tslint:enable */\n            let context: object = this;\n            let args: IArguments = arguments;\n            let later: Function = () => {\n                timeout = null;\n                if (!isTypedFirst) { func.apply(context, args); }\n            };\n            let callNow: boolean = !isTypedFirst && !timeout;\n            clearTimeout(timeout);\n            timeout = setTimeout(later, wait);\n            if (callNow) {\n                isTypedFirst = true;\n                func.apply(context, args);\n            } else {\n                isTypedFirst = false;\n            }\n        };\n    }\n","index.html":"<html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n    <div class=\"control-wrapper\">\n        <div style=\"padding-top:75px;\">\n            <input type=\"text\" tabindex=\"1\" id=\"list\">\n        </div>\n    </div>\n</div>\n\n\n\n<style>\n    .control-wrapper {\n        margin: 0 auto;\n        width: 250px;\n    }\n\n    .e-input-group .e-spinner-icon {\n        background-image: url(./styles/images/Medium-36px-spin.gif) !important;\n        background-size: 12px 12px !important;\n        background-repeat: no-repeat !important;\n        background-position: center center !important;\n    }\n\n    .e-input-group .e-spinner-icon::before {\n        content: '';\n    }\n\n    .e-bigger .e-ddl-device .e-spinner-icon {\n        background-image: url(./styles/images/Medium-36px-spin.gif) !important;\n        background-repeat: no-repeat !important;\n        background-position: center center !important;\n        background-size: 30px 30px !important;\n        width: 30px;\n        height: 30px;\n        margin: 0 auto;\n        position: absolute;\n        top: 25%;\n        left: 0px;\n        bottom: 0px;\n        right: 0px;\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
+{"index.ts":"/**\n * DropDownList Filtering Sample\n */\nimport { DropDownList, FilteringEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\nimport { Browser, EmitType } from '@syncfusion/ej2-base';\n\n\n    let objectData1: DataManager = new DataManager({\n        url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',\n        adaptor: new ODataV4Adaptor,\n        crossDomain: true\n    });\n    let targetElement: HTMLElement;\n    let popupElement: HTMLElement;\n    let spinnerElement: HTMLElement;\n    let onFiltering: EmitType<FilteringEventArgs> = debounce(\n        (e: FilteringEventArgs) => {\n            let query: Query = new Query().select(['ContactName', 'CustomerID']);\n            query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;\n            e.updateData(objectData1, query);\n        },\n        200);\n    let dropDownListObj: DropDownList = new DropDownList({\n        placeholder: 'Select a customer',\n        filterBarPlaceholder: 'Search',\n        dataSource: objectData1,\n        query: new Query().select(['ContactName', 'CustomerID']).take(25),\n        fields: { text: 'ContactName', value: 'CustomerID' },\n        popupHeight: '250px',\n        allowFiltering: true,\n        filtering: onFiltering,\n        actionBegin: () => {\n            popupElement = <HTMLElement>document.getElementById('list_popup');\n            if (Browser.isDevice && document.getElementById('list_popup')) {\n                if (!spinnerElement) {\n                    spinnerElement = <HTMLElement>document.createElement('span');\n                    spinnerElement.classList.add('e-spinner-icon');\n                    popupElement.appendChild(spinnerElement);\n                }\n            } else {\n                let element: HTMLElement = <HTMLElement>document.querySelector('.control-section').querySelector('.e-input-group-icon');\n                targetElement = popupElement ? <HTMLElement>popupElement.querySelector('.e-clear-icon') : element;\n                if (targetElement) {\n                    if (!popupElement) {\n                        targetElement.classList.remove('e-ddl-icon', 'e-search-icon');\n                    }\n                    targetElement.classList.add('e-spinner-icon');\n                }\n            }\n        },\n        actionComplete: () => {\n            removeIcon();\n        },\n        actionFailure: () => {\n            removeIcon();\n        }\n    });\n    dropDownListObj.appendTo('#list');\n\n    function removeIcon(): void {\n        if (Browser.isDevice && popupElement && spinnerElement) {\n            spinnerElement.remove();\n            spinnerElement = null;\n        } else if (targetElement) {\n            targetElement.classList.remove('e-spinner-icon');\n            if (!popupElement) {\n                targetElement.classList.add('e-ddl-icon', 'e-search-icon');\n            }\n        }\n        if (!targetElement) {\n            let element: Element = document.getElementsByClassName('e-spinner-icon')[0];\n            if (element) {\n                element.classList.remove('e-spinner-icon');\n            }\n        }\n    }\n\n    function debounce(func: Function, wait: number): EmitType<FilteringEventArgs> {\n        let timeout: number;\n        let isTypedFirst: boolean = false;\n        /* tslint:disable */\n        return function () {\n            /* tslint:enable */\n            let context: object = this;\n            let args: IArguments = arguments;\n            let later: Function = () => {\n                timeout = null;\n                if (!isTypedFirst) { func.apply(context, args); }\n            };\n            let callNow: boolean = !isTypedFirst && !timeout;\n            clearTimeout(timeout);\n            timeout = setTimeout(later, wait);\n            if (callNow) {\n                isTypedFirst = true;\n                func.apply(context, args);\n            } else {\n                isTypedFirst = false;\n            }\n        };\n    }\n","index.html":"<html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n    <div class=\"control-wrapper\">\n        <div style=\"padding-top:75px;\">\n            <input type=\"text\" tabindex=\"1\" id=\"list\">\n        </div>\n    </div>\n</div>\n\n\n\n<style>\n    .control-wrapper {\n        margin: 0 auto;\n        width: 250px;\n    }\n\n    .e-input-group .e-spinner-icon {\n        background-image: url(./styles/images/Medium-36px-spin.gif) !important;\n        background-size: 14px 14px !important;\n        background-repeat: no-repeat !important;\n        background-position: center center !important;\n    }\n\n    .e-input-group .e-spinner-icon::before {\n        content: '';\n    }\n    \n    .e-popup .e-input-group .e-spinner-icon {\n        padding: 12px 12px;\n    }\n\n    .e-bigger .e-ddl-device .e-spinner-icon {\n        background-image: url(./styles/images/Medium-36px-spin.gif) !important;\n        background-repeat: no-repeat !important;\n        background-position: center center !important;\n        background-size: 30px 30px !important;\n        width: 30px;\n        height: 30px;\n        margin: 0 auto;\n        position: absolute;\n        top: 25%;\n        left: 0px;\n        bottom: 0px;\n        right: 0px;\n    }\n\n    .e-bigger .e-popup .e-input-group .e-spinner-icon {\n        padding: 15px 15px 14px;\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

src/dropdownlist/filtering.html

@@ -21,14 +21,18 @@
 
     .e-input-group .e-spinner-icon {
         background-image: url(./styles/images/Medium-36px-spin.gif) !important;
-        background-size: 12px 12px !important;
+        background-size: 14px 14px !important;
         background-repeat: no-repeat !important;
         background-position: center center !important;
     }
 
     .e-input-group .e-spinner-icon::before {
         content: '';
     }
+    
+    .e-popup .e-input-group .e-spinner-icon {
+        padding: 12px 12px;
+    }
 
     .e-bigger .e-ddl-device .e-spinner-icon {
         background-image: url(./styles/images/Medium-36px-spin.gif) !important;
@@ -44,4 +48,8 @@
         bottom: 0px;
         right: 0px;
     }
+
+    .e-bigger .e-popup .e-input-group .e-spinner-icon {
+        padding: 15px 15px 14px;
+    }
 </style>