tp-elements/tp-dropdown
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add selection-changed event

Browse Source
This commit is contained in:
trading_peter 2022-12-15 00:48:27 +01:00
parent 44d5fa8c1d
commit d8792aa947
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
tp-dropdown.js
View File

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