fix: Moved search to method and dispatch CustomEvent when programatic…

…ally set a value
takenet · Jun 28, 2018 · 2562634 · 2562634
1 parent b2e3496
commit 2562634
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 30 deletions.
diff --git a/src/components/blipSelect/blipSelectAdd.js b/src/components/blipSelect/blipSelectAdd.js
@@ -151,8 +151,8 @@ export class BlipSelectAdd extends BlipSelectBase {
   /**
    * Add new listener to input
    */
-  _onAddInputChange() {
-    if (this.input.value !== '' && !this.isSelectOpen) {
+  _onAddInputChange(event) {
+    if (this.input.value !== '' && !this.isSelectOpen && event.detail.shouldOpenSelect === undefined) {
       this._openSelect()
     }
 

diff --git a/src/components/blipSelect/blipSelectBase.js b/src/components/blipSelect/blipSelectBase.js
@@ -301,22 +301,31 @@ export class BlipSelectBase {
     })
   }
 
+  /**
+   * Get search results
+   */
+  _getSearchResults(query) {
+    return this.configOptions.customSearch
+      ? this.configOptions.customSearch.call(this, EventEmitter({
+        query,
+        items: this.selectOptions,
+      }))
+      : this.selectOptions.filter(
+        ({ value, label }) => label.toLowerCase().includes(query.toLowerCase())
+      )
+  }
+
   /**
    * On input change event
    */
   _onInputChange(event) {
+    console.log('event')
+
     if (typeof this.configOptions.onInputChange !== 'function') {
       throw new Error('Callback "onInputChange" is not a function')
     }
     const inputValue = this.input.value
-    const searchResults = this.configOptions.customSearch
-      ? this.configOptions.customSearch.call(this, EventEmitter({
-        query: inputValue,
-        items: this.selectOptions,
-      }))
-      : this.selectOptions.filter(
-        ({ value, label }) => label.toLowerCase().includes(inputValue.toLowerCase())
-      )
+    const searchResults = this._getSearchResults(inputValue)
 
     this.configOptions.onInputChange(EventEmitter({ value: inputValue, event }))
 
@@ -339,25 +348,6 @@ export class BlipSelectBase {
     }
   }
 
-  /**
-   * Check if the select options have change
-  */
-
-  _checkOptions() {
-    const options = this.el.querySelectorAll('option')
-    if (this.selectOptions.length !== options.length) {
-      this.selectOptions = []
-      Array.prototype.forEach.call(options, (element) => {
-        this.selectOptions = this.selectOptions.concat({
-          value: element.value,
-          label: element.label,
-          element,
-        })
-      })
-      this._arrayToDomOptions(this.selectOptions)
-    }
-  }
-
   /**
    * Clear input value
    */
@@ -383,6 +373,9 @@ export class BlipSelectBase {
       } else {
         this._setInputValue({ value, label })
       }
+
+      const event = new CustomEvent('keyup', { detail: { shouldOpenSelect: false } })
+      this.input.dispatchEvent(event)
     }
   }
 
@@ -451,7 +444,6 @@ export class BlipSelectBase {
     if (this.isDisabled || (this.input.value === '' && this.configOptions.canAddOption && this.selectOptions.length === 0)) {
       return
     }
-    this._checkOptions()
     if (typeof this.configOptions.beforeOpenSelect !== 'function') {
       throw Error('Callback "beforeOpenSelect" is not a function')
     }