@danielgindi/selectbox 1.0.147 → 2.0.0

package/lib/DropList.js

@@ -28,10 +28,12 @@ import {
     VALUE_UP,
 } from 'keycode-js';
 import mitt from 'mitt';
+import throttle from './utils/throttle';
 
 const ItemSymbol = Symbol('item');
 const DestroyedSymbol = Symbol('destroyed');
 const GhostSymbol = Symbol('ghost');
+const NoResultsItemSymbol = Symbol('no_results_items');
 
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
@@ -57,7 +59,17 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * @property {string} [valueProp='value']
  * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderItem] Function to call when rendering an item element
  * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderItem] Function to call when rendering an item element
+ * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderNoResultsItem]
+ * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderNoResultsItem]
  * @property {function(name: string, data: *)} [on]
+ * @property {boolean} [searchable=false] include inline search box
+ * @property {string} [noResultsText='No matching results'] text for no results (empty for none)
+ * @property {number} [filterThrottleWindow=300] throttle time (milliseconds) for filtering
+ * @property {boolean} [filterOnEmptyTerm=false] call the filter function on empty search term too
+ * @property {boolean} [filterGroups=false] should groups be filtered?
+ * @property {boolean} [filterEmptyGroups=false] should empty groups be filtered out?
+ * @property {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} [filterFn]
+ * @property {function(dropList: DropList):DropList.PositionOptions} [positionOptionsProvider]
  * */
 /** */
 
@@ -121,6 +133,13 @@ let defaultOptions = {
     valueProp: 'value',
 
     on: null,
+
+    searchable: false,
+    noResultsText: 'No matching results',
+    filterThrottleWindow: 300,
+    filterOnEmptyTerm: false,
+    filterGroups: false,
+    filterEmptyGroups: false,
 };
 
 /*
@@ -181,17 +200,35 @@ class DropList {
             valueProp: o.valueProp,
             renderItem: o.renderItem,
             unrenderItem: o.unrenderItem,
+            renderNoResultsItem: o.renderNoResultsItem,
+            unrenderNoResultsItem: o.unrenderNoResultsItem,
             on: o.on || null,
+            positionOptionsProvider: o.positionOptionsProvider ?? null,
+
+            searchable: o.searchable,
+
             silenceEvents: true,
             mitt: mitt(),
 
+            filterThrottleWindow: o.filterThrottleWindow,
+            filterOnEmptyTerm: o.filterOnEmptyTerm,
+            filterGroups: o.filterGroups,
+            filterEmptyGroups: o.filterEmptyGroups,
+            filterFn: o.filterFn,
+            filteredItems: null,
+            filterTerm: '',
+            needsRefilter: false,
+            throttledRefilterItems: null,
+
             focusItemIndex: -1,
             focusItemEl: null,
 
             sink: new DomEventsSink(),
         };
 
-        let classes = [p.baseClassName];
+        const baseClass = p.baseClassName + '_wrapper';
+
+        let classes = [baseClass];
 
         if (p.additionalClasses) {
             classes = classes.concat((p.additionalClasses + '').split(' ').filter(x => x));
@@ -202,31 +239,54 @@ class DropList {
             top: '-9999px',
         };
 
-        let el = o.el;
-        if (el instanceof Element) {
-            p.elOriginalDisplay = el.style.display || '';
-            el.classList.add(...classes);
-            el.role = 'menu';
-            setCssProps(/**@type ElementCSSInlineStyle*/el, initialCss);
+        let wrapperEl = o.el;
+
+        if (wrapperEl instanceof Element) {
+            p.elOriginalDisplay = wrapperEl.style.display || '';
+            wrapperEl.classList.add(...classes);
+            setCssProps(/**@type ElementCSSInlineStyle*/wrapperEl, initialCss);
             p.ownsEl = false;
         } else {
-            el = createElement('ul', {
+            wrapperEl = createElement('div', {
                 class: classes.join(' '),
-                role: 'menu',
                 css: initialCss,
             });
         }
 
-        p.el = el;
+        let menuEl = createElement('ul');
+        menuEl.role = 'menu';
 
-        p.items = [];
+        if (o.searchable) {
+            p.headerEl = createElement('div', {
+                class:  p.baseClassName + '_header',
+            });
 
-        p.groupCount = 0; // This will keep state of how many `group` items we have
+            p.searchInput = createElement('input', {
+                type: 'search',
+                role: 'searchbox',
+                tabindex: '0',
+                autocorrect: 'off',
+                autocomplete: 'off',
+                autocapitalize: 'off',
+                spellcheck: 'false',
+                'aria-autocomplete': 'list',
+            });
+
+            p.headerEl.appendChild(p.searchInput);
+            wrapperEl.appendChild(p.headerEl);
+        }
+
+        wrapperEl.appendChild(menuEl);
+
+        p.el = wrapperEl;
+        p.menuEl = menuEl;
 
+        p.items = [];
+        p.groupCount = 0; // This will keep state of how many `group` items we have
         p.mouseHandled = false;
 
         p.virtualListHelper = new VirtualListHelper({
-            list: p.el,
+            list: p.menuEl,
             virtual: true,
             buffer: 5,
             estimatedItemHeight: o.estimatedItemHeight || 20,
@@ -253,7 +313,19 @@ class DropList {
                     };
                     itemEl.setAttribute('aria-hidden', 'true');
                 } else {
-                    item = p.items[index];
+                    const items = p.filteredItems ?? p.items;
+                    if (items.length === 0 && p.noResultsText) {
+                        item = {
+                            value: NoResultsItemSymbol,
+                            label: p.noResultsText,
+                            _nointeraction: true,
+                            _nocheck: true,
+
+                            [ItemSymbol]: NoResultsItemSymbol,
+                        };
+                    } else {
+                        item = items[index];
+                    }
                 }
 
                 if (!item) {
@@ -299,36 +371,20 @@ class DropList {
             },
         });
 
-        if (typeof p.unrenderItem === 'function') {
-            const fn = p.unrenderItem;
-            p.virtualListHelper.setOnItemUnrender(el => {
-                try {
-                    fn(el[ItemSymbol][ItemSymbol], el);
-                } catch (err) {
-                    console.error(err); // eslint-disable-line no-console
-                }
-                delete el[ItemSymbol];
-
-                if (p.focusItemEl === el)
-                    p.focusItemEl = null;
-            });
-        } else {
-            p.virtualListHelper.setOnItemUnrender(el => {
-                delete el[ItemSymbol];
-
-                if (p.focusItemEl === el)
-                    p.focusItemEl = null;
-            });
-        }
+        this._setupUnrenderFunction();
 
         if (p.capturesFocus) {
-            el.tabIndex = 0;
+            wrapperEl.tabIndex = 0;
         }
 
+        this.setFilterThrottleWindow(o.filterThrottleWindow);
+        this.setNoResultsText(o.noResultsText);
+
         this._hookMouseEvents();
         this._hookTouchEvents();
         this._hookFocusEvents();
         this._hookKeyEvents();
+        this._hookSearchEvents();
 
         this.silenceEvents = false;
     }
@@ -346,7 +402,7 @@ class DropList {
         p.sink.remove();
         p.virtualListHelper.destroy();
 
-        if (p.el) {
+        if (p.el?.parentNode) {
             remove(p.el);
         }
 
@@ -355,13 +411,15 @@ class DropList {
             p.currentSubDropList = null;
         }
 
+        if (p.throttledRefilterItems)
+            p.throttledRefilterItems.cancel();
+
         if (!p.ownsEl) {
             for (let name of Array.from(p.el.classList)) {
                 if (name.startsWith(p.baseClassName)) {
                     p.el.classList.remove(name);
                 }
             }
-            p.el.removeAttribute('role');
             for (let key of ['position', 'left', 'top', 'right', 'bottom', 'z-index']) {
                 p.el.style[key] = '';
             }
@@ -376,6 +434,8 @@ class DropList {
             delete p.lastPositionTarget;
         }
 
+        delete p.lastPositionOptions;
+
         this._p = null;
     }
 
@@ -459,16 +519,47 @@ class DropList {
      */
     setUnrenderItem(fn) {
         const p = this._p;
-
         p.unrenderItem = fn;
+        this._setupUnrenderFunction();
+        return this;
+    }
+
+    /**
+     * @param {(function(item: DropList.ItemBase, itemEl: Element):(*|false))|null} render
+     * @param {(function(item: DropList.ItemBase, itemEl: Element))|null} unrender
+     * @returns {DropList}
+     */
+    setRenderNoResultsItem(render, unrender) {
+        const p = this._p;
+        p.renderNoResultsItem = render;
+        p.unrenderNoResultsItem = unrender;
+        this._setupUnrenderFunction();
+        return this;
+    }
 
-        if (typeof p.unrenderItem === 'function') {
+    /**
+     * @private
+     */
+    _setupUnrenderFunction() {
+        const p = this._p;
+
+        if (typeof p.unrenderItem === 'function' || typeof p.unrenderNoResultsItem === 'function') {
             const fn = p.unrenderItem;
+            const fnNoResults = p.unrenderNoResultsItem;
             p.virtualListHelper.setOnItemUnrender(el => {
-                try {
-                    fn(el[ItemSymbol][ItemSymbol], el);
-                } catch (err) {
-                    console.error(err); // eslint-disable-line no-console
+                const item = el[ItemSymbol];
+                if (item === NoResultsItemSymbol) {
+                    try {
+                        fnNoResults(item, el);
+                    } catch (err) {
+                        console.error(err); // eslint-disable-line no-console
+                    }
+                } else {
+                    try {
+                        fn(item[ItemSymbol], el);
+                    } catch (err) {
+                        console.error(err); // eslint-disable-line no-console
+                    }
                 }
                 delete el[ItemSymbol];
 
@@ -503,7 +594,8 @@ class DropList {
         if (!el)
             return;
 
-        let classes = [p.baseClassName];
+        const baseClass = p.baseClassName + '_wrapper';
+        let classes = [baseClass];
 
         if (p.direction === 'ltr' || p.direction === 'rtl')
             classes.push(`${p.baseClassName}__` + p.direction);
@@ -530,7 +622,8 @@ class DropList {
             p.focusItemEl = null;
         }
 
-        const item = p.items[p.focusItemIndex];
+        const items = p.filteredItems ?? p.items;
+        const item = items[p.focusItemIndex];
         p.focusItemIndex = -1;
 
         if (!item) {
@@ -681,9 +774,24 @@ class DropList {
             }
         }
 
-        p.virtualListHelper
-            .addItemsAt(itemsToAdd.length, atIndex === -1 ? atIndex : (atIndex - itemsToAdd.length))
-            .render();
+        if (!p.filteredItems) {
+            let hadNoResultItem = p.hasNoResultsItem;
+            p.hasNoResultsItem = p.items.length === 0 && !!p.noResultsText;
+            if (p.hasNoResultsItem) {
+                p.virtualListHelper
+                    .setCount(1)
+                    .render();
+            } else {
+                if (hadNoResultItem)
+                    p.virtualListHelper.removeItemsAt(1, 0);
+
+                p.virtualListHelper
+                    .addItemsAt(itemsToAdd.length, atIndex === -1 ? atIndex : (atIndex - itemsToAdd.length))
+                    .render();
+            }
+        } else {
+            p.needsRefilter = true;
+        }
 
         return this;
     }
@@ -697,9 +805,11 @@ class DropList {
         const p = this._p;
 
         p.items.length = 0;
+        p.filteredItems = null;
         p.groupCount = 0;
 
-        p.virtualListHelper.setCount(0);
+        p.hasNoResultsItem = !!p.noResultsText;
+        p.virtualListHelper.setCount(p.hasNoResultsItem ? 1 : 0);
 
         this.addItems(items);
         this.updateSublist();
@@ -750,9 +860,18 @@ class DropList {
         if (hasOwnProperty.call(newItem, '_child'))
             item._child = !!newItem._child;
 
-        if (p.virtualListHelper.isItemRendered(itemIndex)) {
+        let virtualItemIndex = itemIndex;
+        if (p.filteredItems) {
+            virtualItemIndex = p.filteredItems.indexOf(item);
+            if (virtualItemIndex !== -1) {
+                p.filteredItems.splice(virtualItemIndex, 1);
+            }
+        }
+
+        if (virtualItemIndex !== -1 &&
+            p.virtualListHelper.isItemRendered(virtualItemIndex)) {
             p.virtualListHelper
-                .refreshItemAt(itemIndex)
+                .refreshItemAt(virtualItemIndex)
                 .render();
         }
 
@@ -771,9 +890,27 @@ class DropList {
             p.groupCount--;
         }
 
-        p.virtualListHelper
-            .removeItemsAt(itemIndex, 1)
-            .render();
+        let virtualItemIndex = itemIndex;
+        if (p.filteredItems) {
+            virtualItemIndex = p.filteredItems.indexOf(spliced[0]);
+            if (virtualItemIndex !== -1) {
+                p.filteredItems.splice(virtualItemIndex, 1);
+            }
+        }
+
+        if (virtualItemIndex !== -1) {
+            p.hasNoResultsItem = (p.filteredItems ?? p.items).length === 0 && !!p.noResultsText;
+
+            if (p.hasNoResultsItem) {
+                p.virtualListHelper
+                    .setCount(1)
+                    .render();
+            } else {
+                p.virtualListHelper
+                    .removeItemsAt(virtualItemIndex, 1)
+                    .render();
+            }
+        }
 
         return this;
     }
@@ -782,10 +919,13 @@ class DropList {
         const p = this._p;
 
         p.items.length = 0;
+        p.filteredItems = null;
         p.groupCount = 0;
 
+        p.hasNoResultsItem = !!p.noResultsText;
+
         p.virtualListHelper
-            .setCount(0)
+            .setCount(p.hasNoResultsItem ? 1 : 0)
             .render();
 
         return this;
@@ -821,8 +961,23 @@ class DropList {
     itemIndexByValue(value) {
         const p = this._p;
 
-        for (let i = 0, count = p.items.length; i < count; i++) {
-            let item = p.items[i];
+        const items = p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+            let item = items[i];
+            if (item.value === value) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
+    filteredItemIndexByValue(value) {
+        const p = this._p;
+
+        const items = p.filteredItems ?? p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+            let item = items[i];
             if (item.value === value) {
                 return i;
             }
@@ -834,8 +989,23 @@ class DropList {
     itemIndexByValueOrLabel(value, label) {
         const p = this._p;
 
-        for (let i = 0, count = p.items.length; i < count; i++) {
-            let item = p.items[i];
+        const items = p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+            let item = items[i];
+            if (item.value === value || item.label === label) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
+    filteredItemIndexByValueOrLabel(value, label) {
+        const p = this._p;
+
+        const items = p.filteredItems ?? p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+            let item = items[i];
             if (item.value === value || item.label === label) {
                 return i;
             }
@@ -844,6 +1014,36 @@ class DropList {
         return -1;
     }
 
+    itemIndexByItem(item) {
+        const p = this._p;
+
+        const items = p.items;
+
+        for (let i = 0, count = items.length; i < count; i++) {
+            let it = items[i];
+            if (it[ItemSymbol] === item) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
+    filteredItemIndexByItem(item) {
+        const p = this._p;
+
+        const items = p.filteredItems ?? p.items;
+
+        for (let i = 0, count = items.length; i < count; i++) {
+            let it = items[i];
+            if (it[ItemSymbol] === item) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
     items() {
         return this._p.items.map(x => x[ItemSymbol]);
     }
@@ -860,19 +1060,320 @@ class DropList {
         return this._p.items[index]?.[ItemSymbol];
     }
 
+    filteredItemAtIndex(index) {
+        const p = this._p;
+        const items = p.filteredItems ?? p.items;
+        return items[index]?.[ItemSymbol];
+    }
+
+    /**
+     * @param {function(dropList: DropList):DropList.PositionOptions} fn
+     * @returns {DropList}
+     */
+    setPositionOptionsProvider(fn) {
+        const p = this._p;
+        if (p.positionOptionsProvider === fn)
+            return this;
+        p.positionOptionsProvider = fn ?? null;
+        this.relayout();
+        return this;
+    }
+
+    /**
+     * @returns {function(dropList: DropList):DropList.PositionOptions|null}
+     */
+    getPositionOptionsProvider() {
+        const p = this._p;
+        return p.positionOptionsProvider;
+    }
+
+    /**
+     * @param {string} term
+     * @param {boolean} [performSearch=false] should actually perform the search, or just set the input's text?
+     * @returns {DropList}
+     */
+    setSearchTerm(term, performSearch = false) {
+        const p = this._p;
+
+        if (p.searchInput) {
+            p.searchInput.value = term;
+        }
+
+        if (performSearch) {
+            p.filterTerm = term.trim();
+            p.filteredItems = null;
+
+            this._trigger('search', { value: term });
+            p.throttledRefilterItems();
+        }
+
+        return this;
+    }
+
+    isFilterPending() {
+        const p = this._p;
+
+        return !!(p.throttledRefilterItems.isScheduled() ||
+            (!p.filteredItems && (p.filterTerm || (p.filterOnEmptyTerm && p.filterFn))));
+    }
+
+    /** @private */
+    _refilterItems() {
+        const p = this._p;
+
+        const term = p.filterTerm;
+        const filterGroups = p.filterGroups;
+        const filterEmptyGroups = p.filterEmptyGroups;
+
+        if (term || (p.filterOnEmptyTerm && p.filterFn)) {
+            let fn = p.filterFn;
+
+            let filteredItems;
+
+            if (typeof fn === 'function') {
+                filteredItems = p.filterFn(p.items, term);
+            }
+
+            // If there was no filter function, or it gave up on filtering.
+            if (!Array.isArray(filteredItems)) {
+                if (term) {
+                    const matcher = new RegExp(escapeRegex(term), 'i');
+                    const labelProp = p.labelProp;
+
+                    filteredItems = p.items.filter(x => {
+                        if (!filterGroups && x._group) return true;
+                        return matcher.test(x[labelProp]);
+                    });
+                } else {
+                    filteredItems = null;
+                }
+            }
+
+            p.filteredItems = filteredItems;
+
+            if (filteredItems && filterEmptyGroups) {
+                // Clean up groups without children
+
+                let lastGroup = -1;
+                let len = filteredItems.length;
+
+                for (let i = 0; i < len; i++) {
+                    let item = filteredItems[i];
+
+                    if (item._group) {
+                        if (lastGroup !== -1 && lastGroup === i - 1) {
+                            // It was an empty group
+                            filteredItems.splice(lastGroup, 1);
+                            i--;
+                            len--;
+                        }
+
+                        lastGroup = i;
+                    }
+                }
+
+                if (lastGroup !== -1) {
+                    if (lastGroup === len - 1) {
+                        // It was an empty group
+                        filteredItems.splice(lastGroup, 1);
+                    }
+                }
+            }
+        } else {
+            p.filteredItems = null;
+        }
+
+        this.needsRefilter = false;
+
+        const items = p.filteredItems ?? p.items;
+        p.hasNoResultsItem = items.length === 0 && !!p.noResultsText;
+        p.virtualListHelper
+            .setCount(items.length + (p.hasNoResultsItem ? 1 : 0))
+            .render();
+
+        this._trigger('itemschanged', { term: term, mutated: false, count: this.getFilteredItemCount() });
+        this.relayout();
+    }
+
+    invokeRefilter() {
+        const p = this._p;
+        if (!p.filterTerm && !p.filterOnEmptyTerm && !p.filteredItems)
+            return this;
+        p.filteredItems = null;
+        p.throttledRefilterItems();
+        return this;
+    }
+
+    getFilteredItemCount() {
+        const p = this._p;
+
+        if (p.needsRefilter)
+            this._refilterItems();
+
+        if (p.filteredItems)
+            return p.filteredItems.length;
+
+        if (p.items)
+            return p.items.length;
+
+        return 0;
+    }
+
+    /**
+     * @param {string} noResultsText
+     * @returns {DropList}
+     */
+    setNoResultsText(noResultsText) {
+        this._p.noResultsText = noResultsText;
+        return this;
+    }
+
+    /**
+     * @returns {string}
+     */
+    getNoResultsText() {
+        return this._p.noResultsText;
+    }
+
+    /**
+     * @param {number} window
+     * @returns {DropList}
+     */
+    setFilterThrottleWindow(window) {
+        const p = this._p;
+        p.filterThrottleWindow = window;
+
+        let isScheduled = p.throttledRefilterItems ? p.throttledRefilterItems.isScheduled() : false;
+
+        if (p.throttledRefilterItems)
+            p.throttledRefilterItems.cancel();
+
+        p.throttledRefilterItems = throttle(() => this._refilterItems(), p.filterThrottleWindow, true);
+
+        if (isScheduled)
+            p.throttledRefilterItems();
+
+        return this;
+    }
+
+    /**
+     * @returns {number}
+     */
+    getFilterThrottleWindow() {
+        return this._p.filterThrottleWindow;
+    }
+
+    /**
+     * @param {boolean} value
+     * @returns {DropList}
+     */
+    setFilterOnEmptyTerm(value) {
+        const p = this._p;
+        if (p.filterOnEmptyTerm === value)
+            return this;
+        p.filterOnEmptyTerm = value;
+        p.throttledRefilterItems();
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    getFilterOnEmptyTerm() {
+        return this._p.filterOnEmptyTerm;
+    }
+
+    /**
+     * @param {boolean} value
+     * @returns {DropList}
+     */
+    setFilterGroups(value) {
+        const p = this._p;
+        if (p.filterGroups === value)
+            return this;
+        p.filterGroups = value;
+        p.throttledRefilterItems();
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    getFilterGroups() {
+        return this._p.filterGroups;
+    }
+
+    /**
+     * @param {boolean} value
+     * @returns {DropList}
+     */
+    setFilterEmptyGroups(value) {
+        const p = this._p;
+        if (p.filterEmptyGroups === value)
+            return this;
+        p.filterEmptyGroups = value;
+        p.throttledRefilterItems();
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    getFilterEmptyGroups() {
+        return this._p.filterEmptyGroups;
+    }
+
+    /**
+     * @param {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} fn
+     * @returns {DropList}
+     */
+    setFilterFn(fn) {
+        const p = this._p;
+        if (p.filterFn === fn)
+            return this;
+        p.filterFn = fn;
+        p.throttledRefilterItems();
+        return this;
+    }
+
+    /**
+     * @returns {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)}
+     */
+    getFilterFn() {
+        return this._p.filterFn;
+    }
+
     /**
      *
-     * @param {DropList.PositionOptions} positionOptions
+     * @param {DropList.PositionOptions} [positionOptions]
      * @returns {DropList}
      * @public
      */
     relayout(positionOptions) {
-        const p = this._p, el = p.el;
+        const p = this._p, el = p.el, menuEl = p.menuEl;
 
         if (!this.isVisible()) return this;
 
         let w = window;
 
+        if (!positionOptions)
+            positionOptions = p.positionOptionsProvider?.() ?? p.lastPositionOptions;
+
+        // Supply some default for extreme cases, no crashing
+        if (!positionOptions) {
+            positionOptions = {
+                targetOffset: {
+                    left: window.innerWidth / 2,
+                    top: window.innerHeight / 2,
+                },
+                targetWidth: 0,
+                targetHeight: 0,
+                position: { x: 'center', y: 'center' },
+                anchor: { x: 'center', y: 'center' },
+                targetRtl: getComputedStyle(document.body).direction === 'rtl',
+            };
+        }
+
         let targetBox = {};
 
         let offset = positionOptions.targetOffset || getElementOffset(positionOptions.target);
@@ -935,18 +1436,25 @@ class DropList {
         let verticalBorderWidth = (parseFloat(elComputedStyle.borderTopWidth) || 0) +
             (parseFloat(elComputedStyle.borderBottomWidth) || 0);
 
+        let headerHeight = 0;
+        if (p.headerEl) {
+            headerHeight = getElementHeight(p.headerEl, true, true);
+        }
+
         if (p.virtualListHelper.isVirtual()) {
             maxViewHeight =
                 p.virtualListHelper.estimateFullHeight() +
                 verticalPadding +
-                verticalBorderWidth;
+                verticalBorderWidth +
+                headerHeight;
         } else {
             // Another method to calculate height is measuring the whole thing at once.
             // This causes relayout of course.
             el.style.height = '';
+            menuEl.style.height = '';
             el.style.top = '-9999px';
 
-            maxViewHeight = Math.max(getElementHeight(p.el), el.scrollHeight);
+            maxViewHeight = Math.max(getElementHeight(p.el), menuEl.scrollHeight);
             maxViewHeight += verticalPadding + verticalBorderWidth;
         }
 
@@ -1081,6 +1589,11 @@ class DropList {
         setCssProps(el, viewCss);
         setElementHeight(el, viewSize.height, true, true);
 
+        if (menuEl !== el) {
+            let menuHeight = viewSize.height - headerHeight - verticalBorderWidth - verticalPadding;
+            setElementHeight(menuEl, menuHeight, true, true);
+        }
+
         // Update the scroll position for virtual lists
         p.virtualListHelper.render();
 
@@ -1218,7 +1731,7 @@ class DropList {
 
     /**
      *
-     * @param {DropList.PositionOptions?} positionOptions
+     * @param {DropList.PositionOptions?} [positionOptions]
      * @returns {DropList}
      * @public
      */
@@ -1245,6 +1758,10 @@ class DropList {
             }
         });
 
+        if (p.needsRefilter) {
+            this._refilterItems();
+        }
+
         const el = p.el;
         el.style.position = 'absolute';
         el.classList.remove(`${p.baseClassName}__is-hiding`);
@@ -1256,6 +1773,14 @@ class DropList {
         if (getComputedStyle(p.el).display === 'none')
             p.el.style.display = 'block';
 
+        p.lastPositionOptions = null;
+
+        if (positionOptions === undefined) {
+            positionOptions = p.positionOptionsProvider?.() ?? p.lastPositionOptions;
+        } else {
+            p.lastPositionOptions = positionOptions;
+        }
+
         if (positionOptions) {
             const elComputedStyle = getComputedStyle(el);
 
@@ -1302,6 +1827,11 @@ class DropList {
 
             p.hiding = true;
 
+            if (this.isFilterPending()) {
+                p.throttledRefilterItems.cancel();
+                p.needsRefilter = true;
+            }
+
             if (el) {
 
                 el.classList.add(`${p.baseClassName}__is-hiding`);
@@ -1322,7 +1852,8 @@ class DropList {
                         }
                     });
                 } else {
-                    remove(el);
+                    if (el.parentNode)
+                        remove(el);
                     el.classList.remove(`${p.baseClassName}__is-hiding`);
                 }
             }
@@ -1371,15 +1902,22 @@ class DropList {
     setFocusedItemAtIndex(itemIndex) {
         const p = this._p;
 
+        if (p.filteredItems) {
+            const item = p.items[itemIndex];
+            itemIndex = p.items.indexOf(item);
+        }
+
         p.focusItemIndex = itemIndex;
 
+        const items = p.filteredItems ?? p.items;
+
         let item = null;
         if (itemIndex > -1)
-            item = p.items[itemIndex];
+            item = items[itemIndex];
         if (item && item._nointeraction)
             item = null;
         if (itemIndex > -1) {
-            this.scrollItemIndexIntoView(itemIndex);
+            this._scrollItemIndexIntoView(itemIndex);
         }
         let itemElement = item ? p.virtualListHelper.getItemElementAt(itemIndex) : null;
 
@@ -1434,6 +1972,7 @@ class DropList {
             valueProp: p.valueProp,
             renderItem: p.renderItem,
             unrenderItem: p.unrenderItem,
+            positionOptionsProvider: () => p.currentSubDropList.showOptions,
         });
 
         let onBlur = event => {
@@ -1481,7 +2020,7 @@ class DropList {
             },
         };
 
-        droplist.show(p.currentSubDropList.showOptions);
+        droplist.show();
 
         droplist.el.focus();
     }
@@ -1535,7 +2074,7 @@ class DropList {
 
                 if (itemElement) {
                     p.currentSubDropList.showOptions.target = itemElement;
-                    p.currentSubDropList.droplist.relayout(p.currentSubDropList.showOptions);
+                    p.currentSubDropList.droplist.relayout();
                 }
             }
         }
@@ -1546,7 +2085,8 @@ class DropList {
 
         let itemIndex = item._nointeraction ? -1 : this._getItemIndex(item);
 
-        if (itemIndex > -1 && p.items[itemIndex]._nointeraction)
+        const items = p.items;
+        if (itemIndex > -1 && items[itemIndex]._nointeraction)
             itemIndex = -1;
 
         return this.setFocusedItemAtIndex(itemIndex);
@@ -1562,7 +2102,14 @@ class DropList {
         let itemEl = null;
 
         if (itemIndex > -1 && !p.items[itemIndex]._nointeraction) {
-            itemEl = p.virtualListHelper.getItemElementAt(itemIndex);
+            if (p.filteredItems) {
+                const item = p.items[itemIndex];
+                itemIndex = p.filteredItems.indexOf(item);
+            }
+
+            if (itemIndex > -1) {
+                itemEl = p.virtualListHelper.getItemElementAt(itemIndex);
+            }
         }
 
         this._setSingleSelectedItemEl(itemEl);
@@ -1575,7 +2122,8 @@ class DropList {
 
         let itemIndex = item._nointeraction ? -1 : this._getItemIndex(item);
 
-        if (itemIndex > -1 && p.items[itemIndex]._nointeraction)
+        const items = p.items;
+        if (itemIndex > -1 && items[itemIndex]._nointeraction)
             itemIndex = -1;
 
         return this.setSingleSelectedItemAtIndex(itemIndex);
@@ -1595,24 +2143,42 @@ class DropList {
 
     isFirstItem() {
         const p = this._p;
-        return p.focusItemIndex === 0 && p.focusItemIndex < p.items.length;
+        const items = p.filteredItems ?? p.items;
+        return p.focusItemIndex === 0 && p.focusItemIndex < items.length;
     }
 
     isLastItem() {
         const p = this._p;
-        return p.focusItemIndex > -1 && p.focusItemIndex === p.items.length - 1;
+        const items = p.filteredItems ?? p.items;
+        return p.focusItemIndex > -1 && p.focusItemIndex === items.length - 1;
     }
 
     scrollItemIndexIntoView(itemIndex) {
         const p = this._p;
 
+        if (this._hasScroll()) {
+            if (p.filteredItems) {
+                const item = p.items[itemIndex];
+                itemIndex = p.items.indexOf(item);
+            }
+
+            if (itemIndex !== -1) {
+                this._scrollItemIndexIntoView(itemIndex);
+            }
+        }
+
+        return this;
+    }
+
+    _scrollItemIndexIntoView(itemIndex) {
+        const p = this._p;
+
         if (this._hasScroll()) {
             const el = p.el, scrollTop = el.scrollTop;
 
             let itemPos, previousPos = -1;
             let maxIterations = 30; // Some zoom/scroll issues can make it so that it takes almost forever
 
-
             while (maxIterations-- > 0) {
                 itemPos = p.virtualListHelper.getItemPosition(itemIndex);
 
@@ -1635,8 +2201,6 @@ class DropList {
                 p.virtualListHelper.render();
             }
         }
-
-        return this;
     }
 
     /**
@@ -1697,7 +2261,8 @@ class DropList {
         let itemIndex = -1;
 
         if (item) {
-            itemIndex = p.items.indexOf(item);
+            const items = p.filteredItems ?? p.items;
+            itemIndex = items.indexOf(item);
             if (itemIndex === -1) {
                 let value = (item && item.value !== undefined) ? item.value : item;
                 let label = (item && item.label) ? item.label : value;
@@ -1845,12 +2410,25 @@ class DropList {
 
         p.sink
             .add(p.el, 'focus', event => {
+                if (event.target === this.el && p.searchable)
+                    p.searchInput.focus();
+
+                if (event.relatedTarget &&
+                    this.elContains(event.relatedTarget, true) &&
+                    this.elContains(event.target, true))
+                    return;
+
                 let itemEl = p.focusItemEl || // focused item
                     p.el.firstChild; // or the first item
 
                 this._focus(event, itemEl, null, false);
-            })
+            }, true)
             .add(p.el, 'blur', event => {
+                if (event.relatedTarget &&
+                    this.elContains(event.relatedTarget, true) &&
+                    this.elContains(event.target, true))
+                    return;
+
                 setTimeout(() => {
                     if (this[DestroyedSymbol]) return;
 
@@ -1861,7 +2439,7 @@ class DropList {
                     this._delayBlurItemOnBlur();
                     this._trigger('blur', event);
                 });
-            });
+            }, true);
     }
 
     _hookKeyEvents() {
@@ -1870,6 +2448,21 @@ class DropList {
         p.sink.add(p.el, 'keydown', evt => this._keydown(evt));
     }
 
+    _hookSearchEvents() {
+        const p = this._p;
+
+        if (!p.searchInput)
+            return;
+
+        p.sink.add(p.searchInput, 'input', () => {
+            p.filterTerm = p.searchInput.value.trim();
+            p.filteredItems = null;
+
+            this._trigger('search', { value: p.searchInput.value });
+            p.throttledRefilterItems();
+        });
+    }
+
     _keydown(event) {
         const p = this._p;
 
@@ -1914,7 +2507,8 @@ class DropList {
             case VALUE_RIGHT:
                 if (event.key === VALUE_RIGHT && getComputedStyle(event.target).direction !== 'rtl' ||
                     event.key === VALUE_LEFT && getComputedStyle(event.target).direction === 'rtl') {
-                    let item = p.items[p.focusItemIndex];
+                    const items = p.filteredItems ?? p.items;
+                    let item = items[p.focusItemIndex];
                     if (p.focusItemIndex > -1 && item._subitems)
                         this._showSublist(item, p.focusItemEl);
                 } else {
@@ -1944,7 +2538,11 @@ class DropList {
 
             default: {
                 if (event.type === 'keydown') return;
-                this._keydownFreeType(event);
+
+                // Inline search box not available, then support typing to focus by first letters
+                if (!p.searchable)
+                    this._keydownFreeType(event);
+
                 preventDefault = false;
             }
         }
@@ -1969,12 +2567,14 @@ class DropList {
 
         let focusItemIndex = p.focusItemIndex;
 
+        const items = p.filteredItems ?? p.items;
+
         // These are all the possible matches for the text typed in so far
-        for (let i = 0, count = p.items.length; i < count; i++) {
+        for (let i = 0, count = items.length; i < count; i++) {
             if (matchIndex !== -1 && i < focusItemIndex)
                 continue; // We are only interested in first match + match after the focused item
 
-            item = p.items[i];
+            item = items[i];
             if (regex.test(item.label)) {
                 matchIndex = i;
                 if (focusItemIndex === -1 || i >= focusItemIndex)
@@ -1988,11 +2588,11 @@ class DropList {
             keyword = character;
             regex = new RegExp(`^${escapeRegex(keyword)}`, 'i');
 
-            for (let i = 0, count = p.items.length; i < count; i++) {
+            for (let i = 0, count = items.length; i < count; i++) {
                 if (matchIndex !== -1 && i < focusItemIndex)
                     continue; // We are only interested in first match + match after the focused item
 
-                item = p.items[i];
+                item = items[i];
                 if (regex.test(item.label)) {
                     matchIndex = i;
                     if (focusItemIndex === -1 || i >= focusItemIndex)
@@ -2006,7 +2606,7 @@ class DropList {
             this._focus(evt, next || null, matchIndex, true);
 
             if (!this.isVisible()) {
-                this.triggerItemSelection(next ? null : p.items[matchIndex], evt);
+                this.triggerItemSelection(next ? null : items[matchIndex], evt);
             }
 
             // Record the last filter used
@@ -2033,6 +2633,10 @@ class DropList {
             itemIndex = p.virtualListHelper.getItemIndexFromElement(itemEl);
         }
 
+        if (itemIndex > -1 && itemEl?.[ItemSymbol]?.[ItemSymbol] === NoResultsItemSymbol) {
+            itemIndex = undefined;
+        }
+
         if (itemIndex > -1) {
             this.scrollItemIndexIntoView(itemIndex);
         } else if (itemIndex === undefined) {
@@ -2058,7 +2662,8 @@ class DropList {
         p.focusItemEl = focusItemEl;
         p.focusItemIndex = itemIndex;
 
-        const item = p.items[itemIndex];
+        const items = p.filteredItems ?? p.items;
+        const item = items[itemIndex];
         this._trigger('itemfocus', {
             value: item.value,
             item: item[ItemSymbol] ?? item,
@@ -2093,12 +2698,13 @@ class DropList {
         const p = this._p;
 
         let next, nextIndex, directionUp = false;
+        const items = p.filteredItems ?? p.items;
 
         if (direction === 'first') {
             nextIndex = 0;
             directionUp = false;
         } else if (direction === 'last') {
-            nextIndex = p.items.length - 1;
+            nextIndex = items.length - 1;
             directionUp = true;
         } else if (direction === 'prev') {
             if (!this.hasFocusedItem())
@@ -2106,7 +2712,7 @@ class DropList {
 
             nextIndex = p.focusItemIndex - 1;
             if (nextIndex === -1) {
-                nextIndex = p.items.length - 1;
+                nextIndex = items.length - 1;
             }
 
             directionUp = true;
@@ -2115,7 +2721,7 @@ class DropList {
                 return this._move('first', event);
 
             nextIndex = p.focusItemIndex + 1;
-            if (nextIndex === p.items.length) {
+            if (nextIndex === items.length) {
                 nextIndex = 0;
             }
 
@@ -2144,8 +2750,8 @@ class DropList {
 
                     if (nextIndex < 0) {
                         nextIndex = 0;
-                    } else if (nextIndex >= p.items.length) {
-                        nextIndex = p.items.length;
+                    } else if (nextIndex >= items.length) {
+                        nextIndex = items.length;
                     }
                 } else if (p.focusItemEl) {
                     let base = getElementOffset(p.focusItemEl).top;
@@ -2182,13 +2788,13 @@ class DropList {
             return;
         }
 
-        let itemCount = p.items.length;
+        let itemCount = items.length;
 
         if (nextIndex >= itemCount) {
             return;
         }
 
-        let item = p.items[nextIndex];
+        let item = items[nextIndex];
         // noinspection UnnecessaryLocalVariableJS
         let startedAtIndex = nextIndex;
 
@@ -2205,7 +2811,7 @@ class DropList {
                 }
             }
 
-            item = p.items[nextIndex];
+            item = items[nextIndex];
 
             if (nextIndex === startedAtIndex) {
                 break;
@@ -2221,7 +2827,9 @@ class DropList {
     }
 
     _hasScroll() {
-        return this.el.clientHeight < this.el.scrollHeight;
+        const p = this._p;
+        const menuEl = p.menuEl;
+        return menuEl.clientHeight < menuEl.scrollHeight;
     }
 
     _updateGroupStateForItem(item) {
@@ -2236,7 +2844,7 @@ class DropList {
             let affectedItems = 0;
 
             if (p.autoCheckGroupChildren) {
-                let items = p.items;
+                let items = p.filteredItems ?? p.items;
                 let groupIndex = items.indexOf(item);
 
                 for (let i = groupIndex + 1, len = items.length; i < len; i++) {
@@ -2279,7 +2887,7 @@ class DropList {
                 affectedItems: affectedItems,
             });
         } else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
-            let items = p.items;
+            let items = p.filteredItems ?? p.items;
             let itemIndex = items.indexOf(item);
             let groupIndex = -1;
 
@@ -2305,7 +2913,7 @@ class DropList {
         if (!(p.multi && p.autoCheckGroupChildren && groupIndex > -1))
             return this;
 
-        let items = p.items;
+        let items = p.filteredItems ?? p.items;
         let groupItem = items[groupIndex];
 
         if (!groupItem || !groupItem._group) return this;
@@ -2431,7 +3039,7 @@ class DropList {
     _determineVirtualMode(targetItemCount) {
         const p = this._p;
 
-        let items = p.items;
+        let items = p.filteredItems ?? p.items;
         if (targetItemCount === undefined) {
             targetItemCount = items.length;
         }
@@ -2451,7 +3059,21 @@ class DropList {
         // NOTE: a "measure" item will not have full data of original item.
         //      so for a custom renderer - we try to send original item, and fallback to our private list item.
 
-        if (!p.renderItem || p.renderItem(item[ItemSymbol] || item, itemEl) === false) {
+        const originalItem = item[ItemSymbol];
+
+        if (originalItem === NoResultsItemSymbol) {
+            if (p.renderNoResultsItem && p.renderNoResultsItem(item, itemEl) !== false) {
+                return true;
+            }
+
+            itemEl.appendChild(createElement('div', {
+                class: 'droplist-no-results-content',
+                textContent: p.noResultsText,
+            }));
+            return;
+        }
+
+        if (!p.renderItem || p.renderItem(originalItem || item, itemEl) === false) {
             itemEl.appendChild(createElement('span', {
                 class: `${p.baseClassName}__item_label`,
                 textContent: item.label,
@@ -2493,7 +3115,7 @@ class DropList {
         }
 
         let autoWidth = 0;
-        if (!p.useExactTargetWidth) {
+        if (!p.useExactTargetWidth || !targetWidth) {
             if (p.estimateWidth || p.virtualListHelper.isVirtual()) {
                 autoWidth = p.lastMeasureItemWidth;
             } else {