Work around Shoelace bug

shoelace-style/shoelace#2376
EGroupware · Feb 14, 2025 · a604006 · a604006
1 parent 8ed9560
commit a604006
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
@@ -366,6 +366,15 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
 
 			this.removeEventListener("focus", this.et2HandleFocus);
 			this.removeEventListener("blur", this.et2HandleBlur);
+
+			// Hacky hack to clean up Shoelace form controller
+			// https://github.com/shoelace-style/shoelace/issues/2376
+			if(this.formControlController && this.formControlController.form)
+			{
+				this.formControlController.form.removeEventListener('formdata', this.formControlController.handleFormData);
+				this.formControlController.form.removeEventListener('submit', this.formControlController.handleFormSubmit);
+				this.formControlController.form.removeEventListener('reset', this.formControlController.handleFormReset);
+			}
 		}
 
 		/**

diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -364,6 +364,16 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 
 		this.removeEventListener("focusin", this.handleFocus);
 		this.removeEventListener("sl-change", this._triggerChange);
+		this.removeEventListener("mouseleave", this._handleMouseLeave);
+
+		// Hacky hack to clean up Shoelace form controller
+		// https://github.com/shoelace-style/shoelace/issues/2376
+		if(this.dropdown?.formControlController && this.dropdown?.formControlController.form)
+		{
+			this.dropdown?.formControlController.form.removeEventListener('formdata', this.dropdown?.formControlController.handleFormData);
+			this.dropdown?.formControlController.form.removeEventListener('submit', this.dropdown?.formControlController.handleFormSubmit);
+			this.dropdown?.formControlController.form.removeEventListener('reset', this.dropdown?.formControlController.handleFormReset);
+		}
 	}
 
 	async getUpdateComplete()
@@ -855,6 +865,12 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 		this.select.requestUpdate();
 	}
 
+	protected _handleMouseWheel(e : MouseEvent)
+	{
+		// Grab & stop mousewheel to prevent scrolling sidemenu when scrolling through options
+		e => e.stopImmediatePropagation()
+	}
+
 	/** Shows the listbox. */
 	async show()
 	{
@@ -1108,11 +1124,8 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
                     value=${Array.isArray(value) ? value.join(" ") : value}
                     @sl-change=${this.handleValueChange}
                     @mouseenter=${this._handleMouseEnter}
+                    @mousewheel=${this._handleMouseWheel}
                     @mouseup=${this.handleOptionClick}
-                    @mousewheel=${
-                            // Grab & stop mousewheel to prevent scrolling sidemenu when scrolling through options
-                            e => e.stopImmediatePropagation()
-                    }
                     size=${this.size || "medium"}
             >
                 ${icon}