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

Compare commits

base: tp-elements:44d5fa8c1d2b2ae3cdb6a08fb89c53c2254d56a3
Branches Tags
tp-elements:master
..
compare: tp-elements:d8d6b6f01f0eebdbbe1cceb6edb0b9d3c8960ffa
Branches Tags
tp-elements:master

3 Commits
44d5fa8c1d ... d8d6b6f01f

Author SHA1 Message Date
pk
d8d6b6f01f Fix responsive css 2022-12-15 11:52:00 +01:00
pk
9cff77555f Bump version 2022-12-15 00:48:48 +01:00
pk
d8792aa947 Add selection-changed event 2022-12-15 00:48:27 +01:00
2 changed files with 15 additions and 5 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

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

16
tp-dropdown.js
View File

@ -214,7 +214,6 @@ class TpDropdown extends BaseElement {
:host(:not([not-responsive])) #itemList { :host(:not([not-responsive])) #itemList {
max-height: none !important; max-height: none !important;
display: flex;
} }
:host(:not([not-responsive])) #filter { :host(:not([not-responsive])) #filter {
@ -349,6 +348,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 +525,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 +682,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 +703,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 +791,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 +815,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 }));
} }
} }