From 859653ff723278f53464c7072edcd9616cbd09fd Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Wed, 18 Oct 2017 08:43:56 +0100
Subject: [PATCH] Expose methods from wrapped elements

---
 src/scripts/src/choices.js                    | 22 +++++++---------
 src/scripts/src/components/wrapped-element.js | 13 ++++++++++
 src/scripts/src/components/wrapped-input.js   | 13 ++++++++++
 src/scripts/src/components/wrapped-select.js  | 26 +++++++++++++++++++
 4 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/scripts/src/choices.js b/src/scripts/src/choices.js
index 81f2c78..aa52963 100644
--- a/src/scripts/src/choices.js
+++ b/src/scripts/src/choices.js
@@ -359,9 +359,9 @@ class Choices {
       // Simplify store data to just values
       const itemsFiltered = this.store.getItemsReducedToValues(items);
       const itemsFilteredString = itemsFiltered.join(this.config.delimiter);
+
       // Update the value of the hidden input
-      this.passedElement.element.setAttribute('value', itemsFilteredString);
-      this.passedElement.element.value = itemsFilteredString;
+      this.passedElement.setValue(itemsFilteredString);
     } else {
       const selectedOptionsFragment = document.createDocumentFragment();
       const addOptionToFragment = (item) => {
@@ -373,10 +373,8 @@ class Choices {
 
       // Add each list item to list
       items.forEach(item => addOptionToFragment(item));
-
-      // Update selected choices
-      this.passedElement.element.innerHTML = '';
-      this.passedElement.element.appendChild(selectedOptionsFragment);
+      // Update the options of the hidden input
+      this.passedElement.setOptions(selectedOptionsFragment);
     }
 
     const addItemToFragment = (item) => {
@@ -922,11 +920,10 @@ class Choices {
       return this;
     }
 
-    this.passedElement.element.disabled = false;
+    this.passedElement.enable();
 
     if (this.containerOuter.isDisabled) {
       this._addEventListeners();
-      this.passedElement.element.removeAttribute('disabled');
       this.input.enable();
       this.containerOuter.enable();
     }
@@ -944,11 +941,10 @@ class Choices {
       return this;
     }
 
-    this.passedElement.element.disabled = true;
+    this.passedElement.disable();
 
     if (!this.containerOuter.isDisabled) {
       this._removeEventListeners();
-      this.passedElement.element.setAttribute('disabled', '');
       this.input.disable();
       this.containerOuter.disable();
     }
@@ -2309,14 +2305,14 @@ class Choices {
     }
 
     if (this.isSelectElement) {
-      const passedGroups = Array.from(this.passedElement.element.getElementsByTagName('OPTGROUP'));
+      const passedGroups = this.passedElement.getOptionGroups();
 
       this.highlightPosition = 0;
       this.isSearching = false;
 
       if (passedGroups && passedGroups.length) {
         // If we have a placeholder option
-        const placeholderChoice = this.passedElement.element.querySelector('option[placeholder]');
+        const placeholderChoice = this.passedElement.getPlaceholderOption();
         if (placeholderChoice && placeholderChoice.parentNode.tagName === 'SELECT') {
           this._addChoice(
             placeholderChoice.value,
@@ -2333,7 +2329,7 @@ class Choices {
           this._addGroup(group, (group.id || null));
         });
       } else {
-        const passedOptions = Array.from(this.passedElement.element.options);
+        const passedOptions = this.passedElement.getOptions();
         const filter = this.config.sortFilter;
         const allChoices = this.presetChoices;
 
diff --git a/src/scripts/src/components/wrapped-element.js b/src/scripts/src/components/wrapped-element.js
index f5bfa3d..e273f2a 100644
--- a/src/scripts/src/components/wrapped-element.js
+++ b/src/scripts/src/components/wrapped-element.js
@@ -3,6 +3,7 @@ export default class WrappedElement {
     this.parentInstance = instance;
     this.element = element;
     this.classNames = classNames;
+    this.isDisabled = false;
   }
 
   conceal() {
@@ -50,4 +51,16 @@ export default class WrappedElement {
     // Re-assign values - this is weird, I know
     this.element.value = this.element.value;
   }
+
+  enable() {
+    this.element.removeAttribute('disabled');
+    this.element.disabled = false;
+    this.isDisabled = false;
+  }
+
+  disable() {
+    this.element.setAttribute('disabled', '');
+    this.element.disabled = true;
+    this.isDisabled = true;
+  }
 }
diff --git a/src/scripts/src/components/wrapped-input.js b/src/scripts/src/components/wrapped-input.js
index 7254395..48c44ee 100644
--- a/src/scripts/src/components/wrapped-input.js
+++ b/src/scripts/src/components/wrapped-input.js
@@ -15,4 +15,17 @@ export default class WrappedInput extends WrappedElement {
   reveal() {
     super.reveal();
   }
+
+  enable() {
+    super.enable();
+  }
+
+  disable() {
+    super.enable();
+  }
+
+  setValue(value) {
+    this.element.setAttribute('value', value);
+    this.element.value = value;
+  }
 }
diff --git a/src/scripts/src/components/wrapped-select.js b/src/scripts/src/components/wrapped-select.js
index 6fb4a71..ec03ed3 100644
--- a/src/scripts/src/components/wrapped-select.js
+++ b/src/scripts/src/components/wrapped-select.js
@@ -15,4 +15,30 @@ export default class WrappedSelect extends WrappedElement {
   reveal() {
     super.reveal();
   }
+
+  enable() {
+    super.enable();
+  }
+
+  disable() {
+    super.enable();
+  }
+
+  setOptions(options) {
+    this.element.innerHTML = '';
+    this.element.appendChild(options);
+  }
+
+  getPlaceholderOption() {
+    return this.element.querySelector('option[placeholder]');
+  }
+
+  getOptions() {
+    return Array.from(this.element.options);
+  }
+
+  getOptionGroups() {
+    return Array.from(this.element.getElementsByTagName('OPTGROUP'));
+  }
+
 }