From 44d5fa8c1d2b2ae3cdb6a08fb89c53c2254d56a3 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Tue, 15 Nov 2022 20:24:57 +0100
Subject: [PATCH] Fixes and improvements

---
 package.json   |  2 +-
 tp-dropdown.js | 72 ++++++++++++++++++++++++++++++--------------------
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 9db6369..0dc2623 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-dropdown",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "tp-dropdown.js",
   "scripts": {
diff --git a/tp-dropdown.js b/tp-dropdown.js
index 762730e..217291b 100644
--- a/tp-dropdown.js
+++ b/tp-dropdown.js
@@ -121,7 +121,7 @@ class TpDropdown extends BaseElement {
           pointer-events: none;
           transition: opacity 0ms;
           opacity: 0;
-          position: fixed;
+          position: absolute;
           z-index: 1;
           height: auto;
         }
@@ -249,14 +249,18 @@ class TpDropdown extends BaseElement {
           </div>
         </div>
         <div id="list" ?open="${isOpen}">
-          <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>
+          ${filterable ? html`
+            <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>
+          ` : null}
           <div id="itemList" part="list">
-            ${items.map(item => this._filter(item) ? html`
-              <div part="item" role="option" .value=${item.value} tabindex=${isOpen ? '0' : '-1'}>${item.label}</div>
-            ` : null)}
+            ${isOpen ? html`
+              ${items.map(item => this._filter(item) ? html`
+                <div part="item" role="option" .value=${item.value} tabindex=${isOpen ? '0' : '-1'}>${item.label}</div>
+              ` : null)}
+            ` : null}
           </div>
         </div>
       </div>
@@ -328,8 +332,11 @@ class TpDropdown extends BaseElement {
     }
     document.removeEventListener('click', this._onDocClickHandler, true);
     this.unlisten(this, 'keydown', '_onKeyDown');
-    this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
-    this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
+
+    if (this.filterable) {
+      this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
+      this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
+    }
   }
 
   firstUpdated() {
@@ -358,6 +365,7 @@ class TpDropdown extends BaseElement {
 
     if (changes.has('value')) {
       this._valueChanged();
+      this._updateLabel();
       this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
     }
   }
@@ -369,24 +377,26 @@ class TpDropdown extends BaseElement {
   _focusChanged(newState, oldState) {
     if (newState) {
       this.listen(this, 'keydown', '_onKeyDown');
-      this.listen(this.$.filter, 'keydown', '_onKeyDownFilter');
-      this.listen(this.$.filterIcon, 'click', '_filterIconClicked');
-
       if (this.filterable) {
+        this.listen(this.$.filter, 'keydown', '_onKeyDownFilter');
+        this.listen(this.$.filterIcon, 'click', '_filterIconClicked');
         this.$.filter.focus();
       }
     } else if (oldState) {
       this.unlisten(this, 'keydown', '_onKeyDown');
-      this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
-      this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
 
-      if (!newState) {
-        if (oldState && this.$.filter.value !== '') {
-          if (this.extensible && this.autoExtend) {
-            this._addItem();
-          } else if (!this._selectByLabel(this.$.filter.value)) {
-            if (!this.value) {
-              this.$.filter.value = '';
+      if (this.filterable) {
+        this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
+        this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
+
+        if (!newState) {
+          if (oldState && this.$.filter.value !== '') {
+            if (this.extensible && this.autoExtend) {
+              this._addItem();
+            } else if (!this._selectByLabel(this.$.filter.value)) {
+              if (!this.value) {
+                this.$.filter.value = '';
+              }
             }
           }
         }
@@ -408,15 +418,19 @@ class TpDropdown extends BaseElement {
     return Array.isArray(this.items) && this.items.find(item => item.value.toString() === value.toString()) !== undefined;
   }
 
-  _valueChanged() {
-    if (this._setDefault()) {
-      return;
-    }
-
+  _updateLabel() {
     // Show selection in selector.
     const idx = this.items.findIndex(item => item.value === this.value);
     if (idx > -1) {
       this.label = this.items[idx].label;
+    } else {
+      this.label = null;
+    }
+  }
+
+  _valueChanged() {
+    if (this._setDefault()) {
+      return;
     }
 
     this.invalid = false;
@@ -471,7 +485,9 @@ class TpDropdown extends BaseElement {
     window.addEventListener('resize', this._boundSetListPosition);
     document.addEventListener('scroll', this._boundSetListPosition, { passive: true });
     document.addEventListener('click', this._onDocClickHandler, true);
-    this.listen(this.$.filter, 'click', '_filterClicked');
+    if (this.filterable) {
+      this.listen(this.$.filter, 'click', '_filterClicked');
+    }
 
     this._setListPosition();