Get automatic search when more than 20 select_options working for all cases

StaticOptions, change after init previously didn't work

api/etemplate.php

@@ -88,6 +88,7 @@ function send_template()
 				'select'                  => 'empty_label,ignore',
 				'select-account'          => 'empty_label,account_type,ignore',
 				'select-number'           => 'empty_label,min,max,interval,suffix',
+				'select-cat'              => 'empty_label,global_categories,ignore,application,parentCat,owner',
 				'box'                     => ',cellpadding,cellspacing,keep',
 				'hbox'                    => 'cellpadding,cellspacing,keep',
 				'vbox'                    => 'cellpadding,cellspacing,keep',

api/js/etemplate/Et2Select/Et2SelectCategory.ts

@@ -58,11 +58,6 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
 	constructor()
 	{
 		super();
-		so.cat(this).then(options =>
-		{
-			this.static_options = cleanSelectOptions(options);
-			this.requestUpdate("select_options");
-		});
 	}
 
 	async connectedCallback()
@@ -86,9 +81,18 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
 	}
 
 
-	updated(changedProperties : PropertyValues)
+	willUpdate(changedProperties : PropertyValues)
 	{
-		super.updated(changedProperties);
+		super.willUpdate(changedProperties);
+
+		if(changedProperties.has("global_categories") || changedProperties.has("application") || changedProperties.has("parentCat"))
+		{
+			so.cat(this).then(options =>
+			{
+				this.static_options = cleanSelectOptions(options);
+				this.requestUpdate("select_options");
+			});
+		}
 
 		if(changedProperties.has("value") || changedProperties.has('select_options'))
 		{

api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts

@@ -168,11 +168,6 @@ export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(supe
 
 			this.__select_options = cleanSelectOptions(new_options);
 
-			if (this.__select_options.length > 20)
-			{
-				this.search = true;
-			}
-
 			this.requestUpdate("select_options", old_options);
 		}
 

api/js/etemplate/Et2Select/SearchMixin.ts

@@ -296,6 +296,12 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 		{
 			super.willUpdate(changedProperties);
 
+			// Turn on search if there's more than 20 options
+			if(changedProperties.has("select_options") && this.select_options.length > 20)
+			{
+				this.search = true;
+			}
+
 			// If searchURL is set, turn on search
 			if(changedProperties.has("searchUrl") && this.searchUrl)
 			{
@@ -303,6 +309,27 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 			}
 		}
 
+		update(changedProperties)
+		{
+			super.update(changedProperties);
+
+			// One of the key properties has changed, need to add the needed nodes
+			if(changedProperties.has("search") || changedProperties.has("editModeEnabled") || changedProperties.has("allowFreeEntries"))
+			{
+				// Missing any of the required attributes?  Now we need to take it out.
+				if(!this.searchEnabled && !this.editModeEnabled && !this.allowFreeEntries || this.readonly)
+				{
+					this._unbindListeners();
+					this.querySelector(".search_input")?.remove();
+					return;
+				}
+
+				// Normally this should be handled in render(), but we have to add our nodes in
+				this._addNodes();
+				this._bindListeners();
+			}
+		}
+
 		/**
 		 * Add the nodes we need to search - adjust parent shadowDOM
 		 *
@@ -310,7 +337,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 		 */
 		protected _addNodes()
 		{
-
 			const div = document.createElement("div");
 			div.classList.add("search_input");
 			render(this._searchInputTemplate(), div);