tom-select-rails 2.2.2 → 2.3.1

data/vendor/assets/javascripts/tom-select-rails/js/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");
 */
 
@@ -28,13 +28,11 @@
 	    callback(event);
 	  });
 	}
-
 	class MicroEvent {
 	  constructor() {
 	    this._events = void 0;
 	    this._events = {};
 	  }
-
 	  on(events, fct) {
 	    forEvents(events, event => {
 	      const event_array = this._events[event] || [];
@@ -42,28 +40,23 @@
 	      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 => {
@@ -74,7 +67,6 @@
 	      });
 	    });
 	  }
-
 	}
 
 	/**
@@ -92,6 +84,7 @@
 	 *
 	 * @author Brian Reavis <brian@thirdroute.com>
 	 */
+
 	function MicroPlugin(Interface) {
 	  Interface.plugins = {};
 	  return class extends Interface {
@@ -104,7 +97,6 @@
 	        loaded: {}
 	      };
 	    }
-
 	    /**
 	     * Registers a plugin.
 	     *
@@ -116,6 +108,7 @@
 	        'fn': fn
 	      };
 	    }
+
 	    /**
 	     * Initializes the listed plugins (with options).
 	     * Acceptable formats:
@@ -131,13 +124,10 @@
 	     *
 	     * @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') {
@@ -155,46 +145,37 @@
 	          }
 	        }
 	      }
-
 	      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];
 	    }
-
 	  };
 	}
 
@@ -1319,7 +1300,6 @@
 	 * ```
 	 *
 	 */
-
 	const iterate = (object, callback) => {
 	  if (Array.isArray(object)) {
 	    object.forEach(callback);
@@ -1338,58 +1318,52 @@
 	 *
 	 * 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);
@@ -1399,11 +1373,11 @@
 	    });
 	  });
 	};
+
 	/**
 	 * Remove css classes
 	 *
 	 */
-
 	const removeClasses = (elmts, ...classes) => {
 	  var norm_classes = classesArray(classes);
 	  elmts = castAsArray(elmts);
@@ -1413,55 +1387,52 @@
 	    });
 	  });
 	};
+
 	/**
 	 * 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
 	 *
@@ -1469,45 +1440,41 @@
 	 * <= 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) {
@@ -1517,10 +1484,10 @@
 	    }
 	  });
 	};
+
 	/**
 	 * Replace a node
 	 */
-
 	const replaceNode = (existing, replacement) => {
 	  if (existing.parentNode) existing.parentNode.replaceChild(replacement, existing);
 	};
@@ -1532,19 +1499,20 @@
 	 * - 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';
@@ -1555,12 +1523,11 @@
 	      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 => {
@@ -1568,23 +1535,20 @@
 	      });
 	    }
 	  };
-
 	  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) {
@@ -1631,6 +1595,7 @@
 	  preload: null,
 	  allowEmptyOption: false,
 	  //closeAfterSelect: false,
+	  refreshThrottle: 300,
 	  loadThrottle: 300,
 	  loadingClass: 'loading',
 	  dataAttr: null,
@@ -1660,7 +1625,6 @@
 	  shouldLoad: function (query) {
 	    return query.length > 0;
 	  },
-
 	  /*
 	  load                 : null, // function(query, callback) { ... }
 	  score                : null, // function(search) { ... }
@@ -1680,6 +1644,7 @@
 	  onType               : null, // function(str) { ... }
 	  onDelete             : null, // function(values) { ... }
 	  */
+
 	  render: {
 	    /*
 	    item: null,
@@ -1713,29 +1678,38 @@
 	  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;
@@ -1743,124 +1717,120 @@
 	    }, 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);
 	};
@@ -1876,15 +1846,12 @@
 	  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: [],
@@ -1892,41 +1859,37 @@
 	    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)) {
@@ -1942,32 +1905,30 @@
 	        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') {
@@ -1975,15 +1936,13 @@
 	      }
 	    });
 	  };
+
 	  /**
 	   * 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;
@@ -2002,19 +1961,16 @@
 	      });
 	    }
 	  };
-
 	  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;
@@ -2034,8 +1990,10 @@
 	    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;
@@ -2055,19 +2013,20 @@
 	    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;
@@ -2075,30 +2034,28 @@
 	    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 {
@@ -2107,16 +2064,14 @@
 	        };
 	      }
 	    }
-
 	    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;
@@ -2125,19 +2080,19 @@
 	    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, {
@@ -2147,7 +2102,9 @@
 	      });
 	      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;
@@ -2155,7 +2112,6 @@
 	      control_input = getDom('<input/>');
 	      this.focus_node = control;
 	    }
-
 	    this.wrapper = wrapper;
 	    this.dropdown = dropdown;
 	    this.dropdown_content = dropdown_content;
@@ -2163,12 +2119,11 @@
 	    this.control_input = control_input;
 	    this.setup();
 	  }
+
 	  /**
 	   * set up event bindings.
 	   *
 	   */
-
-
 	  setup() {
 	    const self = this;
 	    const settings = self.settings;
@@ -2196,7 +2151,6 @@
 	    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, {
@@ -2210,38 +2164,32 @@
 	        '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;
 	    });
@@ -2250,11 +2198,11 @@
 	      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);
@@ -2262,73 +2210,69 @@
 	    });
 	    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
@@ -2351,40 +2295,41 @@
 	    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;
@@ -2421,12 +2366,11 @@
 	    };
 	    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 = {
@@ -2449,18 +2393,16 @@
 	      '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, {
@@ -2471,78 +2413,68 @@
 
 	    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);
@@ -2553,46 +2485,38 @@
 	      });
 	    }, 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:
@@ -2603,20 +2527,18 @@
 	            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();
@@ -2624,178 +2546,174 @@
 	          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) {
@@ -2804,52 +2722,45 @@
 	      });
 	    } 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
@@ -2866,19 +2777,16 @@
 	   *	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;
@@ -2887,50 +2795,44 @@
 	    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
@@ -2938,21 +2840,17 @@
 	   * 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, () => {
@@ -2960,63 +2858,54 @@
 	      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')) {
@@ -3027,65 +2916,58 @@
 	    } 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;
@@ -3098,12 +2980,11 @@
 	    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;
@@ -3111,35 +2992,30 @@
 	    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');
@@ -3147,42 +3023,38 @@
 	        '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;
@@ -3192,70 +3064,45 @@
 	          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
@@ -3263,11 +3110,10 @@
 	   *
 	   * @return {function}
 	   */
-
-
 	  getScoreFunction(query) {
 	    return this.sifter.getScoreFunction(query, this.getSearchOptions());
 	  }
+
 	  /**
 	   * Returns search options for sifter (the system
 	   * for scoring and sorting results).
@@ -3275,18 +3121,14 @@
 	   * @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,
@@ -3294,27 +3136,26 @@
 	      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, {
@@ -3323,25 +3164,23 @@
 	      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;
@@ -3354,27 +3193,42 @@
 	    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];
@@ -3383,30 +3237,26 @@
 	      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, {
@@ -3414,38 +3264,36 @@
 	            '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);
@@ -3461,93 +3309,87 @@
 	      }
 	    });
 	    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
@@ -3559,61 +3401,52 @@
 	   *   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;
@@ -3621,27 +3454,24 @@
 	    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];
@@ -3649,31 +3479,30 @@
 	      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;
@@ -3681,48 +3510,44 @@
 	    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);
@@ -3733,11 +3558,10 @@
 	    self.trigger('option_remove', value);
 	    self.removeItem(value, silent);
 	  }
+
 	  /**
 	   * Clears all options.
 	   */
-
-
 	  clearOptions(filter) {
 	    const boundFilter = (filter || this.clearFilter).bind(this);
 	    this.loadedSearches = {};
@@ -3753,101 +3577,85 @@
 	    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];
@@ -3858,13 +3666,12 @@
 	      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, () => {
@@ -3872,77 +3679,66 @@
 	      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);
@@ -3951,24 +3747,19 @@
 	    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
 	    });
@@ -3976,6 +3767,7 @@
 	    self.positionDropdown();
 	    self.trigger('item_remove', value, item);
 	  }
+
 	  /**
 	   * Invokes the `create` method provided in the
 	   * TomSelect options that should provide the data
@@ -3985,40 +3777,31 @@
 	   * 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);
@@ -4026,7 +3809,6 @@
 	      callback(data);
 	      created = true;
 	    };
-
 	    if (typeof self.settings.create === 'function') {
 	      output = self.settings.create.call(this, input, create);
 	    } else {
@@ -4035,35 +3817,29 @@
 	        [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();
@@ -4073,6 +3849,7 @@
 	    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);
@@ -4082,6 +3859,7 @@
 	    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.
 	   *
@@ -4090,78 +3868,71 @@
 	   * 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);
@@ -4173,19 +3944,17 @@
 	    } 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;
@@ -4206,24 +3975,20 @@
 	    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'
@@ -4231,26 +3996,22 @@
 	    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;
@@ -4261,13 +4022,12 @@
 	      left: left + 'px'
 	    });
 	  }
+
 	  /**
 	   * Resets / clears all selected items
 	   * from the control.
 	   *
 	   */
-
-
 	  clear(silent) {
 	    var self = this;
 	    if (!self.items.length) return;
@@ -4275,17 +4035,16 @@
 	    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;
@@ -4293,77 +4052,69 @@
 	    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).
 	   *
@@ -4371,64 +4122,58 @@
 	   * < 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.
 	   *
@@ -4437,75 +4182,76 @@
 	   * 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;
@@ -4516,35 +4262,30 @@
 	    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, {
@@ -4560,20 +4301,19 @@
 	      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, {
@@ -4584,38 +4324,34 @@
 	        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) {
@@ -4624,26 +4360,25 @@
 	      }
 	    });
 	  }
+
 	  /**
 	   * 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
 	   *
@@ -4651,33 +4386,24 @@
 	   *
 	   * });
 	   */
-
-
 	  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;
 	    };
 	  }
-
 	}
 
 	/**
@@ -4694,8 +4420,10 @@
 	 * governing permissions and limitations under the License.
 	 *
 	 */
+
 	function caret_position () {
 	  var self = this;
+
 	  /**
 	   * Moves the caret to the specified index.
 	   *
@@ -4704,13 +4432,11 @@
 	   * 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) {
@@ -4721,19 +4447,20 @@
 	        });
 	      }
 	    }
-
 	    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);
 	    }
@@ -4754,6 +4481,7 @@
 	 * 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
@@ -4763,8 +4491,9 @@
 	    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);
@@ -4779,32 +4508,32 @@
 	            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({
@@ -4827,6 +4556,7 @@
 	 * governing permissions and limitations under the License.
 	 *
 	 */
+
 	function no_backspace_delete () {
 	  var self = this;
 	  var orig_deleteSelection = self.deleteSelection;
@@ -4834,7 +4564,6 @@
 	    if (self.activeItems.length) {
 	      return orig_deleteSelection.call(self, evt);
 	    }
-
 	    return false;
 	  });
 	}
@@ -4853,24 +4582,25 @@
 	 * 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);
@@ -4879,6 +4609,8 @@
 	        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;
@@ -4906,6 +4638,7 @@
 	 * governing permissions and limitations under the License.
 	 *
 	 */
+
 	function restore_on_backspace (userOptions) {
 	  const self = this;
 	  const options = Object.assign({
@@ -4917,10 +4650,8 @@
 	    if (!self.isFocused) {
 	      return;
 	    }
-
 	    if (self.control_input.value.trim() === '') {
 	      var option = self.options[value];
-
 	      if (option) {
 	        self.setTextboxValue(options.text.call(self, option));
 	      }