Fixes and improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-dropdown",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "tp-dropdown.js",
   "scripts": {

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}">
+          ${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">
+            ${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,9 +332,12 @@ class TpDropdown extends BaseElement {
     }
     document.removeEventListener('click', this._onDocClickHandler, true);
     this.unlisten(this, 'keydown', '_onKeyDown');
+
+    if (this.filterable) {
       this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
       this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
     }
+  }
 
   firstUpdated() {
     super.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,14 +377,15 @@ class TpDropdown extends BaseElement {
   _focusChanged(newState, oldState) {
     if (newState) {
       this.listen(this, 'keydown', '_onKeyDown');
+      if (this.filterable) {
         this.listen(this.$.filter, 'keydown', '_onKeyDownFilter');
         this.listen(this.$.filterIcon, 'click', '_filterIconClicked');
-
-      if (this.filterable) {
         this.$.filter.focus();
       }
     } else if (oldState) {
       this.unlisten(this, 'keydown', '_onKeyDown');
+
+      if (this.filterable) {
         this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
         this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
 
@@ -393,6 +402,7 @@ class TpDropdown extends BaseElement {
         }
       }
     }
+  }
 
   _setDefault() {
     if ((this.value === null || this.value === undefined) && this._hasItem(this.default)) {
@@ -408,15 +418,19 @@ class TpDropdown extends BaseElement {
     return Array.isArray(this.items) && this.items.find(item => item.value.toString() === value.toString()) !== undefined;
   }
 
-  _valueChanged() {
+  _updateLabel() {
-    if (this._setDefault()) {
-      return;
-    }
-
     // 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);
+    if (this.filterable) {
       this.listen(this.$.filter, 'click', '_filterClicked');
+    }
 
     this._setListPosition();