mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-30 12:34:26 +02:00
Revert breaking focus PR
This commit is contained in:
parent
e5bf9b76bd
commit
75e5801585
|
@ -1054,7 +1054,9 @@ class Choices {
|
||||||
|
|
||||||
// Focus input as without focus, a user cannot do anything with a
|
// Focus input as without focus, a user cannot do anything with a
|
||||||
// highlighted item
|
// highlighted item
|
||||||
if (document.activeElement !== this.input) this.input.focus();
|
if (document.activeElement !== this.input) {
|
||||||
|
this.input.focus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1319,7 +1321,6 @@ class Choices {
|
||||||
document.addEventListener('touchend', this._onTouchEnd);
|
document.addEventListener('touchend', this._onTouchEnd);
|
||||||
document.addEventListener('mousedown', this._onMouseDown);
|
document.addEventListener('mousedown', this._onMouseDown);
|
||||||
document.addEventListener('mouseover', this._onMouseOver);
|
document.addEventListener('mouseover', this._onMouseOver);
|
||||||
document.addEventListener('focus', this._onDocumentFocus);
|
|
||||||
|
|
||||||
if (this.passedElement.type && this.passedElement.type === 'select-one') {
|
if (this.passedElement.type && this.passedElement.type === 'select-one') {
|
||||||
this.containerOuter.addEventListener('focus', this._onFocus);
|
this.containerOuter.addEventListener('focus', this._onFocus);
|
||||||
|
@ -1345,7 +1346,6 @@ class Choices {
|
||||||
document.removeEventListener('touchend', this._onTouchEnd);
|
document.removeEventListener('touchend', this._onTouchEnd);
|
||||||
document.removeEventListener('mousedown', this._onMouseDown);
|
document.removeEventListener('mousedown', this._onMouseDown);
|
||||||
document.removeEventListener('mouseover', this._onMouseOver);
|
document.removeEventListener('mouseover', this._onMouseOver);
|
||||||
document.removeEventListener('focus', this._onDocumentFocus);
|
|
||||||
|
|
||||||
if (this.passedElement.type && this.passedElement.type === 'select-one') {
|
if (this.passedElement.type && this.passedElement.type === 'select-one') {
|
||||||
this.containerOuter.removeEventListener('focus', this._onFocus);
|
this.containerOuter.removeEventListener('focus', this._onFocus);
|
||||||
|
@ -1364,7 +1364,8 @@ class Choices {
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
_setInputWidth() {
|
_setInputWidth() {
|
||||||
if (this.config.placeholder && (this.config.placeholderValue || this.passedElement.getAttribute('placeholder'))) {
|
if ((this.config.placeholderValue || this.passedElement.getAttribute('placeholder') &&
|
||||||
|
this.config.placeholder)) {
|
||||||
// If there is a placeholder, we only want to set the width of the input when it is a greater
|
// If there is a placeholder, we only want to set the width of the input when it is a greater
|
||||||
// length than 75% of the placeholder. This stops the input jumping around.
|
// length than 75% of the placeholder. This stops the input jumping around.
|
||||||
const placeholder = this.config.placeholder ? this.config.placeholderValue ||
|
const placeholder = this.config.placeholder ? this.config.placeholderValue ||
|
||||||
|
@ -1743,43 +1744,6 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Focus event on everything in the document
|
|
||||||
* @param {Object} e Event
|
|
||||||
* @return
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
_onDocumentFocus (e) {
|
|
||||||
const target = e.target;
|
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
|
||||||
|
|
||||||
const blurActions = {
|
|
||||||
text: () => {
|
|
||||||
if (target !== this.input) {
|
|
||||||
if (hasActiveDropdown) {
|
|
||||||
this.hideDropdown();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'select-one': () => {
|
|
||||||
if (target !== this.containerOuter) {
|
|
||||||
if (hasActiveDropdown && !this.canSearch) {
|
|
||||||
this.hideDropdown();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'select-multiple': () => {
|
|
||||||
if (target !== this.input) {
|
|
||||||
if (hasActiveDropdown) {
|
|
||||||
this.hideDropdown();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
blurActions[this.passedElement.type]();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Paste event
|
* Paste event
|
||||||
* @param {Object} e Event
|
* @param {Object} e Event
|
||||||
|
@ -1858,6 +1822,10 @@ class Choices {
|
||||||
if (hasHighlightedItems) {
|
if (hasHighlightedItems) {
|
||||||
this.unhighlightAll();
|
this.unhighlightAll();
|
||||||
}
|
}
|
||||||
|
// Hide dropdown if it is showing
|
||||||
|
if (hasActiveDropdown) {
|
||||||
|
this.hideDropdown();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'select-one': () => {
|
'select-one': () => {
|
||||||
|
@ -1868,11 +1836,19 @@ class Choices {
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (target === this.input && hasActiveDropdown) {
|
||||||
|
// Hide dropdown if it is showing
|
||||||
|
this.hideDropdown();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
'select-multiple': () => {
|
'select-multiple': () => {
|
||||||
if (target === this.input) {
|
if (target === this.input) {
|
||||||
// Remove the focus state
|
// Remove the focus state
|
||||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||||
|
// Hide dropdown if it is showing
|
||||||
|
if (hasActiveDropdown) {
|
||||||
|
this.hideDropdown();
|
||||||
|
}
|
||||||
// De-select any highlighted items
|
// De-select any highlighted items
|
||||||
if (hasHighlightedItems) {
|
if (hasHighlightedItems) {
|
||||||
this.unhighlightAll();
|
this.unhighlightAll();
|
||||||
|
@ -2306,6 +2282,7 @@ class Choices {
|
||||||
this.config.classNames.input,
|
this.config.classNames.input,
|
||||||
this.config.classNames.hiddenState
|
this.config.classNames.hiddenState
|
||||||
);
|
);
|
||||||
|
|
||||||
this.passedElement.tabIndex = '-1';
|
this.passedElement.tabIndex = '-1';
|
||||||
this.passedElement.setAttribute('style', 'display:none;');
|
this.passedElement.setAttribute('style', 'display:none;');
|
||||||
this.passedElement.setAttribute('aria-hidden', 'true');
|
this.passedElement.setAttribute('aria-hidden', 'true');
|
||||||
|
|
Loading…
Reference in a new issue