diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index 150bb34ce0..77b948dd4f 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -96,6 +96,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS { super(); this._triggerChange = this._triggerChange.bind(this); + this._doResize = this._doResize.bind(this); } connectedCallback() @@ -106,6 +107,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS { this.addEventListener("sl-clear", this._triggerChange) this.addEventListener("sl-change", this._triggerChange); + this.addEventListener("sl-after-show", this._doResize) }); } @@ -115,6 +117,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS this.removeEventListener("sl-clear", this._triggerChange) this.removeEventListener("sl-change", this._triggerChange); + this.removeEventListener("sl-after-show", this._doResize); } firstUpdated(changedProperties?) @@ -136,6 +139,18 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS this.dispatchEvent(new Event("change")); } + /** + * Change the menu sizing to allow the menu to be wider than the field width, but no smaller + * + * @param e + * @private + */ + private _doResize(e) + { + this.menu.style.minWidth = this.menu.style.width; + this.menu.style.width = ""; + } + /** * Get the node where we're putting the selection options *