From d8792aa9478c18493598b051860d8bb6877a7c91 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Thu, 15 Dec 2022 00:48:27 +0100
Subject: [PATCH] Add selection-changed event

---
 tp-dropdown.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/tp-dropdown.js b/tp-dropdown.js
index 217291b..7030f54 100644
--- a/tp-dropdown.js
+++ b/tp-dropdown.js
@@ -235,7 +235,7 @@ class TpDropdown extends BaseElement {
   }
 
   render() {
-    const { label, isOpen, errorMessage, filterPlaceholder, extensible, filterable, items} = this;
+    const { label, isOpen, errorMessage, filterPlaceholder, extensible, filterable, items } = this;
 
     return html`
       <tp-media-query query="(min-width: 0) and (max-width: 480px)" @media-query-update=${this._queryUpdated}></tp-media-query>
@@ -349,6 +349,10 @@ class TpDropdown extends BaseElement {
       this._itemsChanged();
     }
 
+    if (changes.has('isOpen')) {
+      this.dispatchEvent(new CustomEvent('is-open-changed', { detail: this.isOpen, bubbles: true, composed: true }));
+    }
+
     return true;
   }
 
@@ -522,6 +526,12 @@ class TpDropdown extends BaseElement {
       this.label = this.items[idx].label;
     }
 
+    if (this.isOpen) {
+      setTimeout(() => {
+        this.focus();
+      });
+    }
+
     this.isOpen = false;
     window.removeEventListener('resize', this._boundSetListPosition);
     document.removeEventListener('scroll', this._boundSetListPosition);
@@ -673,6 +683,7 @@ class TpDropdown extends BaseElement {
       }, 20);
     } else {
       this.value = itemEl.value;
+      this.dispatchEvent(new CustomEvent('selection-changed', { detail: this.value, bubbles: true, composed: true }));
     }
 
     var rootTarget = e.composedPath()[0];
@@ -693,7 +704,6 @@ class TpDropdown extends BaseElement {
       if (this.isOpen) {
         e.preventDefault();
         this.close();
-        this.focus();
       }
       return;
     }
@@ -782,7 +792,7 @@ class TpDropdown extends BaseElement {
     var label = this.$.filter.value;
     if (label !== '') {
       if (!this._selectByLabel(label)) {
-        this.fire('add-item', { label: label });
+        this.dispatchEvent(new CustomEvent('add-item', { detail: { label }, bubbles: true, composed: true }));
       }
     }
   }
@@ -806,6 +816,7 @@ class TpDropdown extends BaseElement {
 
     if (item) {
       this.value = item.value;
+      this.dispatchEvent(new CustomEvent('selection-changed', { detail: this.value, bubbles: true, composed: true }));
     }
   }