romo 0.20.10 → 0.20.11

data/assets/js/romo/select.js

@@ -71,27 +71,50 @@ RomoSelect.prototype._bindSelectedOptionsList = function() {
   this.romoSelectedOptionsList = undefined;
   if (this.elem.multiple === true) {
     if (Romo.data(this.elem, 'romo-select-multiple-item-class') !== undefined) {
-      Romo.setData(this.romoSelectDropdown.elem, 'romo-selected-options-list-item-class', Romo.data(this.elem, 'romo-select-multiple-item-class'));
+      Romo.setData(
+        this.romoSelectDropdown.elem,
+        'romo-selected-options-list-item-class',
+        Romo.data(this.elem, 'romo-select-multiple-item-class')
+      );
     }
     if (Romo.data(this.elem, 'romo-select-multiple-max-rows') !== undefined) {
-      Romo.setData(this.romoSelectDropdown.elem, 'romo-selected-options-list-max-rows', Romo.data(this.elem, 'romo-select-multiple-max-rows'));
+      Romo.setData(
+        this.romoSelectDropdown.elem,
+        'romo-selected-options-list-max-rows',
+        Romo.data(this.elem, 'romo-select-multiple-max-rows')
+      );
     }
 
     this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoSelectDropdown.elem);
-    Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:itemClick', Romo.proxy(function(e, itemValue, romoSelectedOptionsList) {
-      var currentValues = this._elemValues();
-      var index         = currentValues.indexOf(itemValue);
-      if (index > -1) {
-        currentValues.splice(index, 1);
-        this._setValues(currentValues);
-      }
-      this.romoSelectedOptionsList.doRemoveItem(itemValue);
-      this._refreshUI();
-    }, this));
-    Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:listClick', Romo.proxy(function(e, romoSelectedOptionsList) {
-      Romo.trigger(this.romoSelectDropdown.elem, 'romoDropdown:triggerPopupClose', []);
-      this.romoSelectDropdown.doFocus(false);
-    }, this));
+    Romo.on(
+      this.romoSelectedOptionsList.elem,
+      'romoSelectedOptionsList:itemClick',
+      Romo.proxy(function(e, itemValue, romoSelectedOptionsList) {
+        var currentValues = this._elemValues();
+        var index         = currentValues.indexOf(itemValue);
+        if (index > -1) {
+          currentValues.splice(index, 1);
+          this._setValues(currentValues);
+        }
+        this.romoSelectedOptionsList.doRemoveItem(itemValue);
+        this._refreshUI();
+
+        Romo.trigger(this.elem, 'change');
+        Romo.trigger(
+          this.elem,
+          'romoSelect:multipleChange',
+          [currentValues, itemValue, this]
+        );
+      }, this)
+    );
+    Romo.on(
+      this.romoSelectedOptionsList.elem,
+      'romoSelectedOptionsList:listClick',
+      Romo.proxy(function(e, romoSelectedOptionsList) {
+        Romo.trigger(this.romoSelectDropdown.elem, 'romoDropdown:triggerPopupClose', []);
+        this.romoSelectDropdown.doFocus(false);
+      }, this)
+    );
 
     Romo.before(this.elemWrapper, this.romoSelectedOptionsList.elem);
     this.romoSelectedOptionsList.doRefreshUI();
@@ -101,83 +124,181 @@ RomoSelect.prototype._bindSelectedOptionsList = function() {
 RomoSelect.prototype._bindSelectDropdown = function() {
   this.romoSelectDropdown = new RomoSelectDropdown(this._buildSelectDropdownElem(), this.elem);
 
-  Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown, romoSelectDropdown) {
-    Romo.trigger(this.elem, 'romoSelect:romoDropdown:toggle', [romoDropdown, this]);
-  }, this));
-  Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown, romoSelectDropdown) {
-    Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupOpen', [romoDropdown, this]);
-  }, this));
-  Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown, romoSelectDropdown) {
-    Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupClose', [romoDropdown, this]);
-  }, this));
+  Romo.on(
+    this.romoSelectDropdown.elem,
+    'romoSelectDropdown:romoDropdown:toggle',
+    Romo.proxy(function(e, romoDropdown, romoSelectDropdown) {
+      Romo.trigger(this.elem, 'romoSelect:romoDropdown:toggle', [romoDropdown, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoSelectDropdown.elem,
+    'romoSelectDropdown:romoDropdown:popupOpen',
+    Romo.proxy(function(e, romoDropdown, romoSelectDropdown) {
+      Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupOpen', [romoDropdown, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoSelectDropdown.elem,
+    'romoSelectDropdown:romoDropdown:popupClose',
+    Romo.proxy(function(e, romoDropdown, romoSelectDropdown) {
+      Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupClose', [romoDropdown, this]);
+    }, this)
+  );
 
-  Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) {
-    this.romoSelectDropdown.doFocus();
-    Romo.trigger(this.elem, 'romoSelect:itemSelected', [itemValue, itemDisplayText, this]);
-  }, this));
-  Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) {
-    if (this.romoSelectedOptionsList !== undefined) {
-      var currentValues = this._elemValues();
-      if (!currentValues.includes(itemValue)) {
-        this._setValues(currentValues.concat([itemValue]));
-        this.romoSelectedOptionsList.doAddItem({
-          'value':       itemValue,
-          'displayText': itemDisplayText
-        });
+  Romo.on(
+    this.romoSelectDropdown.elem,
+    'romoSelectDropdown:itemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) {
+      this.romoSelectDropdown.doFocus();
+      Romo.trigger(this.elem, 'romoSelect:itemSelected', [itemValue, itemDisplayText, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoSelectDropdown.elem,
+    'romoSelectDropdown:newItemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) {
+      if (this.romoSelectedOptionsList !== undefined) {
+        var currentValues = this._elemValues();
+        if (!currentValues.includes(itemValue)) {
+          this._setValues(currentValues.concat([itemValue]));
+          this.romoSelectedOptionsList.doAddItem({
+            'value':       itemValue,
+            'displayText': itemDisplayText
+          });
+        }
+      } else {
+        this._setValues([itemValue]);
       }
-    } else {
-      this._setValues([itemValue]);
-    }
-    this._refreshUI();
-    Romo.trigger(this.elem, 'romoSelect:newItemSelected', [itemValue, itemDisplayText, this]);
-  }, this));
-  Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:change', Romo.proxy(function(e, newValue, prevValue, romoSelectDropdown) {
-    Romo.trigger(this.elem, 'change');
-    Romo.trigger(this.elem, 'romoSelect:change', [newValue, prevValue, this]);
-  }, this));
+      this._refreshUI();
+      Romo.trigger(this.elem, 'romoSelect:newItemSelected', [itemValue, itemDisplayText, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoSelectDropdown.elem,
+    'romoSelectDropdown:change',
+    Romo.proxy(function(e, newValue, prevValue, romoSelectDropdown) {
+      Romo.trigger(this.elem, 'change');
+      if (this.romoSelectedOptionsList !== undefined) {
+        Romo.trigger(
+          this.elem,
+          'romoSelect:multipleChange',
+          [this._elemValues(), newValue, this]
+        );
+      } else {
+        Romo.trigger(this.elem, 'romoSelect:change', [newValue, prevValue, this]);
+      }
+    }, this)
+  );
 }
 
 RomoSelect.prototype._buildSelectDropdownElem = function() {
-  var romoSelectDropdownElem = Romo.elems('<div class="romo-select romo-btn" tabindex="0"><span class="romo-select-text"></span></div>')[0];
+  var romoSelectDropdownElem = Romo.elems(
+    '<div class="romo-select romo-btn" tabindex="0">'+
+      '<span class="romo-select-text"></span>'+
+    '</div>'
+  )[0];
 
   Romo.setData(romoSelectDropdownElem, 'romo-dropdown-overflow-x', 'hidden');
   Romo.setData(romoSelectDropdownElem, 'romo-dropdown-width',      'elem');
 
   if (Romo.data(this.elem, 'romo-select-dropdown-position') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-dropdown-position', Romo.data(this.elem, 'romo-select-dropdown-position'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-dropdown-position',
+      Romo.data(this.elem, 'romo-select-dropdown-position')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-style-class') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-dropdown-style-class', Romo.data(this.elem, 'romo-select-dropdown-style-class'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-dropdown-style-class',
+      Romo.data(this.elem, 'romo-select-dropdown-style-class')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-min-height') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-dropdown-min-height',  Romo.data(this.elem, 'romo-select-dropdown-min-height'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-dropdown-min-height',
+      Romo.data(this.elem, 'romo-select-dropdown-min-height')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-max-height') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-dropdown-max-height',  Romo.data(this.elem, 'romo-select-dropdown-max-height'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-dropdown-max-height',
+      Romo.data(this.elem, 'romo-select-dropdown-max-height')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-height') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-dropdown-height', Romo.data(this.elem, 'romo-select-dropdown-height'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-dropdown-height',
+      Romo.data(this.elem, 'romo-select-dropdown-height')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-select-dropdown-append-to-closest') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-append-to-closest',
+      Romo.data(this.elem, 'romo-select-dropdown-append-to-closest')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-select-dropdown-append-to') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-append-to',
+      Romo.data(this.elem, 'romo-select-dropdown-append-to')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-filter-placeholder') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-select-filter-placeholder'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-select-dropdown-filter-placeholder',
+      Romo.data(this.elem, 'romo-select-filter-placeholder')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-filter-indicator') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-filter-indicator', Romo.data(this.elem, 'romo-select-filter-indicator'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-select-dropdown-filter-indicator',
+      Romo.data(this.elem, 'romo-select-filter-indicator')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-filter-indicator-width-px') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-filter-indicator-width-px', Romo.data(this.elem, 'romo-select-filter-indicator-width-px'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-select-dropdown-filter-indicator-width-px',
+      Romo.data(this.elem, 'romo-select-filter-indicator-width-px')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-no-filter') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-no-filter', Romo.data(this.elem, 'romo-select-no-filter'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-select-dropdown-no-filter',
+      Romo.data(this.elem, 'romo-select-no-filter')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-custom-option') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-custom-option', Romo.data(this.elem, 'romo-select-custom-option'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-select-dropdown-custom-option',
+      Romo.data(this.elem, 'romo-select-custom-option')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-custom-option-prompt') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-custom-option-prompt', Romo.data(this.elem, 'romo-select-custom-option-prompt'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-select-dropdown-custom-option-prompt',
+      Romo.data(this.elem, 'romo-select-custom-option-prompt')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-open-on-focus') !== undefined) {
-    Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-open-on-focus', Romo.data(this.elem, 'romo-select-open-on-focus'));
+    Romo.setData(
+      romoSelectDropdownElem,
+      'romo-select-dropdown-open-on-focus',
+      Romo.data(this.elem, 'romo-select-open-on-focus')
+    );
   }
 
   if (Romo.data(romoSelectDropdownElem, 'romo-dropdown-max-height') === undefined) {
@@ -210,7 +331,11 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
   var caretClass = Romo.data(this.elem, 'romo-select-caret') || this.defaultCaretClass;
   if (caretClass !== undefined && caretClass !== 'none') {
     this.caretElem = Romo.elems('<i class="romo-select-caret '+caretClass+'"></i>')[0];
-    Romo.setStyle(this.caretElem, 'line-height', Romo.css(romoSelectDropdownElem, 'line-height'));
+    Romo.setStyle(
+      this.caretElem,
+      'line-height',
+      Romo.css(romoSelectDropdownElem, 'line-height')
+    );
     Romo.on(this.caretElem, 'click', Romo.proxy(this._onCaretClick, this));
     Romo.append(romoSelectDropdownElem, this.caretElem);
 
@@ -225,7 +350,11 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
     // + caret width
     // + right-side padding
     var dropdownPaddingPx = caretPaddingPx + caretWidthPx + caretPaddingPx;
-    Romo.setStyle(romoSelectDropdownElem, 'padding-'+caretPosition, dropdownPaddingPx+'px');
+    Romo.setStyle(
+      romoSelectDropdownElem,
+      'padding-'+caretPosition,
+      dropdownPaddingPx+'px'
+    );
   }
 
   return romoSelectDropdownElem;

data/assets/js/romo/select_dropdown.js

@@ -65,52 +65,125 @@ RomoSelectDropdown.prototype._bindElem = function() {
   Romo.setData(this.elem, 'romo-option-list-focus-style-class', 'romo-select-focus');
 
   if (Romo.data(this.elem, 'romo-select-dropdown-no-filter') !== undefined) {
-    Romo.setData(this.elem, 'romo-option-list-dropdown-no-filter', Romo.data(this.elem, 'romo-select-dropdown-no-filter'));
+    Romo.setData(
+      this.elem,
+      'romo-option-list-dropdown-no-filter',
+      Romo.data(this.elem, 'romo-select-dropdown-no-filter')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-filter-placeholder') !== undefined) {
-    Romo.setData(this.elem, 'romo-option-list-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-select-dropdown-filter-placeholder'));
+    Romo.setData(
+      this.elem,
+      'romo-option-list-dropdown-filter-placeholder',
+      Romo.data(this.elem, 'romo-select-dropdown-filter-placeholder')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-filter-indicator') !== undefined) {
-    Romo.setData(this.elem, 'romo-option-list-dropdown-filter-indicator', Romo.data(this.elem, 'romo-select-dropdown-filter-indicator'));
+    Romo.setData(
+      this.elem,
+      'romo-option-list-dropdown-filter-indicator',
+      Romo.data(this.elem, 'romo-select-dropdown-filter-indicator')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-filter-indicator-width-px') !== undefined) {
-    Romo.setData(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px', Romo.data(this.elem, 'romo-select-dropdown-filter-indicator-width-px'));
+    Romo.setData(
+      this.elem,
+      'romo-option-list-dropdown-filter-indicator-width-px',
+      Romo.data(this.elem, 'romo-select-dropdown-filter-indicator-width-px')
+    );
   }
   if (Romo.data(this.elem, 'romo-select-dropdown-open-on-focus') !== undefined) {
-    Romo.setData(this.elem, 'romo-option-list-dropdown-open-on-focus', Romo.data(this.elem, 'romo-select-dropdown-open-on-focus'));
+    Romo.setData(
+      this.elem,
+      'romo-option-list-dropdown-open-on-focus',
+      Romo.data(this.elem, 'romo-select-dropdown-open-on-focus')
+    );
   }
 
-  Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown) {
-    Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:toggle', [romoDropdown, this]);
-  }, this));
-  Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown) {
-    Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:popupOpen', [romoDropdown, this]);
-  }, this));
-  Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown) {
-    Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:popupClose', [romoDropdown, this]);
-  }, this));
-  Romo.on(this.elem, 'romoOptionListDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
-    Romo.trigger(this.elem, 'romoSelectDropdown:itemSelected', [itemValue, itemDisplayText, this]);
-  }, this));
-  Romo.on(this.elem, 'romoOptionListDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
-    var custOptElem = Romo.find(this.optionElemsParentElem, 'OPTION[data-romo-select-dropdown-custom-option="true"]')[0];
-    if (Romo.find(this.optionElemsParentElem, 'OPTION[value="'+itemValue+'"]').length === 0){
-      // a custom value is being selected. add a custom option elem and update its value/text
-      if (custOptElem === undefined) {
-        Romo.appendHtml(this.optionElemsParentElem, '<option data-romo-select-dropdown-custom-option="true"></option>');
-        custOptElem = Romo.find(this.optionElemsParentElem, 'OPTION[data-romo-select-dropdown-custom-option="true"]')[0];
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:romoDropdown:toggle',
+    Romo.proxy(function(e, romoDropdown) {
+      Romo.trigger(
+        this.elem,
+        'romoSelectDropdown:romoDropdown:toggle',
+        [romoDropdown, this]
+      );
+    }, this)
+  );
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:romoDropdown:popupOpen',
+    Romo.proxy(function(e, romoDropdown) {
+      Romo.trigger(
+        this.elem,
+        'romoSelectDropdown:romoDropdown:popupOpen',
+        [romoDropdown, this]
+      );
+    }, this)
+  );
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:romoDropdown:popupClose',
+    Romo.proxy(function(e, romoDropdown) {
+      Romo.trigger(
+        this.elem,
+        'romoSelectDropdown:romoDropdown:popupClose',
+        [romoDropdown, this]
+      );
+    }, this)
+  );
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:itemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
+      Romo.trigger(
+        this.elem,
+        'romoSelectDropdown:itemSelected',
+        [itemValue, itemDisplayText, this]
+      );
+    }, this)
+  );
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:newItemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
+      var custOptElem = Romo.find(
+        this.optionElemsParentElem,
+        'OPTION[data-romo-select-dropdown-custom-option="true"]'
+      )[0];
+      if (Romo.find(this.optionElemsParentElem, 'OPTION[value="'+itemValue+'"]').length === 0){
+        // a custom value is being selected. add a custom option elem and update its value/text
+        if (custOptElem === undefined) {
+          Romo.appendHtml(
+            this.optionElemsParentElem,
+            '<option data-romo-select-dropdown-custom-option="true"></option>'
+          );
+          custOptElem = Romo.find(
+            this.optionElemsParentElem,
+            'OPTION[data-romo-select-dropdown-custom-option="true"]'
+          )[0];
+        }
+        Romo.setAttr(custOptElem, 'value', itemValue);
+        Romo.updateText(custOptElem,  itemDisplayText);
+      } else if (custOptElem !== undefined) {
+        // a non custom value is being selected. remove any existing custom option
+        Romo.remove(custOptElem);
       }
-      Romo.setAttr(custOptElem, 'value', itemValue);
-      Romo.updateText(custOptElem,  itemDisplayText);
-    } else if (custOptElem !== undefined) {
-      // a non custom value is being selected. remove any existing custom option
-      Romo.remove(custOptElem);
-    }
-    Romo.trigger(this.elem, 'romoSelectDropdown:newItemSelected', [itemValue, itemDisplayText, this]);
-  }, this));
-  Romo.on(this.elem, 'romoOptionListDropdown:change', Romo.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
-    Romo.trigger(this.elem, 'romoSelectDropdown:change', [newValue, prevValue, this]);
-  }, this));
+      Romo.trigger(
+        this.elem,
+        'romoSelectDropdown:newItemSelected',
+        [itemValue, itemDisplayText, this]
+      );
+    }, this)
+  );
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:change',
+    Romo.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
+      Romo.trigger(this.elem, 'romoSelectDropdown:change', [newValue, prevValue, this]);
+    }, this)
+  );
 
 
   Romo.on(this.elem, 'romoSelectDropdown:triggerToggle', Romo.proxy(function(e) {
@@ -125,29 +198,45 @@ RomoSelectDropdown.prototype._bindElem = function() {
 
   this.romoOptionListDropdown = new RomoOptionListDropdown(this.elem);
 
-  Romo.on(this.elem, 'romoOptionListDropdown:filterChange', Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
-    var elems    = Romo.find(this.optionElemsParentElem, 'OPTION');
-    var wbFilter = new RomoWordBoundaryFilter(filterValue, elems, function(elem) {
-      // The romo word boundary filter by default considers a space, "-" and "_"
-      // as word boundaries.  We want to also consider other non-word characters
-      // (such as ":", "/", ".", "?", "=", "&") as word boundaries as well.
-      return elem.textContent.replace(/\W/g, ' ');
-    });
-
-    Romo.removeClass(wbFilter.matchingElems, this.filterHiddenClass);
-    Romo.addClass(wbFilter.notMatchingElems, this.filterHiddenClass);
-    this._setListItems();
-
-    if (filterValue !== '') {
-      Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.optItemElems()[0]]);
-    } else {
-      Romo.trigger(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
-    }
-  }, this));
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:filterChange',
+    Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
+      var elems    = Romo.find(this.optionElemsParentElem, 'OPTION');
+      var wbFilter = new RomoWordBoundaryFilter(filterValue, elems, function(elem) {
+        // The romo word boundary filter by default considers a space, "-" and "_"
+        // as word boundaries.  We want to also consider other non-word characters
+        // (such as ":", "/", ".", "?", "=", "&") as word boundaries as well.
+        return elem.textContent.replace(/\W/g, ' ');
+      });
+
+      Romo.removeClass(wbFilter.matchingItems, this.filterHiddenClass);
+      Romo.addClass(wbFilter.notMatchingItems, this.filterHiddenClass);
+      this._setListItems();
+
+      if (filterValue !== '') {
+        Romo.trigger(
+          this.romoOptionListDropdown.elem,
+          'romoOptionListDropdown:triggerListOptionsUpdate',
+          [this.optItemElems()[0]]
+        );
+      } else {
+        Romo.trigger(
+          this.elem,
+          'romoOptionListDropdown:triggerListOptionsUpdate',
+          [this.selectedItemElem()]
+        );
+      }
+    }, this)
+  );
 
   this._sanitizeOptions();
   this._setListItems();
-  Romo.trigger(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
+  Romo.trigger(
+    this.elem,
+    'romoOptionListDropdown:triggerListOptionsUpdate',
+    [this.selectedItemElem()]
+  );
 
   if (Romo.attr(this.elem, 'id') !== undefined) {
     var labelElem = Romo.f('label[for="'+Romo.attr(this.elem, 'id')+'"]');
@@ -176,20 +265,20 @@ RomoSelectDropdown.prototype._setListItems = function() {
 }
 
 RomoSelectDropdown.prototype._buildOptionListItems = function(optionElems) {
-  var list = [];
+  var items = [];
 
   optionElems.forEach(Romo.proxy(function(optElem) {
     if (optElem.tagName === "OPTION") {
-      list.push(this._buildOptionItem(optElem));
+      items.push(this._buildOptionItem(optElem));
     } else if (optElem.tagName === "OPTGROUP") {
       var optGroupItem = this._buildOptGroupItem(optElem);
       if (optGroupItem.items.length !== 0) {
-        list.push(optGroupItem);
+        items.push(optGroupItem);
       }
     }
   }, this));
 
-  return list;
+  return items;
 }
 
 RomoSelectDropdown.prototype._buildOptionItem = function(optionElem) {
@@ -245,7 +334,7 @@ RomoSelectDropdown.prototype._buildCustomOptionItem = function(value) {
     'type':        'option',
     'value':       value,
     'displayText': value,
-    'displayHtml': value
+    'displayHtml': '<span>'+value+'</span>'
   };
 }