mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-01-03 12:39:25 +01:00
Et2Email changes & bugfixes
- 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:
parent
4856e97010
commit
fb89581bb5
@ -29,6 +29,8 @@ export default css`
|
|||||||
min-height: var(--sl-input-height-medium);
|
min-height: var(--sl-input-height-medium);
|
||||||
padding-block: 0;
|
padding-block: 0;
|
||||||
padding-inline: var(--sl-input-spacing-medium);
|
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,
|
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
|
||||||
var(--sl-transition-fast) background-color;
|
var(--sl-transition-fast) background-color;
|
||||||
@ -72,11 +74,15 @@ export default css`
|
|||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
font-size: var(--sl-input-font-size-medium);
|
font-size: var(--sl-input-font-size-medium);
|
||||||
min-height: var(--sl-input-height-medium);
|
|
||||||
padding-block: 0;
|
padding-block: 0;
|
||||||
padding-inline: var(--sl-input-spacing-medium);
|
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 {
|
.email .email__loading {
|
||||||
order: 19;
|
order: 19;
|
||||||
}
|
}
|
||||||
|
@ -607,12 +607,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
|
|||||||
this._listbox.hidden = false;
|
this._listbox.hidden = false;
|
||||||
this._popup.active = true;
|
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)
|
// Make sure the current option is scrolled into view (required for Safari)
|
||||||
if(this.currentOption)
|
if(this.currentOption)
|
||||||
{
|
{
|
||||||
@ -643,7 +637,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
|
|||||||
// Reset tags to not take focus
|
// Reset tags to not take focus
|
||||||
this.setCurrentTag(null);
|
this.setCurrentTag(null);
|
||||||
|
|
||||||
this._search.setSelectionRange(0, 0);
|
this._search.setSelectionRange(this._search.value.length, this._search.value.length);
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleSearchBlur()
|
private handleSearchBlur()
|
||||||
@ -690,10 +684,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
|
|||||||
// Tab or enter checks current value
|
// Tab or enter checks current value
|
||||||
else if(Et2Email.TAG_BREAK.indexOf(event.key) !== -1)
|
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
|
// Check for valid email or current selection
|
||||||
if(!this.validateAddress(this._search.value.trim()) && this.currentOption)
|
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")
|
if(event.key == "Tab")
|
||||||
{
|
{
|
||||||
this.blur();
|
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
|
// Start search immediately
|
||||||
@ -841,7 +838,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
|
|||||||
newIndex = currentIndex + 1;
|
newIndex = currentIndex + 1;
|
||||||
if(newIndex > suggestions.length - 1)
|
if(newIndex > suggestions.length - 1)
|
||||||
{
|
{
|
||||||
newIndex = 0;
|
newIndex = suggestions.length - 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(event.key === "ArrowUp")
|
else if(event.key === "ArrowUp")
|
||||||
@ -849,7 +846,8 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
|
|||||||
newIndex = currentIndex - 1;
|
newIndex = currentIndex - 1;
|
||||||
if(newIndex < 0)
|
if(newIndex < 0)
|
||||||
{
|
{
|
||||||
newIndex = suggestions.length - 1;
|
this.setCurrentOption(null);
|
||||||
|
this._search.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(event.key === "Home")
|
else if(event.key === "Home")
|
||||||
|
Loading…
Reference in New Issue
Block a user