Work on Search/LinkEntry

- Fix events were messed up after search
This commit is contained in:
nathan 2022-06-02 15:44:13 -06:00
parent 22e178ff9a
commit f07aacaeaf
2 changed files with 20 additions and 11 deletions

View File

@ -1,12 +1,3 @@
/**
* EGroupware eTemplate2 - Find select options
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package api
* @link https://www.egroupware.org
* @author Nathan Gray
*/
export interface SelectOption
{
value : string;
@ -163,6 +154,7 @@ export function find_select_options(widget, attr_options?, options : SelectOptio
// Include passed options, preferring any content options
if(options.length || Object.keys(options).length > 0)
{
content_options = cleanSelectOptions(content_options);
for(let i in content_options)
{
let value = typeof content_options[i] == 'object' && typeof content_options[i].value !== 'undefined' ? content_options[i].value : i;

View File

@ -113,6 +113,10 @@ export const Et2WithSearchMixin = dedupeMixin((superclass) =>
::slotted([name="search_input"]:focus ){
width: 100%;
}
:host([search]) .select--open .select__prefix {
flex: 2 1 auto;
width: 100%;
}
.select__prefix ::slotted(.search_input) {
display: none;
margin-left: 0px;
@ -149,8 +153,10 @@ export const Et2WithSearchMixin = dedupeMixin((superclass) =>
{
super.connectedCallback();
this.classList.toggle("search", this.searchEnabled);
// Missing any of the required attributes? Don't change anything.
if(!this.search && !this.searchUrl && !this.allowFreeEntries)
if(!this.searchEnabled)
{
return;
}
@ -183,8 +189,9 @@ export const Et2WithSearchMixin = dedupeMixin((superclass) =>
protected _searchInputTemplate()
{
// I can't figure out how to get this full width via CSS
return html`
<input type="text" @keydown=${this._handleSearchKeyDown}/>
<input type="text" part="input" style="width:100%" @keydown=${this._handleSearchKeyDown}/>
`;
}
@ -242,12 +249,21 @@ export const Et2WithSearchMixin = dedupeMixin((superclass) =>
protected _bindListeners()
{
this.addEventListener("sl-blur", this._handleSearchAbort);
if(this._oldChange)
{
// Search messes up event order somehow, selecting an option fires the change event before
// the widget is finished adjusting, losing the value
// This is not optimal, but we need to get that change event
this.removeEventListener("change", this._oldChange);
}
this._searchButtonNode.addEventListener("click", this._handleSearchButtonClick);
}
protected _unbindListeners()
{
this.removeEventListener("sl-blur", this._handleSearchAbort);
this.removeEventListener("change", this._handleChange);
this._searchButtonNode.removeEventListener("click", this._handleSearchButtonClick);
}
@ -461,6 +477,7 @@ export const Et2WithSearchMixin = dedupeMixin((superclass) =>
item.classList.remove("match");
item.classList.remove("no-match");
})
this.syncItemsFromValue();
}
}