tom-select-rails 2.2.2 → 2.3.1

data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.popular.js

@@ -1,5 +1,5 @@
 /**
-* Tom Select v2.2.2
+* Tom Select v2.3.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -24,13 +24,11 @@ function forEvents(events, callback) {
     callback(event);
   });
 }
-
 class MicroEvent {
   constructor() {
     this._events = void 0;
     this._events = {};
   }
-
   on(events, fct) {
     forEvents(events, event => {
       const event_array = this._events[event] || [];
@@ -38,28 +36,23 @@ class MicroEvent {
       this._events[event] = event_array;
     });
   }
-
   off(events, fct) {
     var n = arguments.length;
-
     if (n === 0) {
       this._events = {};
       return;
     }
-
     forEvents(events, event => {
       if (n === 1) {
         delete this._events[event];
         return;
       }
-
       const event_array = this._events[event];
       if (event_array === undefined) return;
       event_array.splice(event_array.indexOf(fct), 1);
       this._events[event] = event_array;
     });
   }
-
   trigger(events, ...args) {
     var self = this;
     forEvents(events, event => {
@@ -70,7 +63,6 @@ class MicroEvent {
       });
     });
   }
-
 }
 
 /**
@@ -88,6 +80,7 @@ class MicroEvent {
  *
  * @author Brian Reavis <brian@thirdroute.com>
  */
+
 function MicroPlugin(Interface) {
   Interface.plugins = {};
   return class extends Interface {
@@ -100,7 +93,6 @@ function MicroPlugin(Interface) {
         loaded: {}
       };
     }
-
     /**
      * Registers a plugin.
      *
@@ -112,6 +104,7 @@ function MicroPlugin(Interface) {
         'fn': fn
       };
     }
+
     /**
      * Initializes the listed plugins (with options).
      * Acceptable formats:
@@ -127,13 +120,10 @@ function MicroPlugin(Interface) {
      *
      * @param {array|object} plugins
      */
-
-
     initializePlugins(plugins) {
       var key, name;
       const self = this;
       const queue = [];
-
       if (Array.isArray(plugins)) {
         plugins.forEach(plugin => {
           if (typeof plugin === 'string') {
@@ -151,46 +141,37 @@ function MicroPlugin(Interface) {
           }
         }
       }
-
       while (name = queue.shift()) {
         self.require(name);
       }
     }
-
     loadPlugin(name) {
       var self = this;
       var plugins = self.plugins;
       var plugin = Interface.plugins[name];
-
       if (!Interface.plugins.hasOwnProperty(name)) {
         throw new Error('Unable to find "' + name + '" plugin');
       }
-
       plugins.requested[name] = true;
       plugins.loaded[name] = plugin.fn.apply(self, [self.plugins.settings[name] || {}]);
       plugins.names.push(name);
     }
+
     /**
      * Initializes a plugin.
      *
      */
-
-
     require(name) {
       var self = this;
       var plugins = self.plugins;
-
       if (!self.plugins.loaded.hasOwnProperty(name)) {
         if (plugins.requested[name]) {
           throw new Error('Plugin has circular dependency ("' + name + '")');
         }
-
         self.loadPlugin(name);
       }
-
       return plugins.loaded[name];
     }
-
   };
 }
 
@@ -1315,7 +1296,6 @@ class Sifter {
  * ```
  *
  */
-
 const iterate = (object, callback) => {
   if (Array.isArray(object)) {
     object.forEach(callback);
@@ -1334,58 +1314,52 @@ const iterate = (object, callback) => {
  *
  * param query should be {}
  */
-
 const getDom = query => {
   if (query.jquery) {
     return query[0];
   }
-
   if (query instanceof HTMLElement) {
     return query;
   }
-
   if (isHtmlString(query)) {
     var tpl = document.createElement('template');
     tpl.innerHTML = query.trim(); // Never return a text node of whitespace as the result
-
     return tpl.content.firstChild;
   }
-
   return document.querySelector(query);
 };
 const isHtmlString = arg => {
   if (typeof arg === 'string' && arg.indexOf('<') > -1) {
     return true;
   }
-
   return false;
 };
 const escapeQuery = query => {
   return query.replace(/['"\\]/g, '\\$&');
 };
+
 /**
  * Dispatch an event
  *
  */
-
 const triggerEvent = (dom_el, event_name) => {
   var event = document.createEvent('HTMLEvents');
   event.initEvent(event_name, true, false);
   dom_el.dispatchEvent(event);
 };
+
 /**
  * Apply CSS rules to a dom element
  *
  */
-
 const applyCSS = (dom_el, css) => {
   Object.assign(dom_el.style, css);
 };
+
 /**
  * Add css classes
  *
  */
-
 const addClasses = (elmts, ...classes) => {
   var norm_classes = classesArray(classes);
   elmts = castAsArray(elmts);
@@ -1395,11 +1369,11 @@ const addClasses = (elmts, ...classes) => {
     });
   });
 };
+
 /**
  * Remove css classes
  *
  */
-
 const removeClasses = (elmts, ...classes) => {
   var norm_classes = classesArray(classes);
   elmts = castAsArray(elmts);
@@ -1409,55 +1383,52 @@ const removeClasses = (elmts, ...classes) => {
     });
   });
 };
+
 /**
  * Return arguments
  *
  */
-
 const classesArray = args => {
   var classes = [];
   iterate(args, _classes => {
     if (typeof _classes === 'string') {
       _classes = _classes.trim().split(/[\11\12\14\15\40]/);
     }
-
     if (Array.isArray(_classes)) {
       classes = classes.concat(_classes);
     }
   });
   return classes.filter(Boolean);
 };
+
 /**
  * Create an array from arg if it's not already an array
  *
  */
-
 const castAsArray = arg => {
   if (!Array.isArray(arg)) {
     arg = [arg];
   }
-
   return arg;
 };
+
 /**
  * Get the closest node to the evt.target matching the selector
  * Stops at wrapper
  *
  */
-
 const parentMatch = (target, selector, wrapper) => {
   if (wrapper && !wrapper.contains(target)) {
     return;
   }
-
   while (target && target.matches) {
     if (target.matches(selector)) {
       return target;
     }
-
     target = target.parentNode;
   }
 };
+
 /**
  * Get the first or last item from an array
  *
@@ -1465,45 +1436,41 @@ const parentMatch = (target, selector, wrapper) => {
  * <= 0 - left (first)
  *
  */
-
 const getTail = (list, direction = 0) => {
   if (direction > 0) {
     return list[list.length - 1];
   }
-
   return list[0];
 };
+
 /**
  * Return true if an object is empty
  *
  */
-
 const isEmptyObject = obj => {
   return Object.keys(obj).length === 0;
 };
+
 /**
  * Get the index of an element amongst sibling nodes of the same type
  *
  */
-
 const nodeIndex = (el, amongst) => {
   if (!el) return -1;
   amongst = amongst || el.nodeName;
   var i = 0;
-
   while (el = el.previousElementSibling) {
     if (el.matches(amongst)) {
       i++;
     }
   }
-
   return i;
 };
+
 /**
  * Set attributes of an element
  *
  */
-
 const setAttr = (el, attrs) => {
   iterate(attrs, (val, attr) => {
     if (val == null) {
@@ -1513,10 +1480,10 @@ const setAttr = (el, attrs) => {
     }
   });
 };
+
 /**
  * Replace a node
  */
-
 const replaceNode = (existing, replacement) => {
   if (existing.parentNode) existing.parentNode.replaceChild(replacement, existing);
 };
@@ -1528,19 +1495,20 @@ const replaceNode = (existing, replacement) => {
  * - Modified by Marshal <beatgates@gmail.com> 2011-6-24 (added regex)
  * - Modified by Brian Reavis <brian@thirdroute.com> 2012-8-27 (cleanup)
  */
+
 const highlight = (element, regex) => {
-  if (regex === null) return; // convet string to regex
+  if (regex === null) return;
 
+  // convet string to regex
   if (typeof regex === 'string') {
     if (!regex.length) return;
     regex = new RegExp(regex, 'i');
-  } // Wrap matching part of text node with highlighting <span>, e.g.
-  // Soccer  ->  <span class="highlight">Soc</span>cer  for regex = /soc/i
-
+  }
 
+  // Wrap matching part of text node with highlighting <span>, e.g.
+  // Soccer  ->  <span class="highlight">Soc</span>cer  for regex = /soc/i
   const highlightText = node => {
     var match = node.data.match(regex);
-
     if (match && node.data.length > 0) {
       var spannode = document.createElement('span');
       spannode.className = 'highlight';
@@ -1551,12 +1519,11 @@ const highlight = (element, regex) => {
       replaceNode(middlebit, spannode);
       return 1;
     }
-
     return 0;
-  }; // Recurse element node, looking for child text nodes to highlight, unless element
-  // is childless, <script>, <style>, or already highlighted: <span class="hightlight">
-
+  };
 
+  // Recurse element node, looking for child text nodes to highlight, unless element
+  // is childless, <script>, <style>, or already highlighted: <span class="hightlight">
   const highlightChildren = node => {
     if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName) && (node.className !== 'highlight' || node.tagName !== 'SPAN')) {
       Array.from(node.childNodes).forEach(element => {
@@ -1564,23 +1531,20 @@ const highlight = (element, regex) => {
       });
     }
   };
-
   const highlightRecursive = node => {
     if (node.nodeType === 3) {
       return highlightText(node);
     }
-
     highlightChildren(node);
     return 0;
   };
-
   highlightRecursive(element);
 };
+
 /**
  * removeHighlight fn copied from highlight v5 and
  * edited to remove with(), pass js strict mode, and use without jquery
  */
-
 const removeHighlight = el => {
   var elements = el.querySelectorAll("span.highlight");
   Array.prototype.forEach.call(elements, function (el) {
@@ -1627,6 +1591,7 @@ var defaults = {
   preload: null,
   allowEmptyOption: false,
   //closeAfterSelect: false,
+  refreshThrottle: 300,
   loadThrottle: 300,
   loadingClass: 'loading',
   dataAttr: null,
@@ -1656,7 +1621,6 @@ var defaults = {
   shouldLoad: function (query) {
     return query.length > 0;
   },
-
   /*
   load                 : null, // function(query, callback) { ... }
   score                : null, // function(search) { ... }
@@ -1676,6 +1640,7 @@ var defaults = {
   onType               : null, // function(str) { ... }
   onDelete             : null, // function(values) { ... }
   */
+
   render: {
     /*
     item: null,
@@ -1709,29 +1674,38 @@ const get_hash = value => {
   if (typeof value === 'boolean') return value ? '1' : '0';
   return value + '';
 };
+
 /**
  * Escapes a string for use within HTML.
  *
  */
-
 const escape_html = str => {
   return (str + '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 };
+
+/**
+ * use setTimeout if timeout > 0 
+ */
+const timeout = (fn, timeout) => {
+  if (timeout > 0) {
+    return setTimeout(fn, timeout);
+  }
+  fn.call(null);
+  return null;
+};
+
 /**
  * Debounce the user provided load function
  *
  */
-
 const loadDebounce = (fn, delay) => {
   var timeout;
   return function (value, callback) {
     var self = this;
-
     if (timeout) {
       self.loading = Math.max(self.loading - 1, 0);
       clearTimeout(timeout);
     }
-
     timeout = setTimeout(function () {
       timeout = null;
       self.loadedSearches[value] = true;
@@ -1739,124 +1713,120 @@ const loadDebounce = (fn, delay) => {
     }, delay);
   };
 };
+
 /**
  * Debounce all fired events types listed in `types`
  * while executing the provided `fn`.
  *
  */
-
 const debounce_events = (self, types, fn) => {
   var type;
   var trigger = self.trigger;
-  var event_args = {}; // override trigger method
+  var event_args = {};
 
+  // override trigger method
   self.trigger = function () {
     var type = arguments[0];
-
     if (types.indexOf(type) !== -1) {
       event_args[type] = arguments;
     } else {
       return trigger.apply(self, arguments);
     }
-  }; // invoke provided function
-
+  };
 
+  // invoke provided function
   fn.apply(self, []);
-  self.trigger = trigger; // trigger queued events
+  self.trigger = trigger;
 
+  // trigger queued events
   for (type of types) {
     if (type in event_args) {
       trigger.apply(self, event_args[type]);
     }
   }
 };
+
 /**
  * Determines the current selection within a text input control.
  * Returns an object containing:
  *   - start
  *   - length
  *
+ * Note: "selectionStart, selectionEnd ... apply only to inputs of types text, search, URL, tel and password"
+ * 	- https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
  */
-
 const getSelection = input => {
   return {
     start: input.selectionStart || 0,
     length: (input.selectionEnd || 0) - (input.selectionStart || 0)
   };
 };
+
 /**
  * Prevent default
  *
  */
-
 const preventDefault = (evt, stop = false) => {
   if (evt) {
     evt.preventDefault();
-
     if (stop) {
       evt.stopPropagation();
     }
   }
 };
+
 /**
  * Add event helper
  *
  */
-
 const addEvent = (target, type, callback, options) => {
   target.addEventListener(type, callback, options);
 };
+
 /**
  * Return true if the requested key is down
  * Will return false if more than one control character is pressed ( when [ctrl+shift+a] != [ctrl+a] )
  * The current evt may not always set ( eg calling advanceSelection() )
  *
  */
-
 const isKeyDown = (key_name, evt) => {
   if (!evt) {
     return false;
   }
-
   if (!evt[key_name]) {
     return false;
   }
-
   var count = (evt.altKey ? 1 : 0) + (evt.ctrlKey ? 1 : 0) + (evt.shiftKey ? 1 : 0) + (evt.metaKey ? 1 : 0);
-
   if (count === 1) {
     return true;
   }
-
   return false;
 };
+
 /**
  * Get the id of an element
  * If the id attribute is not set, set the attribute with the given id
  *
  */
-
 const getId = (el, id) => {
   const existing_id = el.getAttribute('id');
-
   if (existing_id) {
     return existing_id;
   }
-
   el.setAttribute('id', id);
   return id;
 };
+
 /**
  * Returns a string with backslashes added before characters that need to be escaped.
  */
-
 const addSlashes = str => {
   return str.replace(/[\\"']/g, '\\$&');
 };
+
 /**
  *
  */
-
 const append = (parent, node) => {
   if (node) parent.append(node);
 };
@@ -1872,15 +1842,12 @@ function getSettings(input, settings_user) {
   var field_optgroup_value = settings.optgroupValueField;
   var tag_name = input.tagName.toLowerCase();
   var placeholder = input.getAttribute('placeholder') || input.getAttribute('data-placeholder');
-
   if (!placeholder && !settings.allowEmptyOption) {
     let option = input.querySelector('option[value=""]');
-
     if (option) {
       placeholder = option.textContent;
     }
   }
-
   var settings_element = {
     placeholder: placeholder,
     options: [],
@@ -1888,41 +1855,37 @@ function getSettings(input, settings_user) {
     items: [],
     maxItems: null
   };
+
   /**
    * Initialize from a <select> element.
    *
    */
-
   var init_select = () => {
     var tagName;
     var options = settings_element.options;
     var optionsMap = {};
     var group_count = 1;
-
+    let $order = 0;
     var readData = el => {
       var data = Object.assign({}, el.dataset); // get plain object from DOMStringMap
-
       var json = attr_data && data[attr_data];
-
       if (typeof json === 'string' && json.length) {
         data = Object.assign(data, JSON.parse(json));
       }
-
       return data;
     };
-
     var addOption = (option, group) => {
       var value = hash_key(option.value);
       if (value == null) return;
-      if (!value && !settings.allowEmptyOption) return; // if the option already exists, it's probably been
+      if (!value && !settings.allowEmptyOption) return;
+
+      // if the option already exists, it's probably been
       // duplicated in another optgroup. in this case, push
       // the current group to the "optgroup" property on the
       // existing option so that it's rendered in both places.
-
       if (optionsMap.hasOwnProperty(value)) {
         if (group) {
           var arr = optionsMap[value][field_optgroup];
-
           if (!arr) {
             optionsMap[value][field_optgroup] = group;
           } else if (!Array.isArray(arr)) {
@@ -1938,32 +1901,30 @@ function getSettings(input, settings_user) {
         option_data[field_disabled] = option_data[field_disabled] || option.disabled;
         option_data[field_optgroup] = option_data[field_optgroup] || group;
         option_data.$option = option;
+        option_data.$order = option_data.$order || ++$order;
         optionsMap[value] = option_data;
         options.push(option_data);
       }
-
       if (option.selected) {
         settings_element.items.push(value);
       }
     };
-
     var addGroup = optgroup => {
       var id, optgroup_data;
       optgroup_data = readData(optgroup);
       optgroup_data[field_optgroup_label] = optgroup_data[field_optgroup_label] || optgroup.getAttribute('label') || '';
       optgroup_data[field_optgroup_value] = optgroup_data[field_optgroup_value] || group_count++;
       optgroup_data[field_disabled] = optgroup_data[field_disabled] || optgroup.disabled;
+      optgroup_data.$order = optgroup_data.$order || ++$order;
       settings_element.optgroups.push(optgroup_data);
       id = optgroup_data[field_optgroup_value];
       iterate(optgroup.children, option => {
         addOption(option, id);
       });
     };
-
     settings_element.maxItems = input.hasAttribute('multiple') ? null : 1;
     iterate(input.children, child => {
       tagName = child.tagName.toLowerCase();
-
       if (tagName === 'optgroup') {
         addGroup(child);
       } else if (tagName === 'option') {
@@ -1971,15 +1932,13 @@ function getSettings(input, settings_user) {
       }
     });
   };
+
   /**
    * Initialize from a <input type="text"> element.
    *
    */
-
-
   var init_textbox = () => {
     const data_raw = input.getAttribute(attr_data);
-
     if (!data_raw) {
       var value = input.value.trim() || '';
       if (!settings.allowEmptyOption && !value.length) return;
@@ -1998,19 +1957,16 @@ function getSettings(input, settings_user) {
       });
     }
   };
-
   if (tag_name === 'select') {
     init_select();
   } else {
     init_textbox();
   }
-
   return Object.assign({}, defaults, settings_element, settings_user);
 }
 
 var instance_i = 0;
 class TomSelect extends MicroPlugin(MicroEvent) {
-  // @deprecated 1.8
   constructor(input_arg, user_settings) {
     super();
     this.control_input = void 0;
@@ -2030,8 +1986,10 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     this.sifter = void 0;
     this.isOpen = false;
     this.isDisabled = false;
+    this.isReadOnly = false;
     this.isRequired = void 0;
     this.isInvalid = false;
+    // @deprecated 1.8
     this.isValid = true;
     this.isLocked = false;
     this.isFocused = false;
@@ -2051,19 +2009,20 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     this.options = {};
     this.userOptions = {};
     this.items = [];
+    this.refreshTimeout = null;
     instance_i++;
     var dir;
     var input = getDom(input_arg);
-
     if (input.tomselect) {
       throw new Error('Tom Select already initialized on this element');
     }
+    input.tomselect = this;
 
-    input.tomselect = this; // detect rtl environment
-
+    // detect rtl environment
     var computedStyle = window.getComputedStyle && window.getComputedStyle(input, null);
-    dir = computedStyle.getPropertyValue('direction'); // setup default state
+    dir = computedStyle.getPropertyValue('direction');
 
+    // setup default state
     const settings = getSettings(input, user_settings);
     this.settings = settings;
     this.input = input;
@@ -2071,30 +2030,28 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     this.is_select_tag = input.tagName.toLowerCase() === 'select';
     this.rtl = /rtl/i.test(dir);
     this.inputId = getId(input, 'tomselect-' + instance_i);
-    this.isRequired = input.required; // search system
+    this.isRequired = input.required;
 
+    // search system
     this.sifter = new Sifter(this.options, {
       diacritics: settings.diacritics
-    }); // option-dependent defaults
+    });
 
+    // option-dependent defaults
     settings.mode = settings.mode || (settings.maxItems === 1 ? 'single' : 'multi');
-
     if (typeof settings.hideSelected !== 'boolean') {
       settings.hideSelected = settings.mode === 'multi';
     }
-
     if (typeof settings.hidePlaceholder !== 'boolean') {
       settings.hidePlaceholder = settings.mode !== 'multi';
-    } // set up createFilter callback
-
+    }
 
+    // set up createFilter callback
     var filter = settings.createFilter;
-
     if (typeof filter !== 'function') {
       if (typeof filter === 'string') {
         filter = new RegExp(filter);
       }
-
       if (filter instanceof RegExp) {
         settings.createFilter = input => filter.test(input);
       } else {
@@ -2103,16 +2060,14 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         };
       }
     }
-
     this.initializePlugins(settings.plugins);
     this.setupCallbacks();
-    this.setupTemplates(); // Create all elements
+    this.setupTemplates();
 
+    // Create all elements
     const wrapper = getDom('<div>');
     const control = getDom('<div>');
-
     const dropdown = this._render('dropdown');
-
     const dropdown_content = getDom(`<div role="listbox" tabindex="-1">`);
     const classes = this.input.getAttribute('class') || '';
     const inputMode = settings.mode;
@@ -2121,19 +2076,19 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     addClasses(control, settings.controlClass);
     append(wrapper, control);
     addClasses(dropdown, settings.dropdownClass, inputMode);
-
     if (settings.copyClassesToDropdown) {
       addClasses(dropdown, classes);
     }
-
     addClasses(dropdown_content, settings.dropdownContentClass);
     append(dropdown, dropdown_content);
-    getDom(settings.dropdownParent || wrapper).appendChild(dropdown); // default controlInput
+    getDom(settings.dropdownParent || wrapper).appendChild(dropdown);
 
+    // default controlInput
     if (isHtmlString(settings.controlInput)) {
-      control_input = getDom(settings.controlInput); // set attributes
+      control_input = getDom(settings.controlInput);
 
-      var attrs = ['autocorrect', 'autocapitalize', 'autocomplete'];
+      // set attributes
+      var attrs = ['autocorrect', 'autocapitalize', 'autocomplete', 'spellcheck'];
       iterate$1(attrs, attr => {
         if (input.getAttribute(attr)) {
           setAttr(control_input, {
@@ -2143,7 +2098,9 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       });
       control_input.tabIndex = -1;
       control.appendChild(control_input);
-      this.focus_node = control_input; // dom element
+      this.focus_node = control_input;
+
+      // dom element
     } else if (settings.controlInput) {
       control_input = getDom(settings.controlInput);
       this.focus_node = control_input;
@@ -2151,7 +2108,6 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       control_input = getDom('<input/>');
       this.focus_node = control;
     }
-
     this.wrapper = wrapper;
     this.dropdown = dropdown;
     this.dropdown_content = dropdown_content;
@@ -2159,12 +2115,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     this.control_input = control_input;
     this.setup();
   }
+
   /**
    * set up event bindings.
    *
    */
-
-
   setup() {
     const self = this;
     const settings = self.settings;
@@ -2192,7 +2147,6 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const query = "label[for='" + escapeQuery(self.inputId) + "']";
     const label = document.querySelector(query);
     const label_click = self.focus.bind(self);
-
     if (label) {
       addEvent(label, 'click', label_click);
       setAttr(label, {
@@ -2206,38 +2160,32 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         'aria-labelledby': label_id
       });
     }
-
     wrapper.style.width = input.style.width;
-
     if (self.plugins.names.length) {
       const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
       addClasses([wrapper, dropdown], classes_plugins);
     }
-
     if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag) {
       setAttr(input, {
         multiple: 'multiple'
       });
     }
-
     if (settings.placeholder) {
       setAttr(control_input, {
         placeholder: settings.placeholder
       });
-    } // if splitOn was not passed in, construct it from the delimiter to allow pasting universally
-
+    }
 
+    // if splitOn was not passed in, construct it from the delimiter to allow pasting universally
     if (!settings.splitOn && settings.delimiter) {
       settings.splitOn = new RegExp('\\s*' + escape_regex(settings.delimiter) + '+\\s*');
-    } // debounce user defined load() if loadThrottle > 0
-    // after initializePlugins() so plugins can create/modify user defined loaders
-
+    }
 
+    // debounce user defined load() if loadThrottle > 0
+    // after initializePlugins() so plugins can create/modify user defined loaders
     if (settings.load && settings.loadThrottle) {
       settings.load = loadDebounce(settings.load, settings.loadThrottle);
     }
-
-    self.control_input.type = input.type;
     addEvent(dropdown, 'mousemove', () => {
       self.ignoreHover = false;
     });
@@ -2246,11 +2194,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       if (target_match) self.onOptionHover(e, target_match);
     }, {
       capture: true
-    }); // clicking on an option should select it
+    });
 
+    // clicking on an option should select it
     addEvent(dropdown, 'click', evt => {
       const option = parentMatch(evt.target, '[data-selectable]');
-
       if (option) {
         self.onOptionSelect(evt, option);
         preventDefault(evt, true);
@@ -2258,73 +2206,69 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     });
     addEvent(control, 'click', evt => {
       var target_match = parentMatch(evt.target, '[data-ts-item]', control);
-
       if (target_match && self.onItemSelect(evt, target_match)) {
         preventDefault(evt, true);
         return;
-      } // retain focus (see control_input mousedown)
-
+      }
 
+      // retain focus (see control_input mousedown)
       if (control_input.value != '') {
         return;
       }
-
       self.onClick();
       preventDefault(evt, true);
-    }); // keydown on focus_node for arrow_down/arrow_up
+    });
 
-    addEvent(focus_node, 'keydown', e => self.onKeyDown(e)); // keypress and input/keyup
+    // keydown on focus_node for arrow_down/arrow_up
+    addEvent(focus_node, 'keydown', e => self.onKeyDown(e));
 
+    // keypress and input/keyup
     addEvent(control_input, 'keypress', e => self.onKeyPress(e));
     addEvent(control_input, 'input', e => self.onInput(e));
     addEvent(focus_node, 'blur', e => self.onBlur(e));
     addEvent(focus_node, 'focus', e => self.onFocus(e));
     addEvent(control_input, 'paste', e => self.onPaste(e));
-
     const doc_mousedown = evt => {
       // blur if target is outside of this instance
       // dropdown is not always inside wrapper
       const target = evt.composedPath()[0];
-
       if (!wrapper.contains(target) && !dropdown.contains(target)) {
         if (self.isFocused) {
           self.blur();
         }
-
         self.inputState();
         return;
-      } // retain focus by preventing native handling. if the
+      }
+
+      // retain focus by preventing native handling. if the
       // event target is the input it should not be modified.
       // otherwise, text selection within the input won't work.
       // Fixes bug #212 which is no covered by tests
-
-
       if (target == control_input && self.isOpen) {
-        evt.stopPropagation(); // clicking anywhere in the control should not blur the control_input (which would close the dropdown)
+        evt.stopPropagation();
+
+        // clicking anywhere in the control should not blur the control_input (which would close the dropdown)
       } else {
         preventDefault(evt, true);
       }
     };
-
     const win_scroll = () => {
       if (self.isOpen) {
         self.positionDropdown();
       }
     };
-
     addEvent(document, 'mousedown', doc_mousedown);
     addEvent(window, 'scroll', win_scroll, passive_event);
     addEvent(window, 'resize', win_scroll, passive_event);
-
     this._destroy = () => {
       document.removeEventListener('mousedown', doc_mousedown);
       window.removeEventListener('scroll', win_scroll);
       window.removeEventListener('resize', win_scroll);
       if (label) label.removeEventListener('click', label_click);
-    }; // store original html and tab index so that they can be
-    // restored when the destroy() method is called.
-
+    };
 
+    // store original html and tab index so that they can be
+    // restored when the destroy() method is called.
     this.revertSettings = {
       innerHTML: input.innerHTML,
       tabIndex: input.tabIndex
@@ -2347,40 +2291,41 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     self.close(false);
     self.inputState();
     self.isSetup = true;
-
     if (input.disabled) {
       self.disable();
+    } else if (input.readOnly) {
+      self.setReadOnly(true);
     } else {
       self.enable(); //sets tabIndex
     }
 
     self.on('change', this.onChange);
     addClasses(input, 'tomselected', 'ts-hidden-accessible');
-    self.trigger('initialize'); // preload options
+    self.trigger('initialize');
 
+    // preload options
     if (settings.preload === true) {
       self.preload();
     }
   }
+
   /**
    * Register options and optgroups
    *
    */
-
-
   setupOptions(options = [], optgroups = []) {
     // build options table
-    this.addOptions(options); // build optgroup table
+    this.addOptions(options);
 
+    // build optgroup table
     iterate$1(optgroups, optgroup => {
       this.registerOptionGroup(optgroup);
     });
   }
+
   /**
    * Sets up default rendering functions.
    */
-
-
   setupTemplates() {
     var self = this;
     var field_label = self.settings.labelField;
@@ -2417,12 +2362,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     };
     self.settings.render = Object.assign({}, templates, self.settings.render);
   }
+
   /**
    * Maps fired events to callbacks provided
    * in the settings used when creating the control.
    */
-
-
   setupCallbacks() {
     var key, fn;
     var callbacks = {
@@ -2445,18 +2389,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       'focus': 'onFocus',
       'blur': 'onBlur'
     };
-
     for (key in callbacks) {
       fn = this.settings[callbacks[key]];
       if (fn) this.on(key, fn);
     }
   }
+
   /**
    * Sync the Tom Select instance with the original input or select
    *
    */
-
-
   sync(get_settings = true) {
     const self = this;
     const settings = get_settings ? getSettings(self.input, {
@@ -2467,78 +2409,68 @@ class TomSelect extends MicroPlugin(MicroEvent) {
 
     self.lastQuery = null; // so updated options will be displayed in dropdown
   }
+
   /**
    * Triggered when the main control element
    * has a click event.
    *
    */
-
-
   onClick() {
     var self = this;
-
     if (self.activeItems.length > 0) {
       self.clearActiveItems();
       self.focus();
       return;
     }
-
     if (self.isFocused && self.isOpen) {
       self.blur();
     } else {
       self.focus();
     }
   }
+
   /**
    * @deprecated v1.7
    *
    */
-
-
   onMouseDown() {}
+
   /**
    * Triggered when the value of the control has been changed.
    * This should propagate the event to the original DOM
    * input / select element.
    */
-
-
   onChange() {
     triggerEvent(this.input, 'input');
     triggerEvent(this.input, 'change');
   }
+
   /**
    * Triggered on <input> paste.
    *
    */
-
-
   onPaste(e) {
     var self = this;
-
     if (self.isInputHidden || self.isLocked) {
       preventDefault(e);
       return;
-    } // If a regex or string is included, this will split the pasted
-    // input and create Items for each separate value
-
+    }
 
+    // If a regex or string is included, this will split the pasted
+    // input and create Items for each separate value
     if (!self.settings.splitOn) {
       return;
-    } // Wait for pasted text to be recognized in value
-
+    }
 
+    // Wait for pasted text to be recognized in value
     setTimeout(() => {
       var pastedText = self.inputValue();
-
       if (!pastedText.match(self.settings.splitOn)) {
         return;
       }
-
       var splitInput = pastedText.trim().split(self.settings.splitOn);
       iterate$1(splitInput, piece => {
         const hash = hash_key(piece);
-
         if (hash) {
           if (this.options[piece]) {
             self.addItem(piece);
@@ -2549,46 +2481,38 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       });
     }, 0);
   }
+
   /**
    * Triggered on <input> keypress.
    *
    */
-
-
   onKeyPress(e) {
     var self = this;
-
     if (self.isLocked) {
       preventDefault(e);
       return;
     }
-
     var character = String.fromCharCode(e.keyCode || e.which);
-
     if (self.settings.create && self.settings.mode === 'multi' && character === self.settings.delimiter) {
       self.createItem();
       preventDefault(e);
       return;
     }
   }
+
   /**
    * Triggered on <input> keydown.
    *
    */
-
-
   onKeyDown(e) {
     var self = this;
     self.ignoreHover = true;
-
     if (self.isLocked) {
       if (e.keyCode !== KEY_TAB) {
         preventDefault(e);
       }
-
       return;
     }
-
     switch (e.keyCode) {
       // ctrl+A: select all
       case KEY_A:
@@ -2599,20 +2523,18 @@ class TomSelect extends MicroPlugin(MicroEvent) {
             return;
           }
         }
-
         break;
-      // esc: close dropdown
 
+      // esc: close dropdown
       case KEY_ESC:
         if (self.isOpen) {
           preventDefault(e, true);
           self.close();
         }
-
         self.clearActiveItems();
         return;
-      // down: open dropdown or move selection down
 
+      // down: open dropdown or move selection down
       case KEY_DOWN:
         if (!self.isOpen && self.hasOptions) {
           self.open();
@@ -2620,178 +2542,174 @@ class TomSelect extends MicroPlugin(MicroEvent) {
           let next = self.getAdjacent(self.activeOption, 1);
           if (next) self.setActiveOption(next);
         }
-
         preventDefault(e);
         return;
-      // up: move selection up
 
+      // up: move selection up
       case KEY_UP:
         if (self.activeOption) {
           let prev = self.getAdjacent(self.activeOption, -1);
           if (prev) self.setActiveOption(prev);
         }
-
         preventDefault(e);
         return;
-      // return: select active option
 
+      // return: select active option
       case KEY_RETURN:
         if (self.canSelect(self.activeOption)) {
           self.onOptionSelect(e, self.activeOption);
-          preventDefault(e); // if the option_create=null, the dropdown might be closed
+          preventDefault(e);
+
+          // if the option_create=null, the dropdown might be closed
         } else if (self.settings.create && self.createItem()) {
-          preventDefault(e); // don't submit form when searching for a value
+          preventDefault(e);
+
+          // don't submit form when searching for a value
         } else if (document.activeElement == self.control_input && self.isOpen) {
           preventDefault(e);
         }
-
         return;
-      // left: modifiy item selection to the left
 
+      // left: modifiy item selection to the left
       case KEY_LEFT:
         self.advanceSelection(-1, e);
         return;
-      // right: modifiy item selection to the right
 
+      // right: modifiy item selection to the right
       case KEY_RIGHT:
         self.advanceSelection(1, e);
         return;
-      // tab: select active option and/or create item
 
+      // tab: select active option and/or create item
       case KEY_TAB:
         if (self.settings.selectOnTab) {
           if (self.canSelect(self.activeOption)) {
-            self.onOptionSelect(e, self.activeOption); // prevent default [tab] behaviour of jump to the next field
-            // if select isFull, then the dropdown won't be open and [tab] will work normally
+            self.onOptionSelect(e, self.activeOption);
 
+            // prevent default [tab] behaviour of jump to the next field
+            // if select isFull, then the dropdown won't be open and [tab] will work normally
             preventDefault(e);
           }
-
           if (self.settings.create && self.createItem()) {
             preventDefault(e);
           }
         }
-
         return;
-      // delete|backspace: delete items
 
+      // delete|backspace: delete items
       case KEY_BACKSPACE:
       case KEY_DELETE:
         self.deleteSelection(e);
         return;
-    } // don't enter text in the control_input when active items are selected
-
+    }
 
+    // don't enter text in the control_input when active items are selected
     if (self.isInputHidden && !isKeyDown(KEY_SHORTCUT, e)) {
       preventDefault(e);
     }
   }
+
   /**
    * Triggered on <input> keyup.
    *
    */
-
-
   onInput(e) {
-    var self = this;
-
-    if (self.isLocked) {
+    if (this.isLocked) {
       return;
     }
-
-    var value = self.inputValue();
-
-    if (self.lastValue !== value) {
-      self.lastValue = value;
-
-      if (self.settings.shouldLoad.call(self, value)) {
-        self.load(value);
-      }
-
-      self.refreshOptions();
-      self.trigger('type', value);
+    const value = this.inputValue();
+    if (this.lastValue === value) return;
+    this.lastValue = value;
+    if (value == '') {
+      this._onInput();
+      return;
+    }
+    if (this.refreshTimeout) {
+      clearTimeout(this.refreshTimeout);
+    }
+    this.refreshTimeout = timeout(() => {
+      this.refreshTimeout = null;
+      this._onInput();
+    }, this.settings.refreshThrottle);
+  }
+  _onInput() {
+    const value = this.lastValue;
+    if (this.settings.shouldLoad.call(this, value)) {
+      this.load(value);
     }
+    this.refreshOptions();
+    this.trigger('type', value);
   }
+
   /**
    * Triggered when the user rolls over
    * an option in the autocomplete dropdown menu.
    *
    */
-
-
   onOptionHover(evt, option) {
     if (this.ignoreHover) return;
     this.setActiveOption(option, false);
   }
+
   /**
    * Triggered on <input> focus.
    *
    */
-
-
   onFocus(e) {
     var self = this;
     var wasFocused = self.isFocused;
-
-    if (self.isDisabled) {
+    if (self.isDisabled || self.isReadOnly) {
       self.blur();
       preventDefault(e);
       return;
     }
-
     if (self.ignoreFocus) return;
     self.isFocused = true;
     if (self.settings.preload === 'focus') self.preload();
     if (!wasFocused) self.trigger('focus');
-
     if (!self.activeItems.length) {
-      self.showInput();
+      self.inputState();
       self.refreshOptions(!!self.settings.openOnFocus);
     }
-
     self.refreshState();
   }
+
   /**
    * Triggered on <input> blur.
    *
    */
-
-
   onBlur(e) {
     if (document.hasFocus() === false) return;
     var self = this;
     if (!self.isFocused) return;
     self.isFocused = false;
     self.ignoreFocus = false;
-
     var deactivate = () => {
       self.close();
       self.setActiveItem();
       self.setCaret(self.items.length);
       self.trigger('blur');
     };
-
     if (self.settings.create && self.settings.createOnBlur) {
       self.createItem(null, deactivate);
     } else {
       deactivate();
     }
   }
+
   /**
    * Triggered when the user clicks on an option
    * in the autocomplete dropdown menu.
    *
    */
-
-
   onOptionSelect(evt, option) {
     var value,
-        self = this; // should not be possible to trigger a option under a disabled optgroup
+      self = this;
 
+    // should not be possible to trigger a option under a disabled optgroup
     if (option.parentElement && option.parentElement.matches('[data-disabled]')) {
       return;
     }
-
     if (option.classList.contains('create')) {
       self.createItem(null, () => {
         if (self.settings.closeAfterSelect) {
@@ -2800,52 +2718,45 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       });
     } else {
       value = option.dataset.value;
-
       if (typeof value !== 'undefined') {
         self.lastQuery = null;
         self.addItem(value);
-
         if (self.settings.closeAfterSelect) {
           self.close();
         }
-
         if (!self.settings.hideSelected && evt.type && /click/.test(evt.type)) {
           self.setActiveOption(option);
         }
       }
     }
   }
+
   /**
    * Return true if the given option can be selected
    *
    */
-
-
   canSelect(option) {
     if (this.isOpen && option && this.dropdown_content.contains(option)) {
       return true;
     }
-
     return false;
   }
+
   /**
    * Triggered when the user clicks on an item
    * that has been selected.
    *
    */
-
-
   onItemSelect(evt, item) {
     var self = this;
-
     if (!self.isLocked && self.settings.mode === 'multi') {
       preventDefault(evt);
       self.setActiveItem(item, evt);
       return true;
     }
-
     return false;
   }
+
   /**
    * Determines whether or not to invoke
    * the user-provided option provider / loader
@@ -2862,19 +2773,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *	feedback when canLoad returns false
    *
    */
-
-
   canLoad(value) {
     if (!this.settings.load) return false;
     if (this.loadedSearches.hasOwnProperty(value)) return false;
     return true;
   }
+
   /**
    * Invokes the user-provided option provider / loader.
    *
    */
-
-
   load(value) {
     const self = this;
     if (!self.canLoad(value)) return;
@@ -2883,50 +2791,44 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const callback = self.loadCallback.bind(self);
     self.settings.load.call(self, value, callback);
   }
+
   /**
    * Invoked by the user-provided option provider
    *
    */
-
-
   loadCallback(options, optgroups) {
     const self = this;
     self.loading = Math.max(self.loading - 1, 0);
     self.lastQuery = null;
     self.clearActiveOption(); // when new results load, focus should be on first option
-
     self.setupOptions(options, optgroups);
     self.refreshOptions(self.isFocused && !self.isInputHidden);
-
     if (!self.loading) {
       removeClasses(self.wrapper, self.settings.loadingClass);
     }
-
     self.trigger('load', options, optgroups);
   }
-
   preload() {
     var classList = this.wrapper.classList;
     if (classList.contains('preloaded')) return;
     classList.add('preloaded');
     this.load('');
   }
+
   /**
    * Sets the input field of the control to the specified value.
    *
    */
-
-
   setTextboxValue(value = '') {
     var input = this.control_input;
     var changed = input.value !== value;
-
     if (changed) {
       input.value = value;
       triggerEvent(input, 'update');
       this.lastValue = value;
     }
   }
+
   /**
    * Returns the value of the control. If multiple items
    * can be selected (e.g. <select multiple>), this returns
@@ -2934,21 +2836,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    * returns a string.
    *
    */
-
-
   getValue() {
     if (this.is_select_tag && this.input.hasAttribute('multiple')) {
       return this.items;
     }
-
     return this.items.join(this.settings.delimiter);
   }
+
   /**
    * Resets the selected items to the given value.
    *
    */
-
-
   setValue(value, silent) {
     var events = silent ? [] : ['change'];
     debounce_events(this, events, () => {
@@ -2956,63 +2854,54 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       this.addItems(value, silent);
     });
   }
+
   /**
    * Resets the number of max items to the given value
    *
    */
-
-
   setMaxItems(value) {
     if (value === 0) value = null; //reset to unlimited items.
-
     this.settings.maxItems = value;
     this.refreshState();
   }
+
   /**
    * Sets the selected item.
    *
    */
-
-
   setActiveItem(item, e) {
     var self = this;
     var eventName;
     var i, begin, end, swap;
     var last;
-    if (self.settings.mode === 'single') return; // clear the active selection
+    if (self.settings.mode === 'single') return;
 
+    // clear the active selection
     if (!item) {
       self.clearActiveItems();
-
       if (self.isFocused) {
-        self.showInput();
+        self.inputState();
       }
-
       return;
-    } // modify selection
-
+    }
 
+    // modify selection
     eventName = e && e.type.toLowerCase();
-
     if (eventName === 'click' && isKeyDown('shiftKey', e) && self.activeItems.length) {
       last = self.getLastActive();
       begin = Array.prototype.indexOf.call(self.control.children, last);
       end = Array.prototype.indexOf.call(self.control.children, item);
-
       if (begin > end) {
         swap = begin;
         begin = end;
         end = swap;
       }
-
       for (i = begin; i <= end; i++) {
         item = self.control.children[i];
-
         if (self.activeItems.indexOf(item) === -1) {
           self.setActiveItemClass(item);
         }
       }
-
       preventDefault(e);
     } else if (eventName === 'click' && isKeyDown(KEY_SHORTCUT, e) || eventName === 'keydown' && isKeyDown('shiftKey', e)) {
       if (item.classList.contains('active')) {
@@ -3023,65 +2912,58 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     } else {
       self.clearActiveItems();
       self.setActiveItemClass(item);
-    } // ensure control has focus
-
-
-    self.hideInput();
+    }
 
+    // ensure control has focus
+    self.inputState();
     if (!self.isFocused) {
       self.focus();
     }
   }
+
   /**
    * Set the active and last-active classes
    *
    */
-
-
   setActiveItemClass(item) {
     const self = this;
     const last_active = self.control.querySelector('.last-active');
     if (last_active) removeClasses(last_active, 'last-active');
     addClasses(item, 'active last-active');
     self.trigger('item_select', item);
-
     if (self.activeItems.indexOf(item) == -1) {
       self.activeItems.push(item);
     }
   }
+
   /**
    * Remove active item
    *
    */
-
-
   removeActiveItem(item) {
     var idx = this.activeItems.indexOf(item);
     this.activeItems.splice(idx, 1);
     removeClasses(item, 'active');
   }
+
   /**
    * Clears all the active items
    *
    */
-
-
   clearActiveItems() {
     removeClasses(this.activeItems, 'active');
     this.activeItems = [];
   }
+
   /**
    * Sets the selected item in the dropdown menu
    * of available options.
    *
    */
-
-
   setActiveOption(option, scroll = true) {
     if (option === this.activeOption) {
       return;
     }
-
     this.clearActiveOption();
     if (!option) return;
     this.activeOption = option;
@@ -3094,12 +2976,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     addClasses(option, 'active');
     if (scroll) this.scrollToOption(option);
   }
+
   /**
    * Sets the dropdown_content scrollTop to display the option
    *
    */
-
-
   scrollToOption(option, behavior) {
     if (!option) return;
     const content = this.dropdown_content;
@@ -3107,35 +2988,30 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const scrollTop = content.scrollTop || 0;
     const height_item = option.offsetHeight;
     const y = option.getBoundingClientRect().top - content.getBoundingClientRect().top + scrollTop;
-
     if (y + height_item > height_menu + scrollTop) {
       this.scroll(y - height_menu + height_item, behavior);
     } else if (y < scrollTop) {
       this.scroll(y, behavior);
     }
   }
+
   /**
    * Scroll the dropdown to the given position
    *
    */
-
-
   scroll(scrollTop, behavior) {
     const content = this.dropdown_content;
-
     if (behavior) {
       content.style.scrollBehavior = behavior;
     }
-
     content.scrollTop = scrollTop;
     content.style.scrollBehavior = '';
   }
+
   /**
    * Clears the active option
    *
    */
-
-
   clearActiveOption() {
     if (this.activeOption) {
       removeClasses(this.activeOption, 'active');
@@ -3143,42 +3019,38 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         'aria-selected': null
       });
     }
-
     this.activeOption = null;
     setAttr(this.focus_node, {
       'aria-activedescendant': null
     });
   }
+
   /**
    * Selects all items (CTRL + A).
    */
-
-
   selectAll() {
     const self = this;
     if (self.settings.mode === 'single') return;
     const activeItems = self.controlChildren();
     if (!activeItems.length) return;
-    self.hideInput();
+    self.inputState();
     self.close();
     self.activeItems = activeItems;
     iterate$1(activeItems, item => {
       self.setActiveItemClass(item);
     });
   }
+
   /**
    * Determines if the control_input should be in a hidden or visible state
    *
    */
-
-
   inputState() {
     var self = this;
     if (!self.control.contains(self.control_input)) return;
     setAttr(self.control_input, {
       placeholder: self.settings.placeholder
     });
-
     if (self.activeItems.length > 0 || !self.isFocused && self.settings.hidePlaceholder && self.items.length > 0) {
       self.setTextboxValue();
       self.isInputHidden = true;
@@ -3188,70 +3060,45 @@ class TomSelect extends MicroPlugin(MicroEvent) {
           placeholder: ''
         });
       }
-
       self.isInputHidden = false;
     }
-
     self.wrapper.classList.toggle('input-hidden', self.isInputHidden);
   }
-  /**
-   * Hides the input element out of view, while
-   * retaining its focus.
-   * @deprecated 1.3
-   */
-
-
-  hideInput() {
-    this.inputState();
-  }
-  /**
-   * Restores input visibility.
-   * @deprecated 1.3
-   */
-
 
-  showInput() {
-    this.inputState();
-  }
   /**
    * Get the input value
    */
-
-
   inputValue() {
     return this.control_input.value.trim();
   }
+
   /**
    * Gives the control focus.
    */
-
-
   focus() {
     var self = this;
-    if (self.isDisabled) return;
+    if (self.isDisabled || self.isReadOnly) return;
     self.ignoreFocus = true;
-
     if (self.control_input.offsetWidth) {
       self.control_input.focus();
     } else {
       self.focus_node.focus();
     }
-
     setTimeout(() => {
       self.ignoreFocus = false;
       self.onFocus();
     }, 0);
   }
+
   /**
    * Forces the control out of focus.
    *
    */
-
-
   blur() {
     this.focus_node.blur();
     this.onBlur();
   }
+
   /**
    * Returns a function that scores an object
    * to show how good of a match it is to the
@@ -3259,11 +3106,10 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    * @return {function}
    */
-
-
   getScoreFunction(query) {
     return this.sifter.getScoreFunction(query, this.getSearchOptions());
   }
+
   /**
    * Returns search options for sifter (the system
    * for scoring and sorting results).
@@ -3271,18 +3117,14 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    * @see https://github.com/orchidjs/sifter.js
    * @return {object}
    */
-
-
   getSearchOptions() {
     var settings = this.settings;
     var sort = settings.sortField;
-
     if (typeof settings.sortField === 'string') {
       sort = [{
         field: settings.sortField
       }];
     }
-
     return {
       fields: settings.searchField,
       conjunction: settings.searchConjunction,
@@ -3290,27 +3132,26 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       nesting: settings.nesting
     };
   }
+
   /**
    * Searches through available options and returns
    * a sorted array of matches.
    *
    */
-
-
   search(query) {
     var result, calculateScore;
     var self = this;
-    var options = this.getSearchOptions(); // validate user-provided result scoring function
+    var options = this.getSearchOptions();
 
+    // validate user-provided result scoring function
     if (self.settings.score) {
       calculateScore = self.settings.score.call(self, query);
-
       if (typeof calculateScore !== 'function') {
         throw new Error('Tom Select "score" setting must be a function that returns a function');
       }
-    } // perform search
-
+    }
 
+    // perform search
     if (query !== self.lastQuery) {
       self.lastQuery = query;
       result = self.sifter.search(query, Object.assign(options, {
@@ -3319,25 +3160,23 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       self.currentResults = result;
     } else {
       result = Object.assign({}, self.currentResults);
-    } // filter out selected items
-
+    }
 
+    // filter out selected items
     if (self.settings.hideSelected) {
       result.items = result.items.filter(item => {
         let hashed = hash_key(item.id);
         return !(hashed && self.items.indexOf(hashed) !== -1);
       });
     }
-
     return result;
   }
+
   /**
    * Refreshes the list of available options shown
    * in the autocomplete dropdown menu.
    *
    */
-
-
   refreshOptions(triggerDropdown = true) {
     var i, j, k, n, optgroup, optgroups, html, has_create_option, active_group;
     var create;
@@ -3350,27 +3189,42 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     var active_option = null;
     var show_dropdown = self.settings.shouldOpen || false;
     var dropdown_content = self.dropdown_content;
-
     if (same_query) {
       active_option = self.activeOption;
-
       if (active_option) {
         active_group = active_option.closest('[data-group]');
       }
-    } // build markup
-
+    }
 
+    // build markup
     n = results.items.length;
-
     if (typeof self.settings.maxOptions === 'number') {
       n = Math.min(n, self.settings.maxOptions);
     }
-
     if (n > 0) {
       show_dropdown = true;
-    } // render and group available options individually
+    }
 
+    // get fragment for group and the position of the group in group_order
+    const getGroupFragment = (optgroup, order) => {
+      let group_order_i = groups[optgroup];
+      if (group_order_i !== undefined) {
+        let order_group = groups_order[group_order_i];
+        if (order_group !== undefined) {
+          return [group_order_i, order_group.fragment];
+        }
+      }
+      let group_fragment = document.createDocumentFragment();
+      group_order_i = groups_order.length;
+      groups_order.push({
+        fragment: group_fragment,
+        order,
+        optgroup
+      });
+      return [group_order_i, group_fragment];
+    };
 
+    // render and group available options individually
     for (i = 0; i < n; i++) {
       // get option dom element
       let item = results.items[i];
@@ -3379,30 +3233,26 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       let option = self.options[opt_value];
       if (option === undefined) continue;
       let opt_hash = get_hash(opt_value);
-      let option_el = self.getOption(opt_hash, true); // toggle 'selected' class
+      let option_el = self.getOption(opt_hash, true);
 
+      // toggle 'selected' class
       if (!self.settings.hideSelected) {
         option_el.classList.toggle('selected', self.items.includes(opt_hash));
       }
-
       optgroup = option[self.settings.optgroupField] || '';
       optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
-
       for (j = 0, k = optgroups && optgroups.length; j < k; j++) {
         optgroup = optgroups[j];
-
-        if (!self.optgroups.hasOwnProperty(optgroup)) {
+        let order = option.$order;
+        let self_optgroup = self.optgroups[optgroup];
+        if (self_optgroup === undefined) {
           optgroup = '';
+        } else {
+          order = self_optgroup.$order;
         }
+        const [group_order_i, group_fragment] = getGroupFragment(optgroup, order);
 
-        let group_fragment = groups[optgroup];
-
-        if (group_fragment === undefined) {
-          group_fragment = document.createDocumentFragment();
-          groups_order.push(optgroup);
-        } // nodes can only have one parent, so if the option is in mutple groups, we need a clone
-
-
+        // nodes can only have one parent, so if the option is in mutple groups, we need a clone
         if (j > 0) {
           option_el = option_el.cloneNode(true);
           setAttr(option_el, {
@@ -3410,38 +3260,36 @@ class TomSelect extends MicroPlugin(MicroEvent) {
             'aria-selected': null
           });
           option_el.classList.add('ts-cloned');
-          removeClasses(option_el, 'active'); // make sure we keep the activeOption in the same group
+          removeClasses(option_el, 'active');
 
+          // make sure we keep the activeOption in the same group
           if (self.activeOption && self.activeOption.dataset.value == opt_value) {
             if (active_group && active_group.dataset.group === optgroup.toString()) {
               active_option = option_el;
             }
           }
         }
-
         group_fragment.appendChild(option_el);
-        groups[optgroup] = group_fragment;
+        if (optgroup != '') {
+          groups[optgroup] = group_order_i;
+        }
       }
-    } // sort optgroups
-
+    }
 
+    // sort optgroups
     if (self.settings.lockOptgroupOrder) {
       groups_order.sort((a, b) => {
-        const grp_a = self.optgroups[a];
-        const grp_b = self.optgroups[b];
-        const a_order = grp_a && grp_a.$order || 0;
-        const b_order = grp_b && grp_b.$order || 0;
-        return a_order - b_order;
+        return a.order - b.order;
       });
-    } // render optgroup headers & join groups
-
+    }
 
+    // render optgroup headers & join groups
     html = document.createDocumentFragment();
-    iterate$1(groups_order, optgroup => {
-      let group_fragment = groups[optgroup];
+    iterate$1(groups_order, group_order => {
+      let group_fragment = group_order.fragment;
+      let optgroup = group_order.optgroup;
       if (!group_fragment || !group_fragment.children.length) return;
       let group_heading = self.optgroups[optgroup];
-
       if (group_heading !== undefined) {
         let group_options = document.createDocumentFragment();
         let header = self.render('optgroup_header', group_heading);
@@ -3457,93 +3305,87 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       }
     });
     dropdown_content.innerHTML = '';
-    append(dropdown_content, html); // highlight matching terms inline
+    append(dropdown_content, html);
 
+    // highlight matching terms inline
     if (self.settings.highlight) {
       removeHighlight(dropdown_content);
-
       if (results.query.length && results.tokens.length) {
         iterate$1(results.tokens, tok => {
           highlight(dropdown_content, tok.regex);
         });
       }
-    } // helper method for adding templates to dropdown
-
+    }
 
+    // helper method for adding templates to dropdown
     var add_template = template => {
       let content = self.render(template, {
         input: query
       });
-
       if (content) {
         show_dropdown = true;
         dropdown_content.insertBefore(content, dropdown_content.firstChild);
       }
-
       return content;
-    }; // add loading message
-
+    };
 
+    // add loading message
     if (self.loading) {
-      add_template('loading'); // invalid query
+      add_template('loading');
+
+      // invalid query
     } else if (!self.settings.shouldLoad.call(self, query)) {
-      add_template('not_loading'); // add no_results message
+      add_template('not_loading');
+
+      // add no_results message
     } else if (results.items.length === 0) {
       add_template('no_results');
-    } // add create option
-
+    }
 
+    // add create option
     has_create_option = self.canCreate(query);
-
     if (has_create_option) {
       create = add_template('option_create');
-    } // activate
-
+    }
 
+    // activate
     self.hasOptions = results.items.length > 0 || has_create_option;
-
     if (show_dropdown) {
       if (results.items.length > 0) {
         if (!active_option && self.settings.mode === 'single' && self.items[0] != undefined) {
           active_option = self.getOption(self.items[0]);
         }
-
         if (!dropdown_content.contains(active_option)) {
           let active_index = 0;
-
           if (create && !self.settings.addPrecedence) {
             active_index = 1;
           }
-
           active_option = self.selectable()[active_index];
         }
       } else if (create) {
         active_option = create;
       }
-
       if (triggerDropdown && !self.isOpen) {
         self.open();
         self.scrollToOption(active_option, 'auto');
       }
-
       self.setActiveOption(active_option);
     } else {
       self.clearActiveOption();
-
       if (triggerDropdown && self.isOpen) {
         self.close(false); // if create_option=null, we want the dropdown to close but not reset the textbox value
       }
     }
   }
+
   /**
    * Return list of selectable options
    *
    */
-
-
   selectable() {
     return this.dropdown_content.querySelectorAll('[data-selectable]');
   }
+
   /**
    * Adds an available option. If it already exists,
    * nothing will happen. Note: this does not refresh
@@ -3555,61 +3397,52 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *   this.addOption(data)
    *
    */
-
-
   addOption(data, user_created = false) {
-    const self = this; // @deprecated 1.7.7
-    // use addOptions( array, user_created ) for adding multiple options
+    const self = this;
 
+    // @deprecated 1.7.7
+    // use addOptions( array, user_created ) for adding multiple options
     if (Array.isArray(data)) {
       self.addOptions(data, user_created);
       return false;
     }
-
     const key = hash_key(data[self.settings.valueField]);
-
     if (key === null || self.options.hasOwnProperty(key)) {
       return false;
     }
-
     data.$order = data.$order || ++self.order;
     data.$id = self.inputId + '-opt-' + data.$order;
     self.options[key] = data;
     self.lastQuery = null;
-
     if (user_created) {
       self.userOptions[key] = user_created;
       self.trigger('option_add', key, data);
     }
-
     return key;
   }
+
   /**
    * Add multiple options
    *
    */
-
-
   addOptions(data, user_created = false) {
     iterate$1(data, dat => {
       this.addOption(dat, user_created);
     });
   }
+
   /**
    * @deprecated 1.7.7
    */
-
-
   registerOption(data) {
     return this.addOption(data);
   }
+
   /**
    * Registers an option group to the pool of option groups.
    *
    * @return {boolean|string}
    */
-
-
   registerOptionGroup(data) {
     var key = hash_key(data[this.settings.optgroupValueField]);
     if (key === null) return false;
@@ -3617,27 +3450,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     this.optgroups[key] = data;
     return key;
   }
+
   /**
    * Registers a new optgroup for options
    * to be bucketed into.
    *
    */
-
-
   addOptionGroup(id, data) {
     var hashed_id;
     data[this.settings.optgroupValueField] = id;
-
     if (hashed_id = this.registerOptionGroup(data)) {
       this.trigger('optgroup_add', hashed_id, data);
     }
   }
+
   /**
    * Removes an existing option group.
    *
    */
-
-
   removeOptionGroup(id) {
     if (this.optgroups.hasOwnProperty(id)) {
       delete this.optgroups[id];
@@ -3645,31 +3475,30 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       this.trigger('optgroup_remove', id);
     }
   }
+
   /**
    * Clears all existing option groups.
    */
-
-
   clearOptionGroups() {
     this.optgroups = {};
     this.clearCache();
     this.trigger('optgroup_clear');
   }
+
   /**
    * Updates an option available for selection. If
    * it is visible in the selected items or options
    * dropdown, it will be re-rendered automatically.
    *
    */
-
-
   updateOption(value, data) {
     const self = this;
     var item_new;
     var index_item;
     const value_old = hash_key(value);
-    const value_new = hash_key(data[self.settings.valueField]); // sanity checks
+    const value_new = hash_key(data[self.settings.valueField]);
 
+    // sanity checks
     if (value_old === null) return;
     const data_old = self.options[value_old];
     if (data_old == undefined) return;
@@ -3677,48 +3506,44 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const option = self.getOption(value_old);
     const item = self.getItem(value_old);
     data.$order = data.$order || data_old.$order;
-    delete self.options[value_old]; // invalidate render cache
-    // don't remove existing node yet, we'll remove it after replacing it
+    delete self.options[value_old];
 
+    // invalidate render cache
+    // don't remove existing node yet, we'll remove it after replacing it
     self.uncacheValue(value_new);
-    self.options[value_new] = data; // update the option if it's in the dropdown
+    self.options[value_new] = data;
 
+    // update the option if it's in the dropdown
     if (option) {
       if (self.dropdown_content.contains(option)) {
         const option_new = self._render('option', data);
-
         replaceNode(option, option_new);
-
         if (self.activeOption === option) {
           self.setActiveOption(option_new);
         }
       }
-
       option.remove();
-    } // update the item if we have one
-
+    }
 
+    // update the item if we have one
     if (item) {
       index_item = self.items.indexOf(value_old);
-
       if (index_item !== -1) {
         self.items.splice(index_item, 1, value_new);
       }
-
       item_new = self._render('item', data);
       if (item.classList.contains('active')) addClasses(item_new, 'active');
       replaceNode(item, item_new);
-    } // invalidate last query because we might have updated the sortField
-
+    }
 
+    // invalidate last query because we might have updated the sortField
     self.lastQuery = null;
   }
+
   /**
    * Removes a single option.
    *
    */
-
-
   removeOption(value, silent) {
     const self = this;
     value = get_hash(value);
@@ -3729,11 +3554,10 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     self.trigger('option_remove', value);
     self.removeItem(value, silent);
   }
+
   /**
    * Clears all options.
    */
-
-
   clearOptions(filter) {
     const boundFilter = (filter || this.clearFilter).bind(this);
     this.loadedSearches = {};
@@ -3749,101 +3573,85 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     this.lastQuery = null;
     this.trigger('option_clear');
   }
+
   /**
    * Used by clearOptions() to decide whether or not an option should be removed
    * Return true to keep an option, false to remove
    *
    */
-
-
   clearFilter(option, value) {
     if (this.items.indexOf(value) >= 0) {
       return true;
     }
-
     return false;
   }
+
   /**
    * Returns the dom element of the option
    * matching the given value.
    *
    */
-
-
   getOption(value, create = false) {
     const hashed = hash_key(value);
     if (hashed === null) return null;
     const option = this.options[hashed];
-
     if (option != undefined) {
       if (option.$div) {
         return option.$div;
       }
-
       if (create) {
         return this._render('option', option);
       }
     }
-
     return null;
   }
+
   /**
    * Returns the dom element of the next or previous dom element of the same type
    * Note: adjacent options may not be adjacent DOM elements (optgroups)
    *
    */
-
-
   getAdjacent(option, direction, type = 'option') {
     var self = this,
-        all;
-
+      all;
     if (!option) {
       return null;
     }
-
     if (type == 'item') {
       all = self.controlChildren();
     } else {
       all = self.dropdown_content.querySelectorAll('[data-selectable]');
     }
-
     for (let i = 0; i < all.length; i++) {
       if (all[i] != option) {
         continue;
       }
-
       if (direction > 0) {
         return all[i + 1];
       }
-
       return all[i - 1];
     }
-
     return null;
   }
+
   /**
    * Returns the dom element of the item
    * matching the given value.
    *
    */
-
-
   getItem(item) {
     if (typeof item == 'object') {
       return item;
     }
-
     var value = hash_key(item);
     return value !== null ? this.control.querySelector(`[data-value="${addSlashes(value)}"]`) : null;
   }
+
   /**
    * "Selects" multiple items at once. Adds them to the list
    * at the current caret position.
    *
    */
-
-
   addItems(values, silent) {
     var self = this;
     var items = Array.isArray(values) ? values : [values];
@@ -3854,13 +3662,12 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       self.addItem(item, silent);
     });
   }
+
   /**
    * "Selects" an item. Adds it to the list
    * at the current caret position.
    *
    */
-
-
   addItem(value, silent) {
     var events = silent ? [] : ['change', 'dropdown_close'];
     debounce_events(this, events, () => {
@@ -3868,77 +3675,66 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       const self = this;
       const inputMode = self.settings.mode;
       const hashed = hash_key(value);
-
       if (hashed && self.items.indexOf(hashed) !== -1) {
         if (inputMode === 'single') {
           self.close();
         }
-
         if (inputMode === 'single' || !self.settings.duplicates) {
           return;
         }
       }
-
       if (hashed === null || !self.options.hasOwnProperty(hashed)) return;
       if (inputMode === 'single') self.clear(silent);
       if (inputMode === 'multi' && self.isFull()) return;
       item = self._render('item', self.options[hashed]);
-
       if (self.control.contains(item)) {
         // duplicates
         item = item.cloneNode(true);
       }
-
       wasFull = self.isFull();
       self.items.splice(self.caretPos, 0, hashed);
       self.insertAtCaret(item);
-
       if (self.isSetup) {
         // update menu / remove the option (if this is not one item being added as part of series)
         if (!self.isPending && self.settings.hideSelected) {
           let option = self.getOption(hashed);
           let next = self.getAdjacent(option, 1);
-
           if (next) {
             self.setActiveOption(next);
           }
-        } // refreshOptions after setActiveOption(),
-        // otherwise setActiveOption() will be called by refreshOptions() with the wrong value
-
+        }
 
+        // refreshOptions after setActiveOption(),
+        // otherwise setActiveOption() will be called by refreshOptions() with the wrong value
         if (!self.isPending && !self.settings.closeAfterSelect) {
           self.refreshOptions(self.isFocused && inputMode !== 'single');
-        } // hide the menu if the maximum number of items have been selected or no options are left
-
+        }
 
+        // hide the menu if the maximum number of items have been selected or no options are left
         if (self.settings.closeAfterSelect != false && self.isFull()) {
           self.close();
         } else if (!self.isPending) {
           self.positionDropdown();
         }
-
         self.trigger('item_add', hashed, item);
-
         if (!self.isPending) {
           self.updateOriginalInput({
             silent: silent
           });
         }
       }
-
       if (!self.isPending || !wasFull && self.isFull()) {
         self.inputState();
         self.refreshState();
       }
     });
   }
+
   /**
    * Removes the selected item matching
    * the provided value.
    *
    */
-
-
   removeItem(item = null, silent) {
     const self = this;
     item = self.getItem(item);
@@ -3947,24 +3743,19 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const value = item.dataset.value;
     i = nodeIndex(item);
     item.remove();
-
     if (item.classList.contains('active')) {
       idx = self.activeItems.indexOf(item);
       self.activeItems.splice(idx, 1);
       removeClasses(item, 'active');
     }
-
     self.items.splice(i, 1);
     self.lastQuery = null;
-
     if (!self.settings.persist && self.userOptions.hasOwnProperty(value)) {
       self.removeOption(value, silent);
     }
-
     if (i < self.caretPos) {
       self.setCaret(self.caretPos - 1);
     }
-
     self.updateOriginalInput({
       silent: silent
     });
@@ -3972,6 +3763,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     self.positionDropdown();
     self.trigger('item_remove', value, item);
   }
+
   /**
    * Invokes the `create` method provided in the
    * TomSelect options that should provide the data
@@ -3981,40 +3773,31 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    * to the item list.
    *
    */
-
-
   createItem(input = null, callback = () => {}) {
     // triggerDropdown parameter @deprecated 2.1.1
     if (arguments.length === 3) {
       callback = arguments[2];
     }
-
     if (typeof callback != 'function') {
       callback = () => {};
     }
-
     var self = this;
     var caret = self.caretPos;
     var output;
     input = input || self.inputValue();
-
     if (!self.canCreate(input)) {
       callback();
       return false;
     }
-
     self.lock();
     var created = false;
-
     var create = data => {
       self.unlock();
       if (!data || typeof data !== 'object') return callback();
       var value = hash_key(data[self.settings.valueField]);
-
       if (typeof value !== 'string') {
         return callback();
       }
-
       self.setTextboxValue();
       self.addOption(data, true);
       self.setCaret(caret);
@@ -4022,7 +3805,6 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       callback(data);
       created = true;
     };
-
     if (typeof self.settings.create === 'function') {
       output = self.settings.create.call(this, input, create);
     } else {
@@ -4031,35 +3813,29 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         [self.settings.valueField]: input
       };
     }
-
     if (!created) {
       create(output);
     }
-
     return true;
   }
+
   /**
    * Re-renders the selected item lists.
    */
-
-
   refreshItems() {
     var self = this;
     self.lastQuery = null;
-
     if (self.isSetup) {
       self.addItems(self.items);
     }
-
     self.updateOriginalInput();
     self.refreshState();
   }
+
   /**
    * Updates all state-dependent attributes
    * and CSS classes.
    */
-
-
   refreshState() {
     const self = this;
     self.refreshValidityState();
@@ -4069,6 +3845,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const wrap_classList = self.wrapper.classList;
     wrap_classList.toggle('focus', self.isFocused);
     wrap_classList.toggle('disabled', self.isDisabled);
+    wrap_classList.toggle('readonly', self.isReadOnly);
     wrap_classList.toggle('required', self.isRequired);
     wrap_classList.toggle('invalid', !self.isValid);
     wrap_classList.toggle('locked', isLocked);
@@ -4078,6 +3855,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     wrap_classList.toggle('has-options', isEmptyObject(self.options));
     wrap_classList.toggle('has-items', self.items.length > 0);
   }
+
   /**
    * Update the `required` attribute of both input and control input.
    *
@@ -4086,78 +3864,71 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    * needs to be temporarily deactivated on the input since the input is
    * hidden and can't show errors.
    */
-
-
   refreshValidityState() {
     var self = this;
-
     if (!self.input.validity) {
       return;
     }
-
     self.isValid = self.input.validity.valid;
     self.isInvalid = !self.isValid;
   }
+
   /**
    * Determines whether or not more items can be added
    * to the control without exceeding the user-defined maximum.
    *
    * @returns {boolean}
    */
-
-
   isFull() {
     return this.settings.maxItems !== null && this.items.length >= this.settings.maxItems;
   }
+
   /**
    * Refreshes the original <select> or <input>
    * element to reflect the current state.
    *
    */
-
-
   updateOriginalInput(opts = {}) {
     const self = this;
     var option, label;
     const empty_option = self.input.querySelector('option[value=""]');
-
     if (self.is_select_tag) {
       const selected = [];
       const has_selected = self.input.querySelectorAll('option:checked').length;
-
       function AddSelected(option_el, value, label) {
         if (!option_el) {
           option_el = getDom('<option value="' + escape_html(value) + '">' + escape_html(label) + '</option>');
-        } // don't move empty option from top of list
-        // fixes bug in firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1725293
-
+        }
 
+        // don't move empty option from top of list
+        // fixes bug in firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1725293
         if (option_el != empty_option) {
           self.input.append(option_el);
         }
+        selected.push(option_el);
 
-        selected.push(option_el); // marking empty option as selected can break validation
+        // marking empty option as selected can break validation
         // fixes https://github.com/orchidjs/tom-select/issues/303
-
         if (option_el != empty_option || has_selected > 0) {
           option_el.selected = true;
         }
-
         return option_el;
-      } // unselect all selected options
-
+      }
 
+      // unselect all selected options
       self.input.querySelectorAll('option:checked').forEach(option_el => {
         option_el.selected = false;
-      }); // nothing selected?
+      });
 
+      // nothing selected?
       if (self.items.length == 0 && self.settings.mode == 'single') {
-        AddSelected(empty_option, "", ""); // order selected <option> tags for values in self.items
+        AddSelected(empty_option, "", "");
+
+        // order selected <option> tags for values in self.items
       } else {
         self.items.forEach(value => {
           option = self.options[value];
           label = option[self.settings.labelField] || '';
-
           if (selected.includes(option.$option)) {
             const reuse_opt = self.input.querySelector(`option[value="${addSlashes(value)}"]:not(:checked)`);
             AddSelected(reuse_opt, value, label);
@@ -4169,19 +3940,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     } else {
       self.input.value = self.getValue();
     }
-
     if (self.isSetup) {
       if (!opts.silent) {
         self.trigger('change', self.getValue());
       }
     }
   }
+
   /**
    * Shows the autocomplete dropdown containing
    * the available options.
    */
-
-
   open() {
     var self = this;
     if (self.isLocked || self.isOpen || self.settings.mode === 'multi' && self.isFull()) return;
@@ -4202,24 +3971,20 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     self.focus();
     self.trigger('dropdown_open', self.dropdown);
   }
+
   /**
    * Closes the autocomplete dropdown menu.
    */
-
-
   close(setTextboxValue = true) {
     var self = this;
     var trigger = self.isOpen;
-
     if (setTextboxValue) {
       // before blur() to prevent form onchange event
       self.setTextboxValue();
-
       if (self.settings.mode === 'single' && self.items.length) {
-        self.hideInput();
+        self.inputState();
       }
     }
-
     self.isOpen = false;
     setAttr(self.focus_node, {
       'aria-expanded': 'false'
@@ -4227,26 +3992,22 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     applyCSS(self.dropdown, {
       display: 'none'
     });
-
     if (self.settings.hideSelected) {
       self.clearActiveOption();
     }
-
     self.refreshState();
     if (trigger) self.trigger('dropdown_close', self.dropdown);
   }
+
   /**
    * Calculates and applies the appropriate
    * position of the dropdown if dropdownParent = 'body'.
    * Otherwise, position is determined by css
    */
-
-
   positionDropdown() {
     if (this.settings.dropdownParent !== 'body') {
       return;
     }
-
     var context = this.control;
     var rect = context.getBoundingClientRect();
     var top = context.offsetHeight + rect.top + window.scrollY;
@@ -4257,13 +4018,12 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       left: left + 'px'
     });
   }
+
   /**
    * Resets / clears all selected items
    * from the control.
    *
    */
-
-
   clear(silent) {
     var self = this;
     if (!self.items.length) return;
@@ -4271,17 +4031,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     iterate$1(items, item => {
       self.removeItem(item, true);
     });
-    self.showInput();
+    self.inputState();
     if (!silent) self.updateOriginalInput();
     self.trigger('clear');
   }
+
   /**
    * A helper method for inserting an element
    * at the current caret position.
    *
    */
-
-
   insertAtCaret(el) {
     const self = this;
     const caret = self.caretPos;
@@ -4289,77 +4048,69 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     target.insertBefore(el, target.children[caret] || null);
     self.setCaret(caret + 1);
   }
+
   /**
    * Removes the current selected item(s).
    *
    */
-
-
   deleteSelection(e) {
     var direction, selection, caret, tail;
     var self = this;
     direction = e && e.keyCode === KEY_BACKSPACE ? -1 : 1;
-    selection = getSelection(self.control_input); // determine items that will be removed
+    selection = getSelection(self.control_input);
 
+    // determine items that will be removed
     const rm_items = [];
-
     if (self.activeItems.length) {
       tail = getTail(self.activeItems, direction);
       caret = nodeIndex(tail);
-
       if (direction > 0) {
         caret++;
       }
-
       iterate$1(self.activeItems, item => rm_items.push(item));
     } else if ((self.isFocused || self.settings.mode === 'single') && self.items.length) {
       const items = self.controlChildren();
       let rm_item;
-
       if (direction < 0 && selection.start === 0 && selection.length === 0) {
         rm_item = items[self.caretPos - 1];
       } else if (direction > 0 && selection.start === self.inputValue().length) {
         rm_item = items[self.caretPos];
       }
-
       if (rm_item !== undefined) {
         rm_items.push(rm_item);
       }
     }
-
     if (!self.shouldDelete(rm_items, e)) {
       return false;
     }
+    preventDefault(e, true);
 
-    preventDefault(e, true); // perform removal
-
+    // perform removal
     if (typeof caret !== 'undefined') {
       self.setCaret(caret);
     }
-
     while (rm_items.length) {
       self.removeItem(rm_items.pop());
     }
-
-    self.showInput();
+    self.inputState();
     self.positionDropdown();
     self.refreshOptions(false);
     return true;
   }
+
   /**
    * Return true if the items should be deleted
    */
-
-
   shouldDelete(items, evt) {
-    const values = items.map(item => item.dataset.value); // allow the callback to abort
+    const values = items.map(item => item.dataset.value);
 
+    // allow the callback to abort
     if (!values.length || typeof this.settings.onDelete === 'function' && this.settings.onDelete(values, evt) === false) {
       return false;
     }
-
     return true;
   }
+
   /**
    * Selects the previous / next item (depending on the `direction` argument).
    *
@@ -4367,64 +4118,58 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    * < 0 - left
    *
    */
-
-
   advanceSelection(direction, e) {
     var last_active,
-        adjacent,
-        self = this;
+      adjacent,
+      self = this;
     if (self.rtl) direction *= -1;
-    if (self.inputValue().length) return; // add or remove to active items
+    if (self.inputValue().length) return;
 
+    // add or remove to active items
     if (isKeyDown(KEY_SHORTCUT, e) || isKeyDown('shiftKey', e)) {
       last_active = self.getLastActive(direction);
-
       if (last_active) {
         if (!last_active.classList.contains('active')) {
           adjacent = last_active;
         } else {
           adjacent = self.getAdjacent(last_active, direction, 'item');
-        } // if no active item, get items adjacent to the control input
+        }
 
+        // if no active item, get items adjacent to the control input
       } else if (direction > 0) {
         adjacent = self.control_input.nextElementSibling;
       } else {
         adjacent = self.control_input.previousElementSibling;
       }
-
       if (adjacent) {
         if (adjacent.classList.contains('active')) {
           self.removeActiveItem(last_active);
         }
-
         self.setActiveItemClass(adjacent); // mark as last_active !! after removeActiveItem() on last_active
-      } // move caret to the left or right
+      }
 
+      // move caret to the left or right
     } else {
       self.moveCaret(direction);
     }
   }
-
   moveCaret(direction) {}
+
   /**
    * Get the last active item
    *
    */
-
-
   getLastActive(direction) {
     let last_active = this.control.querySelector('.last-active');
-
     if (last_active) {
       return last_active;
     }
-
     var result = this.control.querySelectorAll('.active');
-
     if (result) {
       return getTail(result, direction);
     }
   }
+
   /**
    * Moves the caret to the specified index.
    *
@@ -4433,75 +4178,76 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    * on mobile webkit devices
    *
    */
-
-
   setCaret(new_pos) {
     this.caretPos = this.items.length;
   }
+
   /**
    * Return list of item dom elements
    *
    */
-
-
   controlChildren() {
     return Array.from(this.control.querySelectorAll('[data-ts-item]'));
   }
+
   /**
    * Disables user input on the control. Used while
    * items are being asynchronously created.
    */
-
-
   lock() {
-    this.isLocked = true;
-    this.refreshState();
+    this.setLocked(true);
   }
+
   /**
    * Re-enables user input on the control.
    */
-
-
   unlock() {
-    this.isLocked = false;
+    this.setLocked(false);
+  }
+
+  /**
+   * Disable or enable user input on the control
+   */
+  setLocked(lock = this.isReadOnly || this.isDisabled) {
+    this.isLocked = lock;
     this.refreshState();
   }
+
   /**
    * Disables user input on the control completely.
    * While disabled, it cannot receive focus.
    */
-
-
   disable() {
-    var self = this;
-    self.input.disabled = true;
-    self.control_input.disabled = true;
-    self.focus_node.tabIndex = -1;
-    self.isDisabled = true;
+    this.setDisabled(true);
     this.close();
-    self.lock();
   }
+
   /**
    * Enables the control so that it can respond
    * to focus and user input.
    */
-
-
   enable() {
-    var self = this;
-    self.input.disabled = false;
-    self.control_input.disabled = false;
-    self.focus_node.tabIndex = self.tabIndex;
-    self.isDisabled = false;
-    self.unlock();
+    this.setDisabled(false);
+  }
+  setDisabled(disabled) {
+    this.focus_node.tabIndex = disabled ? -1 : this.tabIndex;
+    this.isDisabled = disabled;
+    this.input.disabled = disabled;
+    this.control_input.disabled = disabled;
+    this.setLocked();
+  }
+  setReadOnly(isReadOnly) {
+    this.isReadOnly = isReadOnly;
+    this.input.readOnly = isReadOnly;
+    this.control_input.readOnly = isReadOnly;
+    this.setLocked();
   }
+
   /**
    * Completely destroys the control and
    * unbinds all event listeners so that it can
    * be garbage collected.
    */
-
-
   destroy() {
     var self = this;
     var revertSettings = self.revertSettings;
@@ -4512,35 +4258,30 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     self.input.innerHTML = revertSettings.innerHTML;
     self.input.tabIndex = revertSettings.tabIndex;
     removeClasses(self.input, 'tomselected', 'ts-hidden-accessible');
-
     self._destroy();
-
     delete self.input.tomselect;
   }
+
   /**
    * A helper method for rendering "item" and
    * "option" templates, given the data.
    *
    */
-
-
   render(templateName, data) {
     var id, html;
     const self = this;
-
     if (typeof this.settings.render[templateName] !== 'function') {
       return null;
-    } // render markup
-
+    }
 
+    // render markup
     html = self.settings.render[templateName].call(this, data, escape_html);
-
     if (!html) {
       return null;
     }
+    html = getDom(html);
 
-    html = getDom(html); // add mandatory attributes
-
+    // add mandatory attributes
     if (templateName === 'option' || templateName === 'option_create') {
       if (data[self.settings.disabledField]) {
         setAttr(html, {
@@ -4556,20 +4297,19 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       setAttr(html, {
         'data-group': id
       });
-
       if (data.group[self.settings.disabledField]) {
         setAttr(html, {
           'data-disabled': ''
         });
       }
     }
-
     if (templateName === 'option' || templateName === 'item') {
       const value = get_hash(data[self.settings.valueField]);
       setAttr(html, {
         'data-value': value
-      }); // make sure we have some classes if a template is overwritten
+      });
 
+      // make sure we have some classes if a template is overwritten
       if (templateName === 'item') {
         addClasses(html, self.settings.itemClass);
         setAttr(html, {
@@ -4580,38 +4320,34 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         setAttr(html, {
           role: 'option',
           id: data.$id
-        }); // update cache
+        });
 
+        // update cache
         data.$div = html;
         self.options[value] = data;
       }
     }
-
     return html;
   }
+
   /**
    * Type guarded rendering
    *
    */
-
-
   _render(templateName, data) {
     const html = this.render(templateName, data);
-
     if (html == null) {
       throw 'HTMLElement expected';
     }
-
     return html;
   }
+
   /**
    * Clears the render cache for a template. If
    * no template is given, clears all render
    * caches.
    *
    */
-
-
   clearCache() {
     iterate$1(this.options, option => {
       if (option.$div) {
@@ -4620,26 +4356,25 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       }
     });
   }
+
   /**
    * Removes a value from item and option caches
    *
    */
-
-
   uncacheValue(value) {
     const option_el = this.getOption(value);
     if (option_el) option_el.remove();
   }
+
   /**
    * Determines whether or not to display the
    * create item prompt, given a user input.
    *
    */
-
-
   canCreate(input) {
     return this.settings.create && input.length > 0 && this.settings.createFilter.call(this, input);
   }
+
   /**
    * Wraps this.`method` so that `new_fn` can be invoked 'before', 'after', or 'instead' of the original method
    *
@@ -4647,33 +4382,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    * });
    */
-
-
   hook(when, method, new_fn) {
     var self = this;
     var orig_method = self[method];
-
     self[method] = function () {
       var result, result_new;
-
       if (when === 'after') {
         result = orig_method.apply(self, arguments);
       }
-
       result_new = new_fn.apply(self, arguments);
-
       if (when === 'instead') {
         return result_new;
       }
-
       if (when === 'before') {
         result = orig_method.apply(self, arguments);
       }
-
       return result;
     };
   }
-
 }
 
 /**
@@ -4690,8 +4416,10 @@ class TomSelect extends MicroPlugin(MicroEvent) {
  * governing permissions and limitations under the License.
  *
  */
+
 function caret_position () {
   var self = this;
+
   /**
    * Moves the caret to the specified index.
    *
@@ -4700,13 +4428,11 @@ function caret_position () {
    * on mobile webkit devices
    *
    */
-
   self.hook('instead', 'setCaret', new_pos => {
     if (self.settings.mode === 'single' || !self.control.contains(self.control_input)) {
       new_pos = self.items.length;
     } else {
       new_pos = Math.max(0, Math.min(self.items.length, new_pos));
-
       if (new_pos != self.caretPos && !self.isPending) {
         self.controlChildren().forEach((child, j) => {
           if (j < new_pos) {
@@ -4717,19 +4443,20 @@ function caret_position () {
         });
       }
     }
-
     self.caretPos = new_pos;
   });
   self.hook('instead', 'moveCaret', direction => {
-    if (!self.isFocused) return; // move caret before or after selected items
+    if (!self.isFocused) return;
 
+    // move caret before or after selected items
     const last_active = self.getLastActive(direction);
-
     if (last_active) {
       const idx = nodeIndex(last_active);
       self.setCaret(direction > 0 ? idx + 1 : idx);
       self.setActiveItem();
-      removeClasses(last_active, 'last-active'); // move caret left or right of current position
+      removeClasses(last_active, 'last-active');
+
+      // move caret left or right of current position
     } else {
       self.setCaret(self.caretPos + direction);
     }
@@ -4750,6 +4477,7 @@ function caret_position () {
  * governing permissions and limitations under the License.
  *
  */
+
 function dropdown_input () {
   const self = this;
   self.settings.shouldOpen = true; // make sure the input is shown even if there are no options to display in the dropdown
@@ -4759,8 +4487,9 @@ function dropdown_input () {
     addClasses(self.control_input, 'dropdown-input');
     const div = getDom('<div class="dropdown-input-wrap">');
     div.append(self.control_input);
-    self.dropdown.insertBefore(div, self.dropdown.firstChild); // set a placeholder in the select control
+    self.dropdown.insertBefore(div, self.dropdown.firstChild);
 
+    // set a placeholder in the select control
     const placeholder = getDom('<input class="items-placeholder" tabindex="-1" />');
     placeholder.placeholder = self.settings.placeholder || '';
     self.control.append(placeholder);
@@ -4775,32 +4504,32 @@ function dropdown_input () {
             preventDefault(evt, true);
             self.close();
           }
-
           self.clearActiveItems();
           return;
-
         case KEY_TAB:
           self.focus_node.tabIndex = -1;
           break;
       }
-
       return self.onKeyDown.call(self, evt);
     });
     self.on('blur', () => {
       self.focus_node.tabIndex = self.isDisabled ? -1 : self.tabIndex;
-    }); // give the control_input focus when the dropdown is open
+    });
 
+    // give the control_input focus when the dropdown is open
     self.on('dropdown_open', () => {
       self.control_input.focus();
-    }); // prevent onBlur from closing when focus is on the control_input
+    });
 
+    // prevent onBlur from closing when focus is on the control_input
     const orig_onBlur = self.onBlur;
     self.hook('instead', 'onBlur', evt => {
       if (evt && evt.relatedTarget == self.control_input) return;
       return orig_onBlur.call(self);
     });
-    addEvent(self.control_input, 'blur', () => self.onBlur()); // return focus to control to allow further keyboard input
+    addEvent(self.control_input, 'blur', () => self.onBlur());
 
+    // return focus to control to allow further keyboard input
     self.hook('before', 'close', () => {
       if (!self.isOpen) return;
       self.focus_node.focus({
@@ -4823,6 +4552,7 @@ function dropdown_input () {
  * governing permissions and limitations under the License.
  *
  */
+
 function no_backspace_delete () {
   var self = this;
   var orig_deleteSelection = self.deleteSelection;
@@ -4830,7 +4560,6 @@ function no_backspace_delete () {
     if (self.activeItems.length) {
       return orig_deleteSelection.call(self, evt);
     }
-
     return false;
   });
 }
@@ -4849,24 +4578,25 @@ function no_backspace_delete () {
  * governing permissions and limitations under the License.
  *
  */
+
 function remove_button (userOptions) {
   const options = Object.assign({
     label: '&times;',
     title: 'Remove',
     className: 'remove',
     append: true
-  }, userOptions); //options.className = 'remove-single';
+  }, userOptions);
 
-  var self = this; // override the render method to add remove button to each item
+  //options.className = 'remove-single';
+  var self = this;
 
+  // override the render method to add remove button to each item
   if (!options.append) {
     return;
   }
-
   var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
   self.hook('after', 'setupTemplates', () => {
     var orig_render_item = self.settings.render.item;
-
     self.settings.render.item = (data, escape) => {
       var item = getDom(orig_render_item.call(self, data, escape));
       var close_button = getDom(html);
@@ -4875,6 +4605,8 @@ function remove_button (userOptions) {
         preventDefault(evt, true);
       });
       addEvent(close_button, 'click', evt => {
+        if (self.isLocked) return;
+
         // propagating will trigger the dropdown to show for single mode
         preventDefault(evt, true);
         if (self.isLocked) return;
@@ -4902,6 +4634,7 @@ function remove_button (userOptions) {
  * governing permissions and limitations under the License.
  *
  */
+
 function restore_on_backspace (userOptions) {
   const self = this;
   const options = Object.assign({
@@ -4913,10 +4646,8 @@ function restore_on_backspace (userOptions) {
     if (!self.isFocused) {
       return;
     }
-
     if (self.control_input.value.trim() === '') {
       var option = self.options[value];
-
       if (option) {
         self.setTextboxValue(options.text.call(self, option));
       }