Inverse focus calls when opening/closing dropdown

public/assets/scripts/choices.js

@@ -88,9 +88,6 @@ return /******/ (function(modules) { // webpackBootstrap
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 /* eslint-disable */
 
 /**
@@ -128,15 +125,15 @@ var generateChars = exports.generateChars = function generateChars(length) {
 var generateId = exports.generateId = function generateId(element, prefix) {
   var id = element.id || element.name && element.name + '-' + generateChars(2) || generateChars(4);
   id = id.replace(/(:|\.|\[|\]|,)/g, '');
-  id = prefix + id;
+  id = prefix + '-' + id;
 
   return id;
 };
 
 /**
- * Tests the type of an object
+ * Gets the type of an object
- * @param  {String}  type Type to test object against
+ * Why not use typeof? See here: http: //bonsaiden.github.io/JavaScript-Garden/#types.typeof
- * @param  {Object}  obj  Object to be tested
+ * @param  {Object}  obj  Object to check
  * @return {Boolean}
  */
 var getType = exports.getType = function getType(obj) {
@@ -159,9 +156,8 @@ var isType = exports.isType = function isType(type, obj) {
  * @param  {Object}  obj  Object to be tested
  * @return {Boolean}
  */
-var isElement = exports.isElement = function isElement(o) {
+var isElement = exports.isElement = function isElement(element) {
-  return (typeof HTMLElement === 'undefined' ? 'undefined' : _typeof(HTMLElement)) === 'object' ? o instanceof HTMLElement // DOM2
+  return element instanceof Element;
-  : o && (typeof o === 'undefined' ? 'undefined' : _typeof(o)) === 'object' && o !== null && o.nodeType === 1 && typeof o.nodeName === 'string';
 };
 
 /**
@@ -380,8 +376,14 @@ var sortByAlpha = exports.sortByAlpha = function sortByAlpha(a, b) {
   var labelA = (a.label || a.value).toLowerCase();
   var labelB = (b.label || b.value).toLowerCase();
 
-  if (labelA < labelB) return -1;
+  if (labelA < labelB) {
-  if (labelA > labelB) return 1;
+    return -1;
+  }
+
+  if (labelA > labelB) {
+    return 1;
+  }
+
   return 0;
 };
 
@@ -450,17 +452,17 @@ var reduceToValues = exports.reduceToValues = function reduceToValues(items) {
 
 /**
  * Fetch properties from object
- * @param {Object} object     Related object
+ * @param {Object} object Related object
- * @param {String} properties Properties from object
+ * @param {String} path   Path to value
  */
-var fetchFromObject = exports.fetchFromObject = function fetchFromObject(object, properties) {
+var fetchFromObject = exports.fetchFromObject = function fetchFromObject(object, path) {
-  var index = properties.indexOf('.');
+  var index = path.indexOf('.');
 
   if (index > -1) {
-    return fetchFromObject(object[properties.substring(0, index)], properties.substr(index + 1));
+    return fetchFromObject(object[path.substring(0, index)], path.substr(index + 1));
   }
 
-  return object[properties];
+  return object[path];
 };
 
 var isIE11 = exports.isIE11 = function isIE11() {
@@ -468,12 +470,13 @@ var isIE11 = exports.isIE11 = function isIE11() {
 };
 
 var existsInArray = exports.existsInArray = function existsInArray(array, value) {
+  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
   return array.some(function (item) {
     if (isType('String', value)) {
-      return item.value === value.trim();
+      return item[key] === value.trim();
     }
 
-    return item.value === value;
+    return item[key] === value;
   });
 };
 
@@ -520,7 +523,7 @@ if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
 /* 3 */
 /***/ (function(module, exports) {
 
-var core = module.exports = { version: '2.5.7' };
+var core = module.exports = { version: '2.5.6' };
 if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
 
 
@@ -1279,8 +1282,9 @@ function isPlainObject(value) {
 
 /* harmony default export */ var lodash_es_isPlainObject = (isPlainObject);
 
-// EXTERNAL MODULE: ./node_modules/symbol-observable/es/index.js
+// EXTERNAL MODULE: ./node_modules/symbol-observable/index.js
-var es = __webpack_require__(65);
+var symbol_observable = __webpack_require__(65);
+var symbol_observable_default = /*#__PURE__*/__webpack_require__.n(symbol_observable);
 
 // CONCATENATED MODULE: ./node_modules/redux/es/createStore.js
 
@@ -1514,7 +1518,7 @@ var ActionTypes = {
         var unsubscribe = outerSubscribe(observeState);
         return { unsubscribe: unsubscribe };
       }
-    }, _ref[es["a" /* default */]] = function () {
+    }, _ref[symbol_observable_default.a] = function () {
       return this;
     }, _ref;
   }
@@ -1529,7 +1533,7 @@ var ActionTypes = {
     subscribe: subscribe,
     getState: getState,
     replaceReducer: replaceReducer
-  }, _ref2[es["a" /* default */]] = observable, _ref2;
+  }, _ref2[symbol_observable_default.a] = observable, _ref2;
 }
 // CONCATENATED MODULE: ./node_modules/redux/es/utils/warning.js
 /**
@@ -1983,7 +1987,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TEMPLATES = undefined;
 
-var _classnames = __webpack_require__(79);
+var _classnames = __webpack_require__(80);
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
@@ -2110,19 +2114,19 @@ var _store2 = __webpack_require__(63);
 
 var _store3 = _interopRequireDefault(_store2);
 
-var _components = __webpack_require__(72);
+var _components = __webpack_require__(73);
 
 var _constants = __webpack_require__(4);
 
 var _templates = __webpack_require__(33);
 
-var _choices = __webpack_require__(80);
+var _choices = __webpack_require__(81);
 
-var _items = __webpack_require__(81);
+var _items = __webpack_require__(82);
 
-var _groups = __webpack_require__(82);
+var _groups = __webpack_require__(83);
 
-var _misc = __webpack_require__(83);
+var _misc = __webpack_require__(84);
 
 var _utils = __webpack_require__(0);
 
@@ -2472,7 +2476,7 @@ var Choices = function () {
     }
   }, {
     key: 'showDropdown',
-    value: function showDropdown(focusInput) {
+    value: function showDropdown(preventInputFocus) {
       var _this6 = this;
 
       if (this.dropdown.isActive) {
@@ -2483,7 +2487,7 @@ var Choices = function () {
         _this6.dropdown.show();
         _this6.containerOuter.open(_this6.dropdown.distanceFromTopWindow());
 
-        if (focusInput && _this6.config.searchEnabled) {
+        if (!preventInputFocus && _this6.config.searchEnabled) {
           _this6.input.focus();
         }
 
@@ -2494,7 +2498,7 @@ var Choices = function () {
     }
   }, {
     key: 'hideDropdown',
-    value: function hideDropdown(blurInput) {
+    value: function hideDropdown(preventInputBlur) {
       var _this7 = this;
 
       if (!this.dropdown.isActive) {
@@ -2505,7 +2509,7 @@ var Choices = function () {
         _this7.dropdown.hide();
         _this7.containerOuter.close();
 
-        if (blurInput && _this7.config.searchEnabled) {
+        if (!preventInputBlur && _this7.config.searchEnabled) {
           _this7.input.removeActiveDescendant();
           _this7.input.blur();
         }
@@ -2521,7 +2525,7 @@ var Choices = function () {
       if (this.dropdown.isActive) {
         this.hideDropdown();
       } else {
-        this.showDropdown(true); // code smell 🤢
+        this.showDropdown();
       }
 
       return this;
@@ -2893,7 +2897,7 @@ var Choices = function () {
 
       // We wont to close the dropdown if we are dealing with a single select box
       if (hasActiveDropdown && this._isSelectOneElement) {
-        this.hideDropdown();
+        this.hideDropdown(true);
         this.containerOuter.focus();
       }
     }
@@ -2959,7 +2963,7 @@ var Choices = function () {
       var notice = (0, _utils.isType)('Function', this.config.addItemText) ? this.config.addItemText(value) : this.config.addItemText;
 
       if (!this._isSelectOneElement) {
-        var valueAlreadyExists = !(0, _utils.existsInArray)(activeItems, value);
+        var isDuplicateValue = (0, _utils.existsInArray)(activeItems, value);
 
         if (this.config.maxItemCount > 0 && this.config.maxItemCount <= activeItems.length) {
           // If there is a max entry limit and we have reached that limit
@@ -2975,7 +2979,7 @@ var Choices = function () {
           canAddItem = (0, _utils.regexFilter)(value, this.config.regexFilter);
         }
 
-        if (!this.config.duplicateItemsAllowed && !valueAlreadyExists && canAddItem) {
+        if (!this.config.duplicateItemsAllowed && isDuplicateValue && canAddItem) {
           canAddItem = false;
           notice = (0, _utils.isType)('Function', this.config.uniqueItemText) ? this.config.uniqueItemText(value) : this.config.uniqueItemText;
         }
@@ -3159,7 +3163,7 @@ var Choices = function () {
 
       // If a user is typing and the dropdown is not active
       if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
-        this.showDropdown(true);
+        this.showDropdown();
       }
 
       var onAKey = function onAKey() {
@@ -3181,7 +3185,7 @@ var Choices = function () {
 
           // All is good, add
           if (canAddItem.response) {
-            _this17.hideDropdown();
+            _this17.hideDropdown(true);
             _this17._addItem(value);
             _this17._triggerChange(value);
             _this17.clearInput();
@@ -3207,14 +3211,14 @@ var Choices = function () {
           }
         } else if (_this17._isSelectOneElement) {
           // Open single select dropdown if it's not active
-          _this17.showDropdown(true);
+          _this17.showDropdown();
           event.preventDefault();
         }
       };
 
       var onEscapeKey = function onEscapeKey() {
         if (hasActiveDropdown) {
-          _this17.hideDropdown();
+          _this17.hideDropdown(true);
           _this17.containerOuter.focus();
         }
       };
@@ -3223,7 +3227,7 @@ var Choices = function () {
         // If up or down key is pressed, traverse through options
         if (hasActiveDropdown || _this17._isSelectOneElement) {
           // Show dropdown if focus
-          _this17.showDropdown(true);
+          _this17.showDropdown();
 
           _this17.config.searchEnabled = false;
 
@@ -3302,12 +3306,12 @@ var Choices = function () {
           }
 
           if (canAddItem.response === true) {
-            this.showDropdown();
+            this.showDropdown(true);
           } else if (!canAddItem.notice) {
-            this.hideDropdown();
+            this.hideDropdown(true);
           }
         } else {
-          this.hideDropdown();
+          this.hideDropdown(true);
         }
       } else {
         var backKey = _constants.KEY_CODES.BACK_KEY;
@@ -3350,7 +3354,7 @@ var Choices = function () {
             this.input.focus();
           } else {
             // If a select box, we want to show the dropdown
-            this.showDropdown(true);
+            this.showDropdown();
           }
         }
         // Prevents focus event firing
@@ -3406,35 +3410,28 @@ var Choices = function () {
     value: function _onClick(_ref4) {
       var target = _ref4.target;
 
-      var hasActiveDropdown = this.dropdown.isActive;
-      var activeItems = this._store.activeItems;
-
       if (this.containerOuter.element.contains(target)) {
-        if (!hasActiveDropdown) {
+        if (!this.dropdown.isActive) {
           if (this._isTextElement) {
             if (document.activeElement !== this.input.element) {
               this.input.focus();
             }
-          } else if (this.config.searchEnabled) {
-            this.showDropdown(true);
           } else {
             this.showDropdown();
-            this.containerOuter.focus(); // code smell 🤢
+            this.containerOuter.focus();
           }
         } else if (this._isSelectOneElement && target !== this.input.element && !this.dropdown.element.contains(target)) {
-          this.hideDropdown(true);
+          this.hideDropdown();
         }
       } else {
-        var hasHighlightedItems = activeItems.some(function (item) {
+        var hasHighlightedItems = this._store.highlightedActiveItems;
-          return item.highlighted;
-        });
 
         if (hasHighlightedItems) {
           this.unhighlightAll();
         }
 
         this.containerOuter.removeFocusState();
-        this.hideDropdown();
+        this.hideDropdown(true);
       }
     }
   }, {
@@ -3457,7 +3454,7 @@ var Choices = function () {
         'select-one': function selectOne() {
           _this18.containerOuter.addFocusState();
           if (target === _this18.input.element) {
-            _this18.showDropdown();
+            _this18.showDropdown(true);
           }
         },
         'select-multiple': function selectMultiple() {
@@ -3465,7 +3462,7 @@ var Choices = function () {
             // If element is a select box, the focused element is the container and the dropdown
             // isn't already open, focus and show dropdown
             _this18.containerOuter.addFocusState();
-            _this18.showDropdown(true);
+            _this18.showDropdown();
           }
         }
       };
@@ -3492,19 +3489,19 @@ var Choices = function () {
               if (hasHighlightedItems) {
                 _this19.unhighlightAll();
               }
-              _this19.hideDropdown();
+              _this19.hideDropdown(true);
             }
           },
           'select-one': function selectOne() {
             _this19.containerOuter.removeFocusState();
             if (target === _this19.input.element || target === _this19.containerOuter.element && !_this19.config.searchEnabled) {
-              _this19.hideDropdown();
+              _this19.hideDropdown(true);
             }
           },
           'select-multiple': function selectMultiple() {
             if (target === _this19.input.element) {
               _this19.containerOuter.removeFocusState();
-              _this19.hideDropdown();
+              _this19.hideDropdown(true);
               if (hasHighlightedItems) {
                 _this19.unhighlightAll();
               }
@@ -5718,7 +5715,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _redux = __webpack_require__(30);
 
-var _index = __webpack_require__(68);
+var _index = __webpack_require__(69);
 
 var _index2 = _interopRequireDefault(_index);
 
@@ -5957,14 +5954,30 @@ var freeGlobal = typeof global == 'object' && global && global.Object === Object
 
 /***/ }),
 /* 65 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(66);
+
+
+/***/ }),
+/* 66 */
+/***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(global, module) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ponyfill_js__ = __webpack_require__(67);
+/* WEBPACK VAR INJECTION */(function(global, module) {
-/* global window */
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ponyfill = __webpack_require__(68);
+
+var _ponyfill2 = _interopRequireDefault(_ponyfill);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var root; /* global window */
 
-var root;
 
 if (typeof self !== 'undefined') {
   root = self;
@@ -5978,18 +5991,18 @@ if (typeof self !== 'undefined') {
   root = Function('return this')();
 }
 
-var result = Object(__WEBPACK_IMPORTED_MODULE_0__ponyfill_js__["a" /* default */])(root);
+var result = (0, _ponyfill2['default'])(root);
-/* harmony default export */ __webpack_exports__["a"] = (result);
+exports['default'] = result;
-
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(31), __webpack_require__(67)(module)))
-/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(31), __webpack_require__(66)(module)))
 
 /***/ }),
-/* 66 */
+/* 67 */
 /***/ (function(module, exports) {
 
-module.exports = function(originalModule) {
+module.exports = function(module) {
-	if(!originalModule.webpackPolyfill) {
+	if(!module.webpackPolyfill) {
-		var module = Object.create(originalModule);
+		module.deprecate = function() {};
+		module.paths = [];
 		// module.parent = undefined by default
 		if(!module.children) module.children = [];
 		Object.defineProperty(module, "loaded", {
@@ -6004,40 +6017,12 @@ module.exports = function(originalModule) {
 				return module.i;
 			}
 		});
-		Object.defineProperty(module, "exports", {
-			enumerable: true,
-		});
 		module.webpackPolyfill = 1;
 	}
 	return module;
 };
 
 
-/***/ }),
-/* 67 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = symbolObservablePonyfill;
-function symbolObservablePonyfill(root) {
-	var result;
-	var Symbol = root.Symbol;
-
-	if (typeof Symbol === 'function') {
-		if (Symbol.observable) {
-			result = Symbol.observable;
-		} else {
-			result = Symbol('observable');
-			Symbol.observable = result;
-		}
-	} else {
-		result = '@@observable';
-	}
-
-	return result;
-};
-
-
 /***/ }),
 /* 68 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -6045,21 +6030,50 @@ function symbolObservablePonyfill(root) {
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports['default'] = symbolObservablePonyfill;
+function symbolObservablePonyfill(root) {
+	var result;
+	var _Symbol = root.Symbol;
+
+	if (typeof _Symbol === 'function') {
+		if (_Symbol.observable) {
+			result = _Symbol.observable;
+		} else {
+			result = _Symbol('observable');
+			_Symbol.observable = result;
+		}
+	} else {
+		result = '@@observable';
+	}
+
+	return result;
+};
+
+/***/ }),
+/* 69 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
 var _redux = __webpack_require__(30);
 
-var _items = __webpack_require__(69);
+var _items = __webpack_require__(70);
 
 var _items2 = _interopRequireDefault(_items);
 
-var _groups = __webpack_require__(70);
+var _groups = __webpack_require__(71);
 
 var _groups2 = _interopRequireDefault(_groups);
 
-var _choices = __webpack_require__(71);
+var _choices = __webpack_require__(72);
 
 var _choices2 = _interopRequireDefault(_choices);
 
@@ -6091,7 +6105,7 @@ var rootReducer = function rootReducer(passedState, action) {
 exports.default = rootReducer;
 
 /***/ }),
-/* 69 */
+/* 70 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6165,7 +6179,7 @@ function items() {
 }
 
 /***/ }),
-/* 70 */
+/* 71 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6208,7 +6222,7 @@ function groups() {
 }
 
 /***/ }),
-/* 71 */
+/* 72 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6337,7 +6351,7 @@ function choices() {
 }
 
 /***/ }),
-/* 72 */
+/* 73 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6348,27 +6362,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.WrappedSelect = exports.WrappedInput = exports.List = exports.Input = exports.Container = exports.Dropdown = undefined;
 
-var _dropdown = __webpack_require__(73);
+var _dropdown = __webpack_require__(74);
 
 var _dropdown2 = _interopRequireDefault(_dropdown);
 
-var _container = __webpack_require__(74);
+var _container = __webpack_require__(75);
 
 var _container2 = _interopRequireDefault(_container);
 
-var _input = __webpack_require__(75);
+var _input = __webpack_require__(76);
 
 var _input2 = _interopRequireDefault(_input);
 
-var _list = __webpack_require__(76);
+var _list = __webpack_require__(77);
 
 var _list2 = _interopRequireDefault(_list);
 
-var _wrappedInput = __webpack_require__(77);
+var _wrappedInput = __webpack_require__(78);
 
 var _wrappedInput2 = _interopRequireDefault(_wrappedInput);
 
-var _wrappedSelect = __webpack_require__(78);
+var _wrappedSelect = __webpack_require__(79);
 
 var _wrappedSelect2 = _interopRequireDefault(_wrappedSelect);
 
@@ -6382,7 +6396,7 @@ exports.WrappedInput = _wrappedInput2.default;
 exports.WrappedSelect = _wrappedSelect2.default;
 
 /***/ }),
-/* 73 */
+/* 74 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6472,7 +6486,7 @@ var Dropdown = function () {
 exports.default = Dropdown;
 
 /***/ }),
-/* 74 */
+/* 75 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6720,7 +6734,7 @@ var Container = function () {
 exports.default = Container;
 
 /***/ }),
-/* 75 */
+/* 76 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6921,7 +6935,7 @@ var Input = function () {
 exports.default = Input;
 
 /***/ }),
-/* 76 */
+/* 77 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7045,7 +7059,7 @@ var List = function () {
 exports.default = List;
 
 /***/ }),
-/* 77 */
+/* 78 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7112,7 +7126,7 @@ var WrappedInput = function (_WrappedElement) {
 exports.default = WrappedInput;
 
 /***/ }),
-/* 78 */
+/* 79 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7197,7 +7211,7 @@ var WrappedSelect = function (_WrappedElement) {
 exports.default = WrappedSelect;
 
 /***/ }),
-/* 79 */
+/* 80 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -7252,7 +7266,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
 
 
 /***/ }),
-/* 80 */
+/* 81 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7302,7 +7316,7 @@ var clearChoices = exports.clearChoices = function clearChoices() {
 };
 
 /***/ }),
-/* 81 */
+/* 82 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7346,7 +7360,7 @@ var highlightItem = exports.highlightItem = function highlightItem(id, highlight
 };
 
 /***/ }),
-/* 82 */
+/* 83 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7371,7 +7385,7 @@ var addGroup = exports.addGroup = function addGroup(value, id, active, disabled)
 };
 
 /***/ }),
-/* 83 */
+/* 84 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

public/assets/styles/choices.css

@@ -274,7 +274,8 @@
     position: absolute;
     right: 10px;
     top: 50%;
-    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
   }
   [dir="rtl"] .choices__list--dropdown .choices__item--selectable {
     text-align: right;

src/scripts/choices.js

@@ -340,7 +340,7 @@ class Choices {
     return this;
   }
 
-  showDropdown(focusInput) {
+  showDropdown(preventInputFocus) {
     if (this.dropdown.isActive) {
       return this;
     }
@@ -349,7 +349,7 @@ class Choices {
       this.dropdown.show();
       this.containerOuter.open(this.dropdown.distanceFromTopWindow());
 
-      if (focusInput && this.config.searchEnabled) {
+      if (!preventInputFocus && this.config.searchEnabled) {
         this.input.focus();
       }
 
@@ -359,7 +359,7 @@ class Choices {
     return this;
   }
 
-  hideDropdown(blurInput) {
+  hideDropdown(preventInputBlur) {
     if (!this.dropdown.isActive) {
       return this;
     }
@@ -368,7 +368,7 @@ class Choices {
       this.dropdown.hide();
       this.containerOuter.close();
 
-      if (blurInput && this.config.searchEnabled) {
+      if (!preventInputBlur && this.config.searchEnabled) {
         this.input.removeActiveDescendant();
         this.input.blur();
       }
@@ -383,7 +383,7 @@ class Choices {
     if (this.dropdown.isActive) {
       this.hideDropdown();
     } else {
-      this.showDropdown(true); // code smell 🤢
+      this.showDropdown();
     }
 
     return this;
@@ -736,7 +736,7 @@ class Choices {
 
     // We wont to close the dropdown if we are dealing with a single select box
     if (hasActiveDropdown && this._isSelectOneElement) {
-      this.hideDropdown();
+      this.hideDropdown(true);
       this.containerOuter.focus();
     }
   }
@@ -1017,7 +1017,7 @@ class Choices {
 
     // If a user is typing and the dropdown is not active
     if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
-      this.showDropdown(true);
+      this.showDropdown();
     }
 
     const onAKey = () => {
@@ -1043,7 +1043,7 @@ class Choices {
 
         // All is good, add
         if (canAddItem.response) {
-          this.hideDropdown();
+          this.hideDropdown(true);
           this._addItem(value);
           this._triggerChange(value);
           this.clearInput();
@@ -1071,14 +1071,14 @@ class Choices {
         }
       } else if (this._isSelectOneElement) {
         // Open single select dropdown if it's not active
-        this.showDropdown(true);
+        this.showDropdown();
         event.preventDefault();
       }
     };
 
     const onEscapeKey = () => {
       if (hasActiveDropdown) {
-        this.hideDropdown();
+        this.hideDropdown(true);
         this.containerOuter.focus();
       }
     };
@@ -1087,7 +1087,7 @@ class Choices {
       // If up or down key is pressed, traverse through options
       if (hasActiveDropdown || this._isSelectOneElement) {
         // Show dropdown if focus
-        this.showDropdown(true);
+        this.showDropdown();
 
         this.config.searchEnabled = false;
 
@@ -1190,12 +1190,12 @@ class Choices {
         }
 
         if (canAddItem.response === true) {
-          this.showDropdown();
+          this.showDropdown(true);
         } else if (!canAddItem.notice) {
-          this.hideDropdown();
+          this.hideDropdown(true);
         }
       } else {
-        this.hideDropdown();
+        this.hideDropdown(true);
       }
     } else {
       const backKey = KEY_CODES.BACK_KEY;
@@ -1238,7 +1238,7 @@ class Choices {
           this.input.focus();
         } else {
           // If a select box, we want to show the dropdown
-          this.showDropdown(true);
+          this.showDropdown();
         }
       }
       // Prevents focus event firing
@@ -1256,26 +1256,28 @@ class Choices {
     }
 
     if (
-      this.containerOuter.element.contains(target) &&
+      !this.containerOuter.element.contains(target) ||
-      target !== this.input.element
+      target === this.input.element
     ) {
-      const activeItems = this._store.activeItems;
+      return;
-      const hasShiftKey = shiftKey;
-
-      const buttonTarget = findAncestorByAttrName(target, 'data-button');
-      const itemTarget = findAncestorByAttrName(target, 'data-item');
-      const choiceTarget = findAncestorByAttrName(target, 'data-choice');
-
-      if (buttonTarget) {
-        this._handleButtonAction(activeItems, buttonTarget);
-      } else if (itemTarget) {
-        this._handleItemAction(activeItems, itemTarget, hasShiftKey);
-      } else if (choiceTarget) {
-        this._handleChoiceAction(activeItems, choiceTarget);
-      }
-
-      event.preventDefault();
     }
+
+    const activeItems = this._store.activeItems;
+    const hasShiftKey = shiftKey;
+
+    const buttonTarget = findAncestorByAttrName(target, 'data-button');
+    const itemTarget = findAncestorByAttrName(target, 'data-item');
+    const choiceTarget = findAncestorByAttrName(target, 'data-choice');
+
+    if (buttonTarget) {
+      this._handleButtonAction(activeItems, buttonTarget);
+    } else if (itemTarget) {
+      this._handleItemAction(activeItems, itemTarget, hasShiftKey);
+    } else if (choiceTarget) {
+      this._handleChoiceAction(activeItems, choiceTarget);
+    }
+
+    event.preventDefault();
   }
 
   _onMouseOver({ target }) {
@@ -1290,37 +1292,32 @@ class Choices {
   }
 
   _onClick({ target }) {
-    const hasActiveDropdown = this.dropdown.isActive;
-    const activeItems = this._store.activeItems;
-
     if (this.containerOuter.element.contains(target)) {
-      if (!hasActiveDropdown) {
+      if (!this.dropdown.isActive) {
         if (this._isTextElement) {
           if (document.activeElement !== this.input.element) {
             this.input.focus();
           }
-        } else if (this.config.searchEnabled) {
-          this.showDropdown(true);
         } else {
           this.showDropdown();
-          this.containerOuter.focus(); // code smell 🤢
+          this.containerOuter.focus();
         }
       } else if (
         this._isSelectOneElement &&
         target !== this.input.element &&
         !this.dropdown.element.contains(target)
       ) {
-        this.hideDropdown(true);
+        this.hideDropdown();
       }
     } else {
-      const hasHighlightedItems = activeItems.some(item => item.highlighted);
+      const hasHighlightedItems = this._store.highlightedActiveItems;
 
       if (hasHighlightedItems) {
         this.unhighlightAll();
       }
 
       this.containerOuter.removeFocusState();
-      this.hideDropdown();
+      this.hideDropdown(true);
     }
   }
 
@@ -1338,15 +1335,15 @@ class Choices {
       'select-one': () => {
         this.containerOuter.addFocusState();
         if (target === this.input.element) {
-          this.showDropdown();
+          this.showDropdown(true);
         }
       },
       'select-multiple': () => {
         if (target === this.input.element) {
+          this.showDropdown(true);
           // If element is a select box, the focused element is the container and the dropdown
           // isn't already open, focus and show dropdown
           this.containerOuter.addFocusState();
-          this.showDropdown(true);
         }
       },
     };
@@ -1369,7 +1366,7 @@ class Choices {
             if (hasHighlightedItems) {
               this.unhighlightAll();
             }
-            this.hideDropdown();
+            this.hideDropdown(true);
           }
         },
         'select-one': () => {
@@ -1379,13 +1376,13 @@ class Choices {
             (target === this.containerOuter.element &&
               !this.config.searchEnabled)
           ) {
-            this.hideDropdown();
+            this.hideDropdown(true);
           }
         },
         'select-multiple': () => {
           if (target === this.input.element) {
             this.containerOuter.removeFocusState();
-            this.hideDropdown();
+            this.hideDropdown(true);
             if (hasHighlightedItems) {
               this.unhighlightAll();
             }
@@ -1422,7 +1419,6 @@ class Choices {
         `.${this.config.classNames.highlightedState}`,
       ),
     );
-    const hasActiveDropdown = this.dropdown.isActive;
 
     // Remove any highlighted choices
     highlightedChoices.forEach(choice => {
@@ -1450,7 +1446,7 @@ class Choices {
     passedEl.classList.add(this.config.classNames.highlightedState);
     passedEl.setAttribute('aria-selected', 'true');
 
-    if (hasActiveDropdown) {
+    if (this.dropdown.isActive) {
       // IE11 ignores aria-label and blocks virtual keyboard
       // if aria-activedescendant is set without a dropdown
       this.input.setActiveDescendant(passedEl.id);