fix: Merge pull request #14 from takenet/feature/select-functionalities

added autocomplete select new funcitonalities
takenet · Jun 27, 2018 · b03e5c7 · b03e5c7
2 parents 1b0516d + 7049759
commit b03e5c7
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/src/components/blipSelect/blipSelectAdd.js b/src/components/blipSelect/blipSelectAdd.js
@@ -81,6 +81,36 @@ export class BlipSelectAdd extends BlipSelectBase {
     this._closeSelect()
   }
 
+  /**
+   * Set value to input
+   * @param {Object} object - value/label pair
+   */
+  _setInputValue({ value, label }) {
+    this.input.value = label || value
+    if (typeof this.configOptions.onSelectOption !== 'function') {
+      throw new Error('Callback "onSelectOption" is not a function')
+    }
+    if (this.configAddOptions.canAddOption) {
+      this._removeAddOptionNode()
+    }
+
+    if (value || label) {
+      this.configOptions.onSelectOption.call(this, EventEmitter({ value, label }))
+    }
+  }
+
+  /**
+   * Search for value in options list
+   * @param {String} value - search value
+   */
+  _removeAddOptionNode() {
+    const addOption = this.selectOptionsContainer.querySelector('.blip-select__add-option')
+    if (addOption) {
+      this.selectOptionsContainer.removeChild(addOption)
+    }
+    this._arrayToDomOptions(this.selectOptions)
+  }
+
   /**
    * Search for value in options list
    * @param {String} value - search value

diff --git a/src/components/blipSelect/blipSelectBase.js b/src/components/blipSelect/blipSelectBase.js
@@ -308,7 +308,6 @@ export class BlipSelectBase {
     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({
@@ -331,7 +330,6 @@ export class BlipSelectBase {
    */
   _setInputValue({ value, label }) {
     this.input.value = label || value
-
     if (typeof this.configOptions.onSelectOption !== 'function') {
       throw new Error('Callback "onSelectOption" is not a function')
     }
@@ -341,6 +339,25 @@ 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
    */
@@ -429,7 +446,7 @@ 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')
     }
@@ -475,7 +492,6 @@ export class BlipSelectBase {
     if (this._isPartOfComponent(e)) {
       return
     }
-
     this.configOptions.onBlur(e)
 
     setTimeout(() => { // Needed for get option value on "li" click