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;