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

Compare commits

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

No commits in common. "d8d6b6f01f0eebdbbe1cceb6edb0b9d3c8960ffa" and "44d5fa8c1d2b2ae3cdb6a08fb89c53c2254d56a3" have entirely different histories.
d8d6b6f01f ... 44d5fa8c1d

2 changed files with 5 additions and 15 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.3.1", "version": "1.2.0",
"description": "", "description": "",
"main": "tp-dropdown.js", "main": "tp-dropdown.js",
"scripts": { "scripts": {

18
tp-dropdown.js
View File

@ -214,6 +214,7 @@ 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 {
@ -234,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>
@ -348,10 +349,6 @@ 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;
} }
@ -525,12 +522,6 @@ 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);
@ -682,7 +673,6 @@ 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];
@ -703,6 +693,7 @@ class TpDropdown extends BaseElement {
if (this.isOpen) { if (this.isOpen) {
e.preventDefault(); e.preventDefault();
this.close(); this.close();
this.focus();
} }
return; return;
} }
@ -791,7 +782,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.dispatchEvent(new CustomEvent('add-item', { detail: { label }, bubbles: true, composed: true })); this.fire('add-item', { label: label });
} }
} }
} }
@ -815,7 +806,6 @@ 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 }));
} }
} }