mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 14:32:11 +02:00
Typo + set placeholder value to instance
This commit is contained in:
parent
3817bb33dd
commit
c3a7330e5b
|
@ -369,7 +369,7 @@ const example = new Choices(element, {
|
||||||
|
|
||||||
**Usage:** The value of the inputs placeholder.
|
**Usage:** The value of the inputs placeholder.
|
||||||
|
|
||||||
### selectPlaceholderValue
|
### searchPlaceholderValue
|
||||||
**Type:** `String` **Default:** `null`
|
**Type:** `String` **Default:** `null`
|
||||||
|
|
||||||
**Input types affected:** `select-one`
|
**Input types affected:** `select-one`
|
||||||
|
|
|
@ -174,6 +174,9 @@ class Choices {
|
||||||
|
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
this.canSearch = this.config.searchEnabled;
|
this.canSearch = this.config.searchEnabled;
|
||||||
|
this.placeholder = this.config.placeholder ?
|
||||||
|
(this.config.placeholderValue || this.passedElement.getAttribute('placeholder')) :
|
||||||
|
false;
|
||||||
|
|
||||||
// Assign preset choices from passed object
|
// Assign preset choices from passed object
|
||||||
this.presetChoices = this.config.choices;
|
this.presetChoices = this.config.choices;
|
||||||
|
@ -1124,16 +1127,9 @@ class Choices {
|
||||||
this._removeItem(itemToRemove);
|
this._removeItem(itemToRemove);
|
||||||
this._triggerChange(itemToRemove.value);
|
this._triggerChange(itemToRemove.value);
|
||||||
|
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement && this.placeholder) {
|
||||||
const placeholder = this.config.placeholder ?
|
const placeholderItem = this._getTemplate('placeholder', this.placeholder);
|
||||||
this.config.placeholderValue ||
|
this.itemList.appendChild(placeholderItem);
|
||||||
this.passedElement.getAttribute('placeholder') :
|
|
||||||
false;
|
|
||||||
|
|
||||||
if (placeholder) {
|
|
||||||
const placeholderItem = this._getTemplate('placeholder', placeholder);
|
|
||||||
this.itemList.appendChild(placeholderItem);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1337,15 +1333,11 @@ class Choices {
|
||||||
} else {
|
} else {
|
||||||
// Remove loading states/text
|
// Remove loading states/text
|
||||||
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
||||||
const placeholder = this.config.placeholder ?
|
|
||||||
this.config.placeholderValue ||
|
|
||||||
this.passedElement.getAttribute('placeholder') :
|
|
||||||
false;
|
|
||||||
|
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
placeholderItem.innerHTML = placeholder || '';
|
placeholderItem.innerHTML = (this.placeholder || '');
|
||||||
} else {
|
} else {
|
||||||
this.input.placeholder = placeholder || '';
|
this.input.placeholder = (this.placeholder || '');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1524,13 +1516,10 @@ class Choices {
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
_setInputWidth() {
|
_setInputWidth() {
|
||||||
if ((this.config.placeholderValue || this.passedElement.getAttribute('placeholder') &&
|
if (this.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 ||
|
if (this.input.value && this.input.value.length >= (this.placeholder.length / 1.25)) {
|
||||||
this.passedElement.getAttribute('placeholder') : false;
|
|
||||||
if (this.input.value && this.input.value.length >= (placeholder.length / 1.25)) {
|
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
this.input.style.width = getWidthOfInput(this.input);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -2651,10 +2640,6 @@ class Choices {
|
||||||
const choiceList = this._getTemplate('choiceList');
|
const choiceList = this._getTemplate('choiceList');
|
||||||
const input = this._getTemplate('input');
|
const input = this._getTemplate('input');
|
||||||
const dropdown = this._getTemplate('dropdown');
|
const dropdown = this._getTemplate('dropdown');
|
||||||
const placeholder = this.config.placeholder ?
|
|
||||||
this.config.placeholderValue ||
|
|
||||||
this.passedElement.getAttribute('placeholder') :
|
|
||||||
false;
|
|
||||||
|
|
||||||
this.containerOuter = containerOuter;
|
this.containerOuter = containerOuter;
|
||||||
this.containerInner = containerInner;
|
this.containerInner = containerInner;
|
||||||
|
@ -2692,8 +2677,8 @@ class Choices {
|
||||||
// If placeholder has been enabled and we have a value
|
// If placeholder has been enabled and we have a value
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
input.placeholder = this.config.searchPlaceholderValue || '';
|
input.placeholder = this.config.searchPlaceholderValue || '';
|
||||||
} else if (placeholder) {
|
} else if (this.placeholder) {
|
||||||
input.placeholder = placeholder;
|
input.placeholder = this.placeholder;
|
||||||
input.style.width = getWidthOfInput(input);
|
input.style.width = getWidthOfInput(input);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue