Async

src/Item.html

@@ -1 +1,3 @@
-{ getOptionLabel(item) }
+<div class="item">
+  {@html getOptionLabel(item)}
+</div>

src/List.html

@@ -9,11 +9,11 @@
   {/if}
 
   <div on:mouseover="handleHover(i)" on:click="handleClick(item, i, event)"
-       class="listItem {itemClasses(hoverItemIndex, item, i, items, selectedValue, getValue)}">
+       class="listItem {itemClasses(hoverItemIndex, item, i, items, selectedValue, optionIdentifier)}">
     <svelte:component this="{Item}" {item} {getOptionLabel}/>
   </div>
   {:else}
-  <div class="empty">No options</div>
+  <div class="empty">{noOptionsMessage}</div>
   {/each}
 </div>
 
@@ -45,7 +45,7 @@
     line-height: 40px;
     padding: 0 20px;
     text-overflow: ellipsis;
-    overflow-x: hidden;
+    overflow: hidden;
     white-space: nowrap;
   }
 
@@ -80,13 +80,34 @@
     data() {
       return {
         hoverItemIndex: 0,
+        optionIdentifier: 'value',
         items: [],
         Item,
         selectedValue: undefined,
         getOptionLabel: (option) => option.label,
-        getValue: (option) => option.value
+        noOptionsMessage: 'No options'
       }
     },
+    oncreate() {
+      this.isScrollingTimer = 0;
+
+      this.refs.container.addEventListener('scroll', () => {
+        clearTimeout(this.isScrollingTimer);
+
+        this.set({
+          isScrolling: true
+        });
+
+        this.isScrollingTimer = setTimeout(() => {
+          this.set({
+            isScrolling: false
+          });
+        }, 100);
+      }, false);
+    },
+    ondestroy() {
+      clearTimeout(this.isScrollingTimer);
+    },
     onupdate({changed, current}) {
       if (changed.items && current.items.length > 0) {
         if (!current.items[current.hoverItemIndex]) {
@@ -104,24 +125,27 @@
       }
       if (changed.selectedValue && current.selectedValue) {
         this.scrollToActiveItem('active');
+
         if (current.items && !current.isMulti) {
-          const hoverItemIndex = current.items.findIndex((item) => current.getValue(item) === current.getValue(current.selectedValue));
+          const hoverItemIndex = current.items.findIndex((item) => item[current.optionIdentifier] === current.selectedValue[current.optionIdentifier]);
+
           if (hoverItemIndex) {
             this.set({hoverItemIndex});
           }
         }
       }
     },
     helpers: {
-      itemClasses(hoverItemIndex, item, itemIndex, items, selectedValue, getValue) {
-        return `${selectedValue && (getValue(selectedValue) === getValue(item)) ? 'active ' : ''}${hoverItemIndex === itemIndex || items.length === 1 ? 'hover' : ''}`;
+      itemClasses(hoverItemIndex, item, itemIndex, items, selectedValue, optionIdentifier) {
+        return `${selectedValue && (selectedValue[optionIdentifier] === item[optionIdentifier]) ? 'active ' : ''}${hoverItemIndex === itemIndex || items.length === 1 ? 'hover' : ''}`;
       }
     },
     methods: {
       handleSelect(item) {
         this.fire('itemSelected', item);
       },
       handleHover(i) {
+        if(this.get().isScrolling) return;
         this.set({hoverItemIndex: i});
       },
       handleClick(item, i, event) {
@@ -151,11 +175,11 @@
         switch (e.key) {
           case 'ArrowDown':
             e.preventDefault();
-            this.updateHoverItem(1);
+            items.length && this.updateHoverItem(1);
             break;
           case 'ArrowUp':
             e.preventDefault();
-            this.updateHoverItem(-1);
+            items.length && this.updateHoverItem(-1);
             break;
           case 'Enter':
             e.preventDefault();

src/Select.html

@@ -13,10 +13,10 @@
   {#if isMulti && selectedValue && selectedValue.length > 0}
   <svelte:component
     this="{MultiSelection}"
-    {isDisabled}
     {selectedValue}
     {getSelectionLabel}
     {activeSelectedValue}
+    {isDisabled}
     on:multiItemClear="handleMultiItemClear(event.i)"
     on:focus="handleFocus()"
   />
@@ -231,26 +231,29 @@
   export default {
     data() {
       return {
+        containerStyles: undefined,
         Item,
         Selection,
         MultiSelection,
         items: [],
         filterText: '',
         placeholder: 'Select...',
         listOpen: false,
-        containerStyles: undefined,
         list: undefined,
         target: undefined,
         selectedValue: undefined,
-        groupBy: undefined,
         activeSelectedValue: undefined,
         isClearable: true,
         isMulti: false,
         isSearchable: true,
+        optionIdentifier: 'value',
+        groupBy: undefined,
+        getOptions: undefined,
+        loadOptionsInterval: 200,
+        noOptionsMessage: 'No options',
         groupFilter: (groups) => groups,
         getOptionLabel: (option) => option.label,
         getSelectionLabel: (option) => option.label,
-        getValue: (option) => option.value,
       }
     },
     computed: {
@@ -268,13 +271,13 @@
       placeholderText({selectedValue, placeholder}) {
         return selectedValue ? '' : placeholder
       },
-      filteredItems({items, filterText, groupBy, groupFilter, getOptionLabel, isMulti, selectedValue, getValue}) {
+      filteredItems({items, filterText, groupBy, groupFilter, getOptionLabel, isMulti, selectedValue}) {
         const filteredItems = items.filter(item => {
           let keepItem = true;
 
           if (isMulti && selectedValue) {
             keepItem = !selectedValue.find(({value}) => {
-              return value === getValue(item)
+              return value === item.value
             });
           }
 
@@ -324,10 +327,29 @@
       }
 
       if (changed.filterText) {
-        this.loadList();
-        this.set({listOpen: true});
-        if (current.isMulti) {
-          this.set({activeSelectedValue: undefined})
+        if(current.loadOptions) {
+          clearTimeout(this.loadOptionsTimeout);
+          this.set({isWaiting:true});
+
+          this.loadOptionsTimeout = setTimeout(() => {
+            if(current.filterText) {
+              current.loadOptions(current.filterText).then((response) => {
+                this.set({ items: response });
+              });
+            } else {
+              this.set({ items: [] });
+            }
+
+            this.set({isWaiting:false});
+            this.set({listOpen: true});
+          }, current.loadOptionsInterval);
+        } else {
+          this.loadList();
+          this.set({listOpen: true});
+
+          if (current.isMulti) {
+            this.set({activeSelectedValue: undefined})
+          }
         }
       }
 
@@ -344,6 +366,7 @@
         current.list.set({items: current.filteredItems})
       }
     },
+
     methods: {
       handleMultiItemClear(i) {
         const {selectedValue} = this.get();
@@ -356,7 +379,7 @@
         if (!target) return;
         const {top, height, width} = this.refs.container.getBoundingClientRect();
         target.style.top = `${height + 5}px`;
-        target.style.minWidth = `${width}px`;
+        target.style.width = `${width}px`;
         target.style.left = '0';
         this.set({target});
       },
@@ -437,10 +460,15 @@
         this.handleFocus();
       },
       loadList() {
-        let {target, list, Item, getOptionLabel, items, selectedValue, filteredItems, isMulti, getValue} = this.get();
+        let {target, list, Item, getOptionLabel, optionIdentifier, noOptionsMessage, items, selectedValue, filteredItems, isMulti} = this.get();
         if (target && list) return;
 
-        const data = {Item, getValue};
+        const data = {Item, optionIdentifier, noOptionsMessage};
+
+        if (getOptionLabel) {
+          data.getOptionLabel = getOptionLabel;
+        }
+
         target = document.createElement('div');
 
         Object.assign(target.style, {
@@ -452,10 +480,6 @@
         this.getPosition();
         this.refs.container.appendChild(target);
 
-        if (getOptionLabel) {
-          data.getOptionLabel = getOptionLabel;
-        }
-
         list = new List({
           target,
           data
@@ -467,7 +491,8 @@
 
         list.on('itemSelected', (newSelection) => {
           if (newSelection) {
-            const item = Object.assign({}, items.find(item => getValue(item) === getValue(newSelection)));
+            const item = Object.assign({}, newSelection);
+
             if (isMulti) {
               selectedValue = selectedValue ? selectedValue.concat([item]) : [item];
             } else {
@@ -486,7 +511,10 @@
       }
     },
     oncreate() {
-      const {listOpen} = this.get();
+      const {isFocused,listOpen} = this.get();
+      this.loadOptionsTimeout = undefined;
+
+      if (isFocused) this.refs.input.focus();
       if (listOpen) this.loadList();
     },
     ondestroy() {