romo 0.20.10 → 0.20.11

data/assets/js/romo/dropdown.js

@@ -149,12 +149,20 @@ RomoDropdown.prototype._bindElem = function() {
 
 RomoDropdown.prototype._bindPopup = function() {
   this.popupElem = Romo.elems(
-    '<div class="romo-dropdown-popup"><div class="romo-dropdown-body"></div></div>'
+    '<div class="romo-dropdown-popup">' +
+      '<div class="romo-dropdown-body"></div>' +
+    '</div>'
   )[0];
-  var popupParentElem = Romo.closest(
-    this.elem,
-    Romo.data(this.elem, 'romo-dropdown-append-to-closest') || 'body'
-  );
+
+  var popupParentElem;
+  var appendToClosestSel = Romo.data(this.elem, 'romo-dropdown-append-to-closest');
+  if (appendToClosestSel !== undefined) {
+    popupParentElem = Romo.closest(this.elem, appendToClosestSel);
+  } else {
+    popupParentElem = Romo.f(
+      Romo.data(this.elem, 'romo-dropdown-append-to') || 'BODY'
+    )[0];
+  }
   Romo.append(popupParentElem, this.popupElem);
 
   this.bodyElem = Romo.children(this.popupElem, '.romo-dropdown-body')[0];

data/assets/js/romo/modal.js

@@ -109,9 +109,22 @@ RomoModal.prototype._bindElem = function() {
 }
 
 RomoModal.prototype._bindPopup = function() {
-  this.popupElem = Romo.elems('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>')[0];
-  var popupParentElem = Romo.closest(this.elem, Romo.data(this.elem, 'romo-dropdown-append-to-closest') || 'body');
-  Romo.append(popupParentElem, this.popupElem)
+  this.popupElem = Romo.elems(
+    '<div class="romo-modal-popup">' +
+      '<div class="romo-modal-body"></div>' +
+    '</div>'
+  )[0];
+
+  var popupParentElem;
+  var appendToClosestSel = Romo.data(this.elem, 'romo-modal-append-to-closest');
+  if (appendToClosestSel !== undefined) {
+    popupParentElem = Romo.closest(this.elem, appendToClosestSel);
+  } else {
+    popupParentElem = Romo.f(
+      Romo.data(this.elem, 'romo-modal-append-to') || 'BODY'
+    )[0];
+  }
+  Romo.append(popupParentElem, this.popupElem);
 
   this.bodyElem = Romo.children(this.popupElem, '.romo-modal-body')[0];
   if (Romo.data(this.elem, 'romo-modal-style-class') !== undefined) {

data/assets/js/romo/option_list_dropdown.js

@@ -4,8 +4,14 @@ var RomoOptionListDropdown = RomoComponent(function(elem) {
   this.prevValue       = '';
   this.optionListItems = [];
 
-  var selCustomization = Romo.data(this.elem, 'romo-option-list-dropdown-item-selector-customization') || '';
-  this.itemSelector    = 'LI[data-romo-option-list-dropdown-item="opt"]:not(.disabled)'+selCustomization;
+  var selCustomization = Romo.data(
+    this.elem,
+    'romo-option-list-dropdown-item-selector-customization'
+  ) || '';
+
+  this.itemSelector = (
+    'LI[data-romo-option-list-dropdown-item="opt"]:not(.disabled)'+selCustomization
+  );
   this.focusStyleClass = Romo.data(this.elem, 'romo-option-list-focus-style-class');
   this.openOnFocus     = Romo.data(this.elem, 'romo-option-list-dropdown-open-on-focus');
 
@@ -65,7 +71,9 @@ RomoOptionListDropdown.prototype.doSetSelectedItem = function(itemValue) {
       this.romoDropdown.bodyElem,
       'LI[data-romo-option-list-dropdown-option-value="'+itemValue+'"]'
     )[0];
-    Romo.addClass(itemElem, 'selected');
+    if (itemElem !== undefined) {
+      Romo.addClass(itemElem, 'selected');
+    }
   }
   var selectedElem = this.selectedItemElem();
   if (selectedElem !== undefined) {
@@ -111,9 +119,9 @@ Example:
     { 'type': 'option', 'value': '3', 'displayText': '3', 'displayHtml': '<span>3</span>' }
   ] },
   { 'type': 'optgroup', 'label': 'Symbols', 'items': [
-    { 'type': 'option', 'value': 'exclamation', 'displayText': '!', 'displayHtml': '<span>!</span>' },
-    { 'type': 'option', 'value': 'at',          'displayText': '@', 'displayHtml': '<span>@</span>' },
-    { 'type': 'option', 'value': 'pound',       'displayText': '#', 'displayHtml': '<span>#</span>' }
+    { 'type': 'option', 'value': 'excl',  'displayText': '!', 'displayHtml': '<span>!</span>' },
+    { 'type': 'option', 'value': 'at',    'displayText': '@', 'displayHtml': '<span>@</span>' },
+    { 'type': 'option', 'value': 'pound', 'displayText': '#', 'displayHtml': '<span>#</span>' }
   ] }
 ]
 */
@@ -137,18 +145,34 @@ RomoOptionListDropdown.prototype._bindElem = function() {
   Romo.on(this.elem, 'romoDropdown:popupClose', Romo.proxy(this._onPopupClose,  this));
 
   Romo.on(this.elem, 'romoDropdown:toggle', Romo.proxy(function(e, romoDropdown) {
-    Romo.trigger(this.elem, 'romoOptionListDropdown:romoDropdown:toggle', [romoDropdown, this]);
+    Romo.trigger(
+      this.elem,
+      'romoOptionListDropdown:romoDropdown:toggle',
+      [romoDropdown, this]
+    );
   }, this));
   Romo.on(this.elem, 'romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown) {
-    Romo.trigger(this.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', [romoDropdown, this]);
+    Romo.trigger(
+      this.elem,
+      'romoOptionListDropdown:romoDropdown:popupOpen',
+      [romoDropdown, this]
+    );
   }, this));
   Romo.on(this.elem, 'romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown) {
-    Romo.trigger(this.elem, 'romoOptionListDropdown:romoDropdown:popupClose', [romoDropdown, this]);
+    Romo.trigger(
+      this.elem,
+      'romoOptionListDropdown:romoDropdown:popupClose',
+      [romoDropdown, this]
+    );
   }, this));
 
-  Romo.on(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', Romo.proxy(function(e, highlightOptionElem) {
-   this._updateOptionsListUI(highlightOptionElem);
-  }, this));
+  Romo.on(
+    this.elem,
+    'romoOptionListDropdown:triggerListOptionsUpdate',
+    Romo.proxy(function(e, highlightOptionElem) {
+     this._updateOptionsListUI(highlightOptionElem);
+    }, this)
+  );
 
   Romo.on(this.elem, 'romoOptionListDropdown:triggerToggle', Romo.proxy(function(e) {
     Romo.trigger(this.elem, 'romoDropdown:triggerToggle', []);
@@ -183,14 +207,22 @@ RomoOptionListDropdown.prototype._bindElem = function() {
 
   if (Romo.data(this.elem, 'romo-option-list-dropdown-no-filter') !== true) {
     this.optionFilterElem = this._buildOptionFilter();
-    var optionFilterWrapperElem = Romo.elems('<div class="romo-option-list-dropdown-filter-wrapper"></div>')[0];
+    var optionFilterWrapperElem = Romo.elems(
+      '<div class="romo-option-list-dropdown-filter-wrapper"></div>'
+    )[0];
     Romo.append(optionFilterWrapperElem, this.optionFilterElem);
     Romo.prepend(this.romoDropdown.popupElem, optionFilterWrapperElem);
     this._bindDropdownOptionFilter();
   }
 
-  Romo.append(this.romoDropdown.bodyElem, Romo.elems('<div class="romo-option-list-dropdown-container"></div>')[0]);
-  this.optionListContainerElem = Romo.find(this.romoDropdown.bodyElem, '.romo-option-list-dropdown-container')[0];
+  Romo.append(
+    this.romoDropdown.bodyElem,
+    Romo.elems('<div class="romo-option-list-dropdown-container"></div>')[0]
+  );
+  this.optionListContainerElem = Romo.find(
+    this.romoDropdown.bodyElem,
+    '.romo-option-list-dropdown-container'
+  )[0];
 
   this.doSetListItems([]);
 }
@@ -248,22 +280,36 @@ RomoOptionListDropdown.prototype._buildListOptGroupElem = function(item) {
 }
 
 RomoOptionListDropdown.prototype._buildOptionFilter = function() {
-  var filterElem = Romo.elems('<input type="text" size="1" class="romo-option-list-dropdown-filter"></input>')[0];
+  var filterElem = Romo.elems(
+    '<input type="text" size="1" class="romo-option-list-dropdown-filter"></input>'
+  )[0];
 
   if (Romo.data(this.elem, 'romo-option-list-dropdown-filter-placeholder') !== undefined) {
-    Romo.setAttr(filterElem, 'placeholder', Romo.data(this.elem, 'romo-option-list-dropdown-filter-placeholder'));
+    Romo.setAttr(
+      filterElem,
+      'placeholder',
+      Romo.data(this.elem, 'romo-option-list-dropdown-filter-placeholder')
+    );
   }
   Romo.setData(filterElem, 'romo-indicator-text-input-elem-display',       "block");
   Romo.setData(filterElem, 'romo-indicator-text-input-indicator-position', "right");
   if (Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator') !== undefined) {
-    Romo.setData(filterElem, 'romo-indicator-text-input-indicator', Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator'));
+    Romo.setData(
+      filterElem,
+      'romo-indicator-text-input-indicator',
+      Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator')
+    );
   }
   if (Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px') !== undefined) {
-    Romo.setData(filterElem, 'romo-indicator-text-input-indicator-width-px', Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px'));
+    Romo.setData(
+      filterElem,
+      'romo-indicator-text-input-indicator-width-px',
+      Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px')
+    );
   }
   Romo.setData(filterElem, 'romo-form-disable-enter-submit', "true");
   Romo.setData(filterElem, 'romo-onkey-on',                  "keydown");
-  Romo.setData(filterElem, 'romo-onkey-delay-ms',            100); // 0.1 secs, want it to be really responsive
+  Romo.setData(filterElem, 'romo-onkey-delay-ms',            100); // 0.1 secs, responsive
 
   Romo.setAttr(filterElem, 'autocomplete', 'off');
 
@@ -345,15 +391,23 @@ RomoOptionListDropdown.prototype._bindDropdownOptionFilter = function() {
     this.optionFilterElem.focus();
   }, this));
 
-  Romo.on(this.optionFilterElem, 'romoOnkey:trigger', Romo.proxy(function(e, triggerEvent, romoOnkey) {
-    if (Romo.nonInputTextKeyCodes().indexOf(triggerEvent.keyCode) === -1 /* Input Text */) {
-      this._filterOptionElems();
-    }
-  }, this));
+  Romo.on(
+    this.optionFilterElem,
+    'romoOnkey:trigger',
+    Romo.proxy(function(e, triggerEvent, romoOnkey) {
+      if (Romo.nonInputTextKeyCodes().indexOf(triggerEvent.keyCode) === -1 /* Input Text */) {
+        this._filterOptionElems();
+      }
+    }, this)
+  );
 }
 
 RomoOptionListDropdown.prototype._filterOptionElems = function() {
-  Romo.trigger(this.elem, 'romoOptionListDropdown:filterChange', [this.optionFilterElem.value, this]);
+  Romo.trigger(
+    this.elem,
+    'romoOptionListDropdown:filterChange',
+    [this.optionFilterElem.value, this]
+  );
 }
 
 RomoOptionListDropdown.prototype._updateOptionsListUI = function(highlightOptionElem) {

data/assets/js/romo/picker.js

@@ -5,8 +5,8 @@ var RomoPicker = RomoComponent(function(elem) {
   this.defaultCaretPaddingPx = 5;
   this.defaultCaretWidthPx   = 18;
   this.defaultCaretPosition  = 'right'
-  this.defaultValuesDelim    = ',';
 
+  this.defaultValuesDelim  = ',';
   this.defaultOptionItems  = this._buildDefaultOptionItems();
   this.filteredOptionItems = [];
 
@@ -91,27 +91,50 @@ RomoPicker.prototype._bindSelectedOptionsList = function() {
   this.romoSelectedOptionsList = undefined;
   if (this.elem.multiple === true) {
     if (Romo.data(this.elem, 'romo-picker-multiple-item-class') !== undefined) {
-      Romo.setData(this.romoOptionListDropdown.elem, 'romo-selected-options-list-item-class', Romo.data(this.elem, 'romo-picker-multiple-item-class'));
+      Romo.setData(
+        this.romoOptionListDropdown.elem,
+        'romo-selected-options-list-item-class',
+        Romo.data(this.elem, 'romo-picker-multiple-item-class')
+      );
     }
     if (Romo.data(this.elem, 'romo-picker-multiple-max-rows') !== undefined) {
-      Romo.setData(this.romoOptionListDropdown.elem, 'romo-selected-options-list-max-rows', Romo.data(this.elem, 'romo-picker-multiple-max-rows'));
+      Romo.setData(
+        this.romoOptionListDropdown.elem,
+        'romo-selected-options-list-max-rows',
+        Romo.data(this.elem, 'romo-picker-multiple-max-rows')
+      );
     }
 
     this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoOptionListDropdown.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._setValuesAndDisplayText(currentValues, '');
-      }
-      this.romoSelectedOptionsList.doRemoveItem(itemValue);
-      this._refreshUI();
-    }, this));
-    Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:listClick', Romo.proxy(function(e, romoSelectedOptionsList) {
-      Romo.trigger(this.romoOptionListDropdown.elem, 'romoDropdown:triggerPopupClose', []);
-      this.romoOptionListDropdown.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._setValuesAndDisplayText(currentValues, '');
+        }
+        this.romoSelectedOptionsList.doRemoveItem(itemValue);
+        this._refreshUI();
+
+        Romo.trigger(this.elem, 'change');
+        Romo.trigger(
+          this.elem,
+          'romoPicker:multipleChange',
+          [currentValues, itemValue, this]
+        );
+      }, this)
+    );
+    Romo.on(
+      this.romoSelectedOptionsList.elem,
+      'romoSelectedOptionsList:listClick',
+      Romo.proxy(function(e, romoSelectedOptionsList) {
+        Romo.trigger(this.romoOptionListDropdown.elem, 'romoDropdown:triggerPopupClose', []);
+        this.romoOptionListDropdown.doFocus(false);
+      }, this)
+    );
 
     Romo.before(this.elemWrapper, this.romoSelectedOptionsList.elem);
     this.romoSelectedOptionsList.doRefreshUI();
@@ -123,89 +146,187 @@ RomoPicker.prototype._bindOptionListDropdown = function() {
     this._buildOptionListDropdownElem()
   );
 
-  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
-    Romo.trigger(this.elem, 'romoPicker:romoDropdown:toggle', [romoDropdown, this]);
-  }, this));
-  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
-    Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupOpen', [romoDropdown, this]);
-  }, this));
-  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
-    Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupClose', [romoDropdown, this]);
-  }, this));
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:romoDropdown:toggle',
+    Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+      Romo.trigger(this.elem, 'romoPicker:romoDropdown:toggle', [romoDropdown, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:romoDropdown:popupOpen',
+    Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+      Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupOpen', [romoDropdown, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:romoDropdown:popupClose',
+    Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+      Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupClose', [romoDropdown, this]);
+    }, this)
+  );
 
-  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:filterChange', Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
-    if (filterValue !== '') {
-      // immediately update the custom opt as the filter changes
-      // but keep the current filtered option items
-      this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
-      // this will update with the new filtered items plus the custom on ajax callback
-      Romo.trigger(this.elem, 'romoAjax:triggerInvoke', [{ 'filter': filterValue }]);
-    } else {
-      this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
-    }
-  }, this));
-  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
-    this.romoOptionListDropdown.doFocus();
-    Romo.trigger(this.elem, 'romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
-  }, this));
-  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
-    if (this.romoSelectedOptionsList !== undefined) {
-      var currentValues = this._elemValues();
-      if (!currentValues.includes(itemValue)) {
-        this._setValuesAndDisplayText(currentValues.concat([itemValue]), '');
-        this.romoSelectedOptionsList.doAddItem({
-          'value':       itemValue,
-          'displayText': itemDisplayText
-        });
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:filterChange',
+    Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
+      if (filterValue !== '') {
+        // immediately update the custom opt as the filter changes
+        // but keep the current filtered option items
+        this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
+        // this will update with the new filtered items plus the custom on ajax callback
+        Romo.trigger(this.elem, 'romoAjax:triggerInvoke', [{ 'filter': filterValue }]);
+      } else {
+        this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
       }
-    } else {
-      this._setValuesAndDisplayText([itemValue], itemDisplayText);
-    }
-    this._refreshUI();
-    Romo.trigger(this.elem, 'romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
-  }, this));
-  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:change', Romo.proxy(function(e, newValue, prevValue, optionListDropdown) {
-    Romo.trigger(this.elem, 'change');
-    Romo.trigger(this.elem, 'romoPicker:change', [newValue, prevValue, this]);
-  }, this));
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:itemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
+      this.romoOptionListDropdown.doFocus();
+      Romo.trigger(this.elem, 'romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:newItemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
+      if (this.romoSelectedOptionsList !== undefined) {
+        var currentValues = this._elemValues();
+        if (!currentValues.includes(itemValue)) {
+          this._setValuesAndDisplayText(currentValues.concat([itemValue]), '');
+          this.romoSelectedOptionsList.doAddItem({
+            'value':       itemValue,
+            'displayText': itemDisplayText
+          });
+        }
+      } else {
+        this._setValuesAndDisplayText([itemValue], itemDisplayText);
+      }
+      this._refreshUI();
+      Romo.trigger(this.elem, 'romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:change',
+    Romo.proxy(function(e, newValue, prevValue, optionListDropdown) {
+      Romo.trigger(this.elem, 'change');
+      if (this.romoSelectedOptionsList !== undefined) {
+        Romo.trigger(
+          this.elem,
+          'romoPicker:multipleChange',
+          [this._elemValues(), newValue, this]
+        );
+      } else {
+        Romo.trigger(this.elem, 'romoPicker:change', [newValue, prevValue, this]);
+      }
+    }, this)
+  );
 }
 
 RomoPicker.prototype._buildOptionListDropdownElem = function() {
-  var romoOptionListDropdownElem = Romo.elems('<div class="romo-picker romo-btn" tabindex="0"><span class="romo-picker-text"></span></div>')[0];
-
-  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-overflow-x',           'hidden');
-  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-width',                'elem');
-  Romo.setData(romoOptionListDropdownElem, 'romo-option-list-focus-style-class', 'romo-picker-focus');
+  var romoOptionListDropdownElem = Romo.elems(
+    '<div class="romo-picker romo-btn" tabindex="0">'+
+      '<span class="romo-picker-text"></span>'+
+    '</div>'
+  )[0];
+
+  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-overflow-x', 'hidden');
+  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-width',      'elem');
+  Romo.setData(
+    romoOptionListDropdownElem,
+    'romo-option-list-focus-style-class',
+    'romo-picker-focus'
+  );
 
   if (Romo.data(this.elem, 'romo-picker-dropdown-position') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-position', Romo.data(this.elem, 'romo-picker-dropdown-position'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-position',
+      Romo.data(this.elem, 'romo-picker-dropdown-position')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-dropdown-style-class') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-style-class', Romo.data(this.elem, 'romo-picker-dropdown-style-class'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-style-class',
+      Romo.data(this.elem, 'romo-picker-dropdown-style-class')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-dropdown-min-height') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-min-height', Romo.data(this.elem, 'romo-picker-dropdown-min-height'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-min-height',
+      Romo.data(this.elem, 'romo-picker-dropdown-min-height')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-dropdown-max-height') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-max-height', Romo.data(this.elem, 'romo-picker-dropdown-max-height'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-max-height',
+      Romo.data(this.elem, 'romo-picker-dropdown-max-height')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-dropdown-height') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-height', Romo.data(this.elem, 'romo-picker-dropdown-height'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-height',
+      Romo.data(this.elem, 'romo-picker-dropdown-height')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-picker-dropdown-append-to-closest') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-append-to-closest',
+      Romo.data(this.elem, 'romo-picker-dropdown-append-to-closest')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-picker-dropdown-append-to') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-append-to',
+      Romo.data(this.elem, 'romo-picker-dropdown-append-to')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-filter-placeholder') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-picker-filter-placeholder'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-filter-placeholder',
+      Romo.data(this.elem, 'romo-picker-filter-placeholder')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-filter-indicator') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-filter-indicator', Romo.data(this.elem, 'romo-picker-filter-indicator'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-filter-indicator',
+      Romo.data(this.elem, 'romo-picker-filter-indicator')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-filter-indicator-width-px') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-filter-indicator-width-px', Romo.data(this.elem, 'romo-picker-filter-indicator-width-px'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-filter-indicator-width-px',
+      Romo.data(this.elem, 'romo-picker-filter-indicator-width-px')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-no-filter') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-no-filter', Romo.data(this.elem, 'romo-picker-no-filter'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-no-filter',
+      Romo.data(this.elem, 'romo-picker-no-filter')
+    );
   }
   if (Romo.data(this.elem, 'romo-picker-open-on-focus') !== undefined) {
-    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-open-on-focus', Romo.data(this.elem, 'romo-picker-open-on-focus'));
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-open-on-focus',
+      Romo.data(this.elem, 'romo-picker-open-on-focus')
+    );
   }
 
   if (Romo.data(romoOptionListDropdownElem, 'romo-dropdown-max-height') === undefined) {
@@ -238,7 +359,11 @@ RomoPicker.prototype._buildOptionListDropdownElem = function() {
   var caretClass = Romo.data(this.elem, 'romo-picker-caret') || this.defaultCaretClass;
   if (caretClass !== undefined && caretClass !== 'none') {
     this.caretElem = Romo.elems('<i class="romo-picker-caret '+caretClass+'"></i>')[0];
-    Romo.setStyle(this.caretElem, 'line-height', Romo.css(romoOptionListDropdownElem, 'line-height'));
+    Romo.setStyle(
+      this.caretElem,
+      'line-height',
+      Romo.css(romoOptionListDropdownElem, 'line-height')
+    );
     Romo.on(this.caretElem, 'click', Romo.proxy(this._onCaretClick, this));
     Romo.append(romoOptionListDropdownElem, this.caretElem);
 
@@ -253,7 +378,11 @@ RomoPicker.prototype._buildOptionListDropdownElem = function() {
     // + caret width
     // + right-side padding
     var dropdownPaddingPx = caretPaddingPx + caretWidthPx + caretPaddingPx;
-    Romo.setStyle(romoOptionListDropdownElem, 'padding-'+caretPosition, dropdownPaddingPx+'px');
+    Romo.setStyle(
+      romoOptionListDropdownElem,
+      'padding-'+caretPosition,
+      dropdownPaddingPx+'px'
+    );
   }
 
   return romoOptionListDropdownElem;
@@ -265,18 +394,27 @@ RomoPicker.prototype._bindAjax = function() {
   Romo.setData(this.elem, 'romo-ajax-auto', false);
 
   Romo.on(this.elem, 'romoAjax:callStart', Romo.proxy(function(e, data, romoAjax) {
-    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStart', []);
+    Romo.trigger(
+      this.romoOptionListDropdown.elem,
+      'romoOptionListDropdown:triggerFilterSpinnerStart'
+    );
     return false;
   }, this));
   Romo.on(this.elem, 'romoAjax:callSuccess', Romo.proxy(function(e, data, romoAjax) {
     this.filteredOptionItems = JSON.parse(data);
     this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
-    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStop', []);
+    Romo.trigger(
+      this.romoOptionListDropdown.elem,
+      'romoOptionListDropdown:triggerFilterSpinnerStop'
+    );
     return false;
   }, this));
   Romo.on(this.elem, 'romoAjax:callError', Romo.proxy(function(e, xhr, romoAjax) {
     this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
-    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStop', []);
+    Romo.trigger(
+      this.romoOptionListDropdown.elem,
+      'romoOptionListDropdown:triggerFilterSpinnerStop'
+    );
     return false;
   }, this));
 
@@ -285,7 +423,11 @@ RomoPicker.prototype._bindAjax = function() {
 
 RomoPicker.prototype._setListItems = function(items) {
   this.romoOptionListDropdown.doSetListItems(items);
-  Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.romoOptionListDropdown.optItemElems()[0]]);
+  Romo.trigger(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:triggerListOptionsUpdate',
+    [this.romoOptionListDropdown.optItemElems()[0]]
+  );
 }
 
 RomoPicker.prototype._buildDefaultOptionItems = function() {
@@ -328,7 +470,7 @@ RomoPicker.prototype._buildCustomOptionItem = function(value) {
     'type':        'option',
     'value':       value,
     'displayText': value,
-    'displayHtml': value
+    'displayHtml': '<span>'+value+'</span>'
   };
 }
 
@@ -346,12 +488,12 @@ RomoPicker.prototype._elemValuesDelim = function() {
 }
 
 RomoPicker.prototype._refreshUI = function() {
-  var text = Romo.data(this.elem, 'romo-picker-display-text') || '';
   if (this.romoSelectedOptionsList !== undefined) {
     this.romoSelectedOptionsList.doRefreshUI();
   }
 
   var textElem = Romo.find(this.romoOptionListDropdown.elem, '.romo-picker-text')[0];
+  var text     = Romo.data(this.elem, 'romo-picker-display-text') || '';
   if (text === '') {
     Romo.updateHtml(textElem, '<span>&nbsp;</span>');
   } else {