extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-27 15:53:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select: Always close the dropdown after an option is selected, even if multiple=true. Now for keypresses too.

Browse Source 
see 62402f39ae
This commit is contained in:
nathan 2023-03-23 16:02:09 -06:00
parent 62402f39ae
commit 5614870a29
1 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -252,6 +252,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this._handleMouseEnter = this._handleMouseEnter.bind(this); this._handleMouseEnter = this._handleMouseEnter.bind(this);
this._handleMouseLeave = this._handleMouseLeave.bind(this); this._handleMouseLeave = this._handleMouseLeave.bind(this);
this.handleOptionClick = this.handleOptionClick.bind(this); this.handleOptionClick = this.handleOptionClick.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleTagRemove = this.handleTagRemove.bind(this); this.handleTagRemove = this.handleTagRemove.bind(this);
} }
@ -268,6 +269,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this.addEventListener("mousewheel", this._handleMouseWheel); this.addEventListener("mousewheel", this._handleMouseWheel);
this.addEventListener("mouseenter", this._handleMouseEnter); this.addEventListener("mouseenter", this._handleMouseEnter);
this.addEventListener("mouseup", this.handleOptionClick); this.addEventListener("mouseup", this.handleOptionClick);
this.addEventListener("keyup", this.handleKeyDown);
this.updateComplete.then(() => this.updateComplete.then(() =>
{ {
@ -689,6 +691,29 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
}); });
} }
/**
* Always close the dropdown if an option is clicked, even if multiple=true. This differs from SlSelect,
* which leaves the dropdown open for multiple=true
*
* @param {KeyboardEvent} event
* @private
*/
private handleKeyDown(event : KeyboardEvent)
{
if(event.key === 'Enter' || (event.key === ' ' && this.typeToSelectString === ''))
{
this.dropdown.hide().then(() =>
{
if(typeof this.handleMenuHide == "function")
{
// Make sure search gets hidden
this.handleMenuHide();
}
});
}
}
/** /**
* Get the icon for the select option * Get the icon for the select option
* *