From 6e9ff8c5c5d0772391305459d78326f471cf3747 Mon Sep 17 00:00:00 2001
From: Peter Kaske <kaske@edv-wasmeier.de>
Date: Mon, 4 Apr 2022 13:31:06 +0200
Subject: [PATCH] Fixes and allow for simple item arrays.

---
 package.json   |  2 +-
 tp-dropdown.js | 34 ++++++++++++++++++++++++----------
 2 files changed, 25 insertions(+), 11 deletions(-)

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 {
           </div>
         </div>
         <div id="list" ?open="${isOpen}">
-          <tp-input part="filter" exportparts="wrap:filterWrap" placeholder=${filterPlaceholder} id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}>
-            <input type="text">
+          <tp-input part="filter" exportparts="wrap:filterWrap" id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}>
+            <input type="text" placeholder=${filterPlaceholder}>
             <tp-icon id="filterIcon" .icon=${extensible ? TpDropdown.addIcon : TpDropdown.filterIcon} slot="suffix"></tp-icon>
           </tp-input>
           <div id="itemList" part="list">
@@ -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;