Inverse focus calls when opening/closing dropdown

This commit is contained in:
Josh Johnson 2018-05-29 15:08:43 +01:00
parent 138b7772f2
commit 5a6c8142b9
6 changed files with 227 additions and 216 deletions

View file

@ -1,4 +1,4 @@
/*! choices.js v4.0.0 | (c) 2018 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
/*! choices.js v4.0.0 | (c) 2018 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
(function webpackUniversalModuleDefinition(root, factory) {
//CommonJS2
if(typeof exports === 'object' && typeof module === 'object')
@ -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
* @param {String} type Type to test object against
* @param {Object} obj Object to be tested
* Gets the type of an object
* Why not use typeof? See here: http: //bonsaiden.github.io/JavaScript-Garden/#types.typeof
* @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) {
return (typeof HTMLElement === 'undefined' ? 'undefined' : _typeof(HTMLElement)) === 'object' ? o instanceof HTMLElement // DOM2
: o && (typeof o === 'undefined' ? 'undefined' : _typeof(o)) === 'object' && o !== null && o.nodeType === 1 && typeof o.nodeName === 'string';
var isElement = exports.isElement = function isElement(element) {
return element instanceof Element;
};
/**
@ -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) return 1;
if (labelA < labelB) {
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 {String} properties Properties from object
* @param {Object} object Related object
* @param {String} path Path to value
*/
var fetchFromObject = exports.fetchFromObject = function fetchFromObject(object, properties) {
var index = properties.indexOf('.');
var fetchFromObject = exports.fetchFromObject = function fetchFromObject(object, path) {
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
var es = __webpack_require__(65);
// EXTERNAL MODULE: ./node_modules/symbol-observable/index.js
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
/**
@ -1843,27 +1847,27 @@ if (false) {
/* 31 */
/***/ (function(module, exports) {
var g;
// This works in non-strict mode
g = (function() {
return this;
})();
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1,eval)("this");
} catch(e) {
// This works if the window reference is available
if(typeof window === "object")
g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
var g;
// This works in non-strict mode
g = (function() {
return this;
})();
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1,eval)("this");
} catch(e) {
// This works if the window reference is available
if(typeof window === "object")
g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
@ -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) {
return item.highlighted;
});
var hasHighlightedItems = this._store.highlightedActiveItems;
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();
}
@ -4113,10 +4110,10 @@ module.exports = Choices;
/*!
* Fuse.js v3.2.0 - Lightweight fuzzy-search (http://fusejs.io)
*
*
* Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
* All Rights Reserved. Apache Software License 2.0
*
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
(function webpackUniversalModuleDefinition(root, factory) {
@ -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);
/* global window */
/* WEBPACK VAR INJECTION */(function(global, module) {
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,57 +5991,59 @@ if (typeof self !== 'undefined') {
root = Function('return this')();
}
var result = Object(__WEBPACK_IMPORTED_MODULE_0__ponyfill_js__["a" /* default */])(root);
/* harmony default export */ __webpack_exports__["a"] = (result);
/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(31), __webpack_require__(66)(module)))
/***/ }),
/* 66 */
/***/ (function(module, exports) {
module.exports = function(originalModule) {
if(!originalModule.webpackPolyfill) {
var module = Object.create(originalModule);
// module.parent = undefined by default
if(!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function() {
return module.i;
}
});
Object.defineProperty(module, "exports", {
enumerable: true,
});
module.webpackPolyfill = 1;
}
return module;
};
var result = (0, _ponyfill2['default'])(root);
exports['default'] = result;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(31), __webpack_require__(67)(module)))
/***/ }),
/* 67 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
/***/ (function(module, exports) {
module.exports = function(module) {
if(!module.webpackPolyfill) {
module.deprecate = function() {};
module.paths = [];
// module.parent = undefined by default
if(!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function() {
return module.i;
}
});
module.webpackPolyfill = 1;
}
return module;
};
/***/ }),
/* 68 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = symbolObservablePonyfill;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports['default'] = symbolObservablePonyfill;
function symbolObservablePonyfill(root) {
var result;
var Symbol = root.Symbol;
var _Symbol = root.Symbol;
if (typeof Symbol === 'function') {
if (Symbol.observable) {
result = Symbol.observable;
if (typeof _Symbol === 'function') {
if (_Symbol.observable) {
result = _Symbol.observable;
} else {
result = Symbol('observable');
Symbol.observable = result;
result = _Symbol('observable');
_Symbol.observable = result;
}
} else {
result = '@@observable';
@ -6037,9 +6052,8 @@ function symbolObservablePonyfill(root) {
return result;
};
/***/ }),
/* 68 */
/* 69 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@ -6051,15 +6065,15 @@ Object.defineProperty(exports, "__esModule", {
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";

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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;

File diff suppressed because one or more lines are too long

View file

@ -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) &&
target !== this.input.element
!this.containerOuter.element.contains(target) ||
target === this.input.element
) {
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();
return;
}
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);