extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-23 22:39:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select: Better fix for 80ad5dddb2 which caused problems with selecting options in Et2SelectEmail

Browse Source
This commit is contained in:
nathan 2023-11-21 13:57:24 -07:00
parent fbded12a12
commit 87e60510ea
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,8 +93,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
} }
/* Ellipsis when too small */ /* Ellipsis when too small */
.select__tags {
::part(tags) {
max-width: 100%; max-width: 100%;
} }
.select__label { .select__label {
@ -113,23 +112,29 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
/* Maximum height + scrollbar on tags (+ other styling) */ /* Maximum height + scrollbar on tags (+ other styling) */
::part(tags) { .select__tags {
margin-left: 0px; margin-left: 0px;
max-height: initial; max-height: initial;
overflow-y: auto;
gap: 0.1rem 0.5rem; gap: 0.1rem 0.5rem;
} }
:host([rows]) ::part(tags) { .select--medium .select__tags {
max-height: calc(var(--rows, 5) * 2.3em); padding-top: 2px;
padding-bottom: 2px;
} }
:host([rows='1']) ::part(tags) { :host([rows]) .select__control > .select__label > .select__tags {
max-height: calc(var(--rows, 5) * 29px);
}
:host([rows='1']) .select__tags {
overflow: hidden; overflow: hidden;
} }
/* Keep overflow tag right-aligned. It's the only sl-tag. */ /* Keep overflow tag right-aligned. It's the only sl-tag. */
::part(tags) sl-tag { .select__tags sl-tag {
margin-left: auto; margin-left: auto;
} }
@ -420,7 +425,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
} }
if(this.select) if(this.select)
{ {
this.select.value = this.shoelaceValue; this.select.value = this.__value;
} }
this.requestUpdate("value", oldValue); this.requestUpdate("value", oldValue);
} }
@ -510,6 +515,19 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
} }
} }
update(changedProperties : PropertyValues)
{
super.update(changedProperties);
if(changedProperties.has("select_options") && changedProperties.has("value"))
{
// Force select to stay in sync, avoids value not shown when select options arrive late
if(this.select && this.value !== null && typeof this.value !== "undefined")
{
this.select.value = this.value;
}
}
}
/** /**
* Tag used for rendering tags when multiple=true * Tag used for rendering tags when multiple=true
* Used for creating, finding & filtering options. * Used for creating, finding & filtering options.
@ -790,13 +808,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
return typeof super._extraTemplate == "function" ? super._extraTemplate() : nothing; return typeof super._extraTemplate == "function" ? super._extraTemplate() : nothing;
} }
/** public render()
* Shoelace select uses space as multiple separator, so our values cannot have a space in them.
* We replace spaces with "___" before passing the value to SlSelect
*
* @protected
*/
protected get shoelaceValue() : string | string[]
{ {
return Array.isArray(this.value) ? return Array.isArray(this.value) ?
this.value.map(v => { return v.replaceAll(" ", "___"); }) : this.value.map(v => { return v.replaceAll(" ", "___"); }) :