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` @@ -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 })); } }