-
+
+
+
+
+
+
+
+ >
+
+
@@ -373,10 +398,9 @@
searchFloor: 5,
});
- new Choices('#choices-placeholder', {
- placeholder: true,
- placeholderValue: 'I am a placeholder',
- });
+ new Choices('#choices-placeholder-via-option-value');
+
+ new Choices('#choices-placeholder-via-option-attr');
new Choices('#choices-remote-data', {
shouldSort: false,
diff --git a/public/test/select-one.html b/public/test/select-one/index.html
similarity index 86%
rename from public/test/select-one.html
rename to public/test/select-one/index.html
index b4881b4..93e3ba5 100644
--- a/public/test/select-one.html
+++ b/public/test/select-one/index.html
@@ -15,43 +15,46 @@
-
+
-
+
-
+
-
+
@@ -178,13 +181,47 @@
+
+
+
+
+
+
+
+
+
+
+ >
+
+
@@ -359,6 +396,10 @@
searchFloor: 5,
});
+ new Choices('#choices-placeholder-via-option-value');
+
+ new Choices('#choices-placeholder-via-option-attr');
+
new Choices('#choices-remote-data', {
shouldSort: false,
}).setChoices(async () => {
diff --git a/public/test/text.html b/public/test/text/index.html
similarity index 89%
rename from public/test/text.html
rename to public/test/text/index.html
index 1040403..cb86435 100644
--- a/public/test/text.html
+++ b/public/test/text/index.html
@@ -15,43 +15,46 @@
-
+
-
+
-
+
-
+
diff --git a/src/scripts/choices.js b/src/scripts/choices.js
index 1c16a01..166c90d 100644
--- a/src/scripts/choices.js
+++ b/src/scripts/choices.js
@@ -149,6 +149,7 @@ class Choices {
* @type {HTMLElement['dir']}
*/
this._direction = this.passedElement.element.dir;
+
if (!this._direction) {
const { direction: elementDirection } = window.getComputedStyle(
this.passedElement.element,
@@ -160,6 +161,7 @@ class Choices {
this._direction = elementDirection;
}
}
+
this._idNames = {
itemChoice: 'item-choice',
};
@@ -849,7 +851,9 @@ class Choices {
let choiceLimit = rendererableChoices.length;
// Prepend placeholeder
- const sortedChoices = [...placeholderChoices, ...normalChoices];
+ const sortedChoices = this._isSelectOneElement
+ ? [...placeholderChoices, ...normalChoices]
+ : normalChoices;
if (this._isSearching) {
choiceLimit = searchResultLimit;
@@ -2075,7 +2079,7 @@ class Choices {
label: o.innerHTML,
selected: o.selected,
disabled: o.disabled || o.parentNode.disabled,
- placeholder: o.hasAttribute('placeholder'),
+ placeholder: o.value === '' || o.hasAttribute('placeholder'),
customProperties: o.getAttribute('data-custom-properties'),
});
});
@@ -2224,14 +2228,28 @@ class Choices {
}
_generatePlaceholderValue() {
- if (this._isSelectOneElement) {
- return false;
+ if (this._isSelectElement) {
+ const { placeholderOption } = this.passedElement;
+
+ return placeholderOption ? placeholderOption.text : false;
}
- return this.config.placeholder
- ? this.config.placeholderValue ||
- this.passedElement.element.getAttribute('placeholder')
- : false;
+ const { placeholder, placeholderValue } = this.config;
+ const {
+ element: { dataset },
+ } = this.passedElement;
+
+ if (placeholder) {
+ if (placeholderValue) {
+ return placeholderValue;
+ }
+
+ if (dataset.placeholder) {
+ return dataset.placeholder;
+ }
+ }
+
+ return false;
}
/* ===== End of Private functions ====== */
diff --git a/src/scripts/choices.test.js b/src/scripts/choices.test.js
index cdf9522..1689b7d 100644
--- a/src/scripts/choices.test.js
+++ b/src/scripts/choices.test.js
@@ -1873,5 +1873,96 @@ describe('choices', () => {
});
});
});
+
+ describe('_generatePlaceholderValue', () => {
+ describe('select element', () => {
+ describe('when a placeholder option is defined', () => {
+ it('returns the text value of the placeholder option', () => {
+ const placeholderValue = 'I am a placeholder';
+
+ instance._isSelectElement = true;
+ instance.passedElement.placeholderOption = {
+ text: placeholderValue,
+ };
+
+ const value = instance._generatePlaceholderValue();
+ expect(value).to.equal(placeholderValue);
+ });
+ });
+
+ describe('when a placeholder option is not defined', () => {
+ it('returns false', () => {
+ instance._isSelectElement = true;
+ instance.passedElement.placeholderOption = undefined;
+
+ const value = instance._generatePlaceholderValue();
+ expect(value).to.equal(false);
+ });
+ });
+ });
+
+ describe('text input', () => {
+ describe('when the placeholder config option is set to true', () => {
+ describe('when the placeholderValue config option is defined', () => {
+ it('returns placeholderValue', () => {
+ const placeholderValue = 'I am a placeholder';
+
+ instance._isSelectElement = false;
+ instance.config.placeholder = true;
+ instance.config.placeholderValue = placeholderValue;
+
+ const value = instance._generatePlaceholderValue();
+ expect(value).to.equal(placeholderValue);
+ });
+ });
+
+ describe('when the placeholderValue config option is not defined', () => {
+ describe('when the placeholder attribute is defined on the passed element', () => {
+ it('returns the value of the placeholder attribute', () => {
+ const placeholderValue = 'I am a placeholder';
+
+ instance._isSelectElement = false;
+ instance.config.placeholder = true;
+ instance.config.placeholderValue = undefined;
+ instance.passedElement.element = {
+ dataset: {
+ placeholder: placeholderValue,
+ },
+ };
+
+ const value = instance._generatePlaceholderValue();
+ expect(value).to.equal(placeholderValue);
+ });
+ });
+
+ describe('when the placeholder attribute is not defined on the passed element', () => {
+ it('returns false', () => {
+ instance._isSelectElement = false;
+ instance.config.placeholder = true;
+ instance.config.placeholderValue = undefined;
+ instance.passedElement.element = {
+ dataset: {
+ placeholder: undefined,
+ },
+ };
+
+ const value = instance._generatePlaceholderValue();
+ expect(value).to.equal(false);
+ });
+ });
+ });
+ });
+
+ describe('when the placeholder config option is set to false', () => {
+ it('returns false', () => {
+ instance._isSelectElement = false;
+ instance.config.placeholder = false;
+
+ const value = instance._generatePlaceholderValue();
+ expect(value).to.equal(false);
+ });
+ });
+ });
+ });
});
});
diff --git a/src/scripts/templates.js b/src/scripts/templates.js
index a20788e..b955200 100644
--- a/src/scripts/templates.js
+++ b/src/scripts/templates.js
@@ -39,16 +39,19 @@ export const TEMPLATES = /** @type {Templates} */ ({
return div;
},
+
containerInner({ containerInner }) {
return Object.assign(document.createElement('div'), {
className: containerInner,
});
},
+
itemList({ list, listSingle, listItems }, isSelectOneElement) {
return Object.assign(document.createElement('div'), {
className: `${list} ${isSelectOneElement ? listSingle : listItems}`,
});
},
+
placeholder({ placeholder }, value) {
return Object.assign(document.createElement('div'), {
className: placeholder,
@@ -93,6 +96,7 @@ export const TEMPLATES = /** @type {Templates} */ ({
if (isPlaceholder) {
div.classList.add(placeholder);
}
+
div.classList.add(highlighted ? highlightedState : itemSelectable);
if (removeItemButton) {
@@ -117,6 +121,7 @@ export const TEMPLATES = /** @type {Templates} */ ({
return div;
},
+
choiceList({ list }, isSelectOneElement) {
const div = Object.assign(document.createElement('div'), {
className: list,
@@ -196,6 +201,7 @@ export const TEMPLATES = /** @type {Templates} */ ({
return div;
},
+
input({ input, inputCloned }, placeholderValue) {
const inp = Object.assign(document.createElement('input'), {
type: 'text',
@@ -211,6 +217,7 @@ export const TEMPLATES = /** @type {Templates} */ ({
return inp;
},
+
dropdown({ list, listDropdown }) {
const div = document.createElement('div');
@@ -219,6 +226,7 @@ export const TEMPLATES = /** @type {Templates} */ ({
return div;
},
+
notice({ item, itemChoice, noResults, noChoices }, innerHTML, type = '') {
const classes = [item, itemChoice];
@@ -233,6 +241,7 @@ export const TEMPLATES = /** @type {Templates} */ ({
className: classes.join(' '),
});
},
+
option({ label, value, customProperties, active, disabled }) {
const opt = new Option(label, value, false, active);