mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
Merge branch 'develop' into develop
This commit is contained in:
commit
6e45d3f9b0
|
@ -1001,8 +1001,6 @@ class Choices {
|
||||||
this.showDropdown(true);
|
this.showDropdown(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.config.searchEnabled = this.config.searchEnabled;
|
|
||||||
|
|
||||||
const onAKey = () => {
|
const onAKey = () => {
|
||||||
// If CTRL + A or CMD + A have been pressed and there are items to select
|
// If CTRL + A or CMD + A have been pressed and there are items to select
|
||||||
if (ctrlDownKey && hasItems) {
|
if (ctrlDownKey && hasItems) {
|
||||||
|
@ -1186,7 +1184,6 @@ class Choices {
|
||||||
|
|
||||||
// If user has removed value...
|
// If user has removed value...
|
||||||
if ((keyCode === backKey || keyCode === deleteKey) && !target.value) {
|
if ((keyCode === backKey || keyCode === deleteKey) && !target.value) {
|
||||||
// ...and it is a multiple select input, activate choices (if searching)
|
|
||||||
if (!this._isTextElement && this._isSearching) {
|
if (!this._isTextElement && this._isSearching) {
|
||||||
this._isSearching = false;
|
this._isSearching = false;
|
||||||
this._store.dispatch(activateChoices(true));
|
this._store.dispatch(activateChoices(true));
|
||||||
|
@ -1211,11 +1208,12 @@ class Choices {
|
||||||
// If a user tapped within our container...
|
// If a user tapped within our container...
|
||||||
if (this._wasTap === true && this.containerOuter.element.contains(target)) {
|
if (this._wasTap === true && this.containerOuter.element.contains(target)) {
|
||||||
// ...and we aren't dealing with a single select box, show dropdown/focus input
|
// ...and we aren't dealing with a single select box, show dropdown/focus input
|
||||||
if (
|
|
||||||
(target === this.containerOuter.element ||
|
const containerWasTarget =
|
||||||
target === this.containerInner.element) &&
|
target === this.containerOuter.element ||
|
||||||
!this._isSelectOneElement
|
target === this.containerInner.element;
|
||||||
) {
|
|
||||||
|
if (containerWasTarget && !this._isSelectOneElement) {
|
||||||
if (this._isTextElement) {
|
if (this._isTextElement) {
|
||||||
// If text element, we only want to focus the input
|
// If text element, we only want to focus the input
|
||||||
this.input.focus();
|
this.input.focus();
|
||||||
|
@ -1286,8 +1284,7 @@ class Choices {
|
||||||
this.showDropdown(true);
|
this.showDropdown(true);
|
||||||
} else {
|
} else {
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
// code smell
|
this.containerOuter.focus(); // code smell 🤢
|
||||||
this.containerOuter.focus();
|
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (
|
||||||
this._isSelectOneElement &&
|
this._isSelectOneElement &&
|
||||||
|
@ -1322,7 +1319,6 @@ class Choices {
|
||||||
'select-one': () => {
|
'select-one': () => {
|
||||||
this.containerOuter.addFocusState();
|
this.containerOuter.addFocusState();
|
||||||
if (target === this.input.element) {
|
if (target === this.input.element) {
|
||||||
// Show dropdown if it isn't already showing
|
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -1350,9 +1346,7 @@ class Choices {
|
||||||
const blurActions = {
|
const blurActions = {
|
||||||
text: () => {
|
text: () => {
|
||||||
if (target === this.input.element) {
|
if (target === this.input.element) {
|
||||||
// Remove the focus state
|
|
||||||
this.containerOuter.removeFocusState();
|
this.containerOuter.removeFocusState();
|
||||||
// De-select any highlighted items
|
|
||||||
if (hasHighlightedItems) {
|
if (hasHighlightedItems) {
|
||||||
this.unhighlightAll();
|
this.unhighlightAll();
|
||||||
}
|
}
|
||||||
|
@ -1371,10 +1365,8 @@ class Choices {
|
||||||
},
|
},
|
||||||
'select-multiple': () => {
|
'select-multiple': () => {
|
||||||
if (target === this.input.element) {
|
if (target === this.input.element) {
|
||||||
// Remove the focus state
|
|
||||||
this.containerOuter.removeFocusState();
|
this.containerOuter.removeFocusState();
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
// De-select any highlighted items
|
|
||||||
if (hasHighlightedItems) {
|
if (hasHighlightedItems) {
|
||||||
this.unhighlightAll();
|
this.unhighlightAll();
|
||||||
}
|
}
|
||||||
|
@ -1960,12 +1952,10 @@ class Choices {
|
||||||
const { activeGroups, activeChoices } = this._store;
|
const { activeGroups, activeChoices } = this._store;
|
||||||
let choiceListFragment = document.createDocumentFragment();
|
let choiceListFragment = document.createDocumentFragment();
|
||||||
|
|
||||||
// Clear choices
|
|
||||||
this.choiceList.clear();
|
this.choiceList.clear();
|
||||||
|
|
||||||
// Scroll back to top of choices list
|
|
||||||
if (this.config.resetScrollPosition) {
|
if (this.config.resetScrollPosition) {
|
||||||
this.choiceList.scrollToTop();
|
requestAnimationFrame(() => this.choiceList.scrollToTop());
|
||||||
}
|
}
|
||||||
|
|
||||||
// If we have grouped options
|
// If we have grouped options
|
||||||
|
@ -2055,6 +2045,5 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
Choices.userDefaults = {};
|
Choices.userDefaults = {};
|
||||||
|
|
||||||
// We cannot export default here due to Webpack: https://github.com/webpack/webpack/issues/3929
|
// We cannot export default here due to Webpack: https://github.com/webpack/webpack/issues/3929
|
||||||
module.exports = Choices;
|
module.exports = Choices;
|
||||||
|
|
|
@ -95,16 +95,20 @@ export default class Input {
|
||||||
this.element.value.length >= this._placeholderValue.length / 1.25) ||
|
this.element.value.length >= this._placeholderValue.length / 1.25) ||
|
||||||
enforceWidth
|
enforceWidth
|
||||||
) {
|
) {
|
||||||
this.element.style.width = this.calcWidth();
|
this.calcWidth(width => {
|
||||||
|
this.element.style.width = width;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// If there is no placeholder, resize input to contents
|
// If there is no placeholder, resize input to contents
|
||||||
this.element.style.width = this.calcWidth();
|
this.calcWidth(width => {
|
||||||
|
this.element.style.width = width;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
calcWidth() {
|
calcWidth(callback) {
|
||||||
return calcWidthOfInput(this.element);
|
return calcWidthOfInput(this.element, callback);
|
||||||
}
|
}
|
||||||
|
|
||||||
setActiveDescendant(activeDescendantID) {
|
setActiveDescendant(activeDescendantID) {
|
||||||
|
|
|
@ -269,7 +269,7 @@ describe('components/input', () => {
|
||||||
const inputWidth = '200px';
|
const inputWidth = '200px';
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
calcWidthStub = stub(instance, 'calcWidth').returns(inputWidth);
|
calcWidthStub = stub(instance, 'calcWidth').callsArgWith(0, inputWidth);
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
|
|
@ -227,10 +227,10 @@ export const strToEl = (function() {
|
||||||
}());
|
}());
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets the width of a passed input based on its value
|
* Determines the width of a passed input based on its value and passes
|
||||||
* @return {Number} Width of input
|
* it to the supplied callback function.
|
||||||
*/
|
*/
|
||||||
export const calcWidthOfInput = (input) => {
|
export const calcWidthOfInput = (input, callback) => {
|
||||||
const value = input.value || input.placeholder;
|
const value = input.value || input.placeholder;
|
||||||
let width = input.offsetWidth;
|
let width = input.offsetWidth;
|
||||||
|
|
||||||
|
@ -259,14 +259,18 @@ export const calcWidthOfInput = (input) => {
|
||||||
|
|
||||||
document.body.appendChild(testEl);
|
document.body.appendChild(testEl);
|
||||||
|
|
||||||
if (value && testEl.offsetWidth !== input.offsetWidth) {
|
requestAnimationFrame(() => {
|
||||||
width = testEl.offsetWidth + 4;
|
if (value && testEl.offsetWidth !== input.offsetWidth) {
|
||||||
}
|
width = testEl.offsetWidth + 4;
|
||||||
|
}
|
||||||
|
|
||||||
document.body.removeChild(testEl);
|
document.body.removeChild(testEl);
|
||||||
|
|
||||||
|
callback.call(this, `${width}px`);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
callback.call(this, `${width}px`);
|
||||||
}
|
}
|
||||||
|
|
||||||
return `${width}px`;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue