extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-24 08:53:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Email changes & bugfixes

Browse Source 
- Keep focus in search when suggestions arrive
- Fix focus went to body when tabbing from search with typed address
- Don't wrap at top / bottom of suggestion list
- Spacing / padding fixes
This commit is contained in:
nathan 2023-12-13 13:56:23 -07:00
parent c9ab4cccf6
commit c306c267ba
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/js/etemplate/Et2Email/Et2Email.styles.ts
View File

@ -29,6 +29,8 @@ export default css`
min-height: var(--sl-input-height-medium);
padding-block: 0;
padding-inline: var(--sl-input-spacing-medium);
padding-top: 0.1rem;
padding-bottom: 0.1rem;
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
var(--sl-transition-fast) background-color;
@ -72,11 +74,15 @@ export default css`
outline: none;
font-size: var(--sl-input-font-size-medium);
min-height: var(--sl-input-height-medium);
padding-block: 0;
padding-inline: var(--sl-input-spacing-medium);
}
.form-control--medium .email__search {
/* Input same size as tags */
height: calc(var(--sl-input-height-medium) * 0.8);
}
.email .email__loading {
order: 19;
}

24
api/js/etemplate/Et2Email/Et2Email.ts
View File

@ -607,12 +607,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
this._listbox.hidden = false;
this._popup.active = true;
// Select the appropriate option based on value after the listbox opens
requestAnimationFrame(() =>
{
this.setCurrentOption(this.currentOption);
});
// Make sure the current option is scrolled into view (required for Safari)
if(this.currentOption)
{
@ -643,7 +637,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
// Reset tags to not take focus
this.setCurrentTag(null);
this._search.setSelectionRange(0, 0);
this._search.setSelectionRange(this._search.value.length, this._search.value.length);
}
private handleSearchBlur()
@ -690,10 +684,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
// Tab or enter checks current value
else if(Et2Email.TAG_BREAK.indexOf(event.key) !== -1)
{
// Don't want the key to do its normal ting
event.stopPropagation();
event.preventDefault();
// Check for valid email or current selection
if(!this.validateAddress(this._search.value.trim()) && this.currentOption)
{
@ -707,6 +697,13 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
if(event.key == "Tab")
{
this.blur();
// Allow tab to change the focus
}
else
{
// Don't want the key to do its normal thing
event.stopPropagation();
event.preventDefault();
}
}
// Start search immediately
@ -841,7 +838,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
newIndex = currentIndex + 1;
if(newIndex > suggestions.length - 1)
{
newIndex = 0;
newIndex = suggestions.length - 1;
}
}
else if(event.key === "ArrowUp")
@ -849,7 +846,8 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
newIndex = currentIndex - 1;
if(newIndex < 0)
{
newIndex = suggestions.length - 1;
this.setCurrentOption(null);
this._search.focus();
}
}
else if(event.key === "Home")