diff --git a/package.json b/package.json index a15549a..9db6369 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-dropdown", - "version": "1.0.2", + "version": "1.1.0", "description": "", "main": "tp-dropdown.js", "scripts": { diff --git a/tp-dropdown.js b/tp-dropdown.js index ce525bc..762730e 100644 --- a/tp-dropdown.js +++ b/tp-dropdown.js @@ -249,8 +249,8 @@ class TpDropdown extends BaseElement {
- this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}> - + this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}> +
@@ -337,6 +337,14 @@ class TpDropdown extends BaseElement { this.listen(this, 'click', '_onClick'); } + shouldUpdate(changes) { + if (changes.has('items')) { + this._itemsChanged(); + } + + return true; + } + updated(changes) { super.updated(changes); @@ -348,10 +356,6 @@ class TpDropdown extends BaseElement { this._focusChanged(this.focused, changes.get('focused')); } - if (changes.has('items')) { - this._itemsChanged(); - } - if (changes.has('value')) { this._valueChanged(); this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true })); @@ -413,8 +417,6 @@ class TpDropdown extends BaseElement { const idx = this.items.findIndex(item => item.value === this.value); if (idx > -1) { this.label = this.items[idx].label; - } else { - this.label = null; } this.invalid = false; @@ -577,17 +579,29 @@ class TpDropdown extends BaseElement { this.invalid = false; this._memorizedValue = undefined; this._filterTerm = ''; - this.value = undefined; + if (this.default !== undefined) { + this.value = this.default; + } else { + this.value = undefined; + } } _itemsChanged() { // In case `items` was set to null or undefined. - if (!this.items) { + if (!Array.isArray(this.items)) { this.items = []; this.value = null; return; } + this.items = this.items.map(item => { + if (typeof item === 'string') { + return { value: item, label: item }; + } else { + return item; + } + }); + const memValueDefined = this._memorizedValue !== null && this._memorizedValue !== undefined; const foundValue = this.items.findIndex(item => item.value === this.value) > -1; const foundMemVal = memValueDefined ? this.items.findIndex(item => item.value === this._memorizedValue) > -1 : false;