extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-27 17:18:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select + search: Adjust dropdown position based on if it opens up or down

Browse Source
This commit is contained in:
nathan 2022-09-20 09:43:25 -06:00
parent 79b6cef5fd
commit 66368c6d3a
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
api/js/etemplate/Et2Select/SearchMixin.ts
View File

@ -270,6 +270,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this.handleMenuSelect = this.handleMenuSelect.bind(this); this.handleMenuSelect = this.handleMenuSelect.bind(this);
this._handleChange = this._handleChange.bind(this); this._handleChange = this._handleChange.bind(this);
this._handleAfterShow = this._handleAfterShow.bind(this);
this._handleSearchBlur = this._handleSearchBlur.bind(this); this._handleSearchBlur = this._handleSearchBlur.bind(this);
this._handleClear = this._handleClear.bind(this); this._handleClear = this._handleClear.bind(this);
this._handleDoubleClick = this._handleDoubleClick.bind(this); this._handleDoubleClick = this._handleDoubleClick.bind(this);
@ -486,7 +487,8 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
protected _bindListeners() protected _bindListeners()
{ {
this.addEventListener("sl-clear", this._handleClear) this.addEventListener("sl-clear", this._handleClear);
this.addEventListener("sl-after-show", this._handleAfterShow);
// Need our own change to catch the change event from search input // Need our own change to catch the change event from search input
this.addEventListener("change", this._handleChange); this.addEventListener("change", this._handleChange);
@ -506,6 +508,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
protected _unbindListeners() protected _unbindListeners()
{ {
this.removeEventListener("sl-select", this._handleSelect); this.removeEventListener("sl-select", this._handleSelect);
this.removeEventListener("sl-after-show", this._handleAfterShow);
this.removeEventListener("sl-clear", this._handleClear) this.removeEventListener("sl-clear", this._handleClear)
this.removeEventListener("change", this._handleChange); this.removeEventListener("change", this._handleChange);
@ -520,12 +523,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
} }
// Move search (& menu) if there's no value // Move search (& menu) if there's no value
this._activeControls?.classList.toggle("novalue", this.multiple && this.value == '' || !this.multiple); this._activeControls?.classList.toggle("novalue", this.multiple && this.value == '' || !this.multiple);
this.dropdown?.setAttribute("distance",
!this._activeControls || this._activeControls?.classList.contains("novalue") ?
"" :
// Make room for search below
parseInt(getComputedStyle(this._activeControls).getPropertyValue("--sl-input-height-medium"))
);
super.handleMenuShow(); super.handleMenuShow();
@ -540,11 +537,33 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
{ {
this.startEdit(); this.startEdit();
this._editInputNode.select(); this._editInputNode.select();
// Hide search explicitly since its so hard via CSS // Hide search explicitly since it's so hard via CSS
this._searchInputNode.style.display = "none"; this._searchInputNode.style.display = "none";
} }
} }
/**
* Reposition the dropdown to allow space for current value and search. If the dropdown was positioned above
* instead of below, we don't need the extra space - remove it.
*/
_handleAfterShow()
{
if(this.dropdown?.getAttribute("distance") && this.dropdown?.positioner.getAttribute("data-placement") == "top")
{
this.dropdown.setAttribute("distance", 0);
this.dropdown.reposition();
}
else
{
this.dropdown?.setAttribute("distance",
!this._activeControls || this._activeControls?.classList.contains("novalue") ?
"" :
// Make room for search below
parseInt(getComputedStyle(this._activeControls).getPropertyValue("--sl-input-height-medium"))
);
}
}
focus() focus()
{ {
this.dropdown?.show().then(() => this.dropdown?.show().then(() =>
@ -809,8 +828,13 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
} }
}).then(() => }).then(() =>
{ {
// Not sure why this stays hidden if there's no results but it sticks and hides all results afterward // Not sure why this stays hidden if there's no results, but it sticks and hides all results afterward
this.dropdown.shadowRoot.querySelector(".dropdown__panel").removeAttribute("hidden"); this.dropdown.shadowRoot.querySelector(".dropdown__panel").removeAttribute("hidden");
// Call our resize stuff explicitly, but need to give positioner a chance to position.
// If we call it right away, it has not updated.
// I haven't found an event or Promise to hook on to
window.setTimeout(this._handleAfterShow, 100);
}); });
} }