Get country flags showing again

api/js/etemplate/Et2Select/Et2Select.ts

@@ -808,7 +808,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 		}
 		return html`
             <sl-option
-                    part="emptyLabel"
+                    part="emptyLabel option"
                     value=""
                     .selected=${this.getValueAsArray().some(v => v == "")}
             >

api/js/etemplate/Et2Select/SearchMixin.ts

@@ -687,6 +687,8 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
 			{
 				return;
 			}
+			this.setAttribute("open", "");
+
 			// Move search (& menu) if there's no value
 			this._activeControls?.classList.toggle("novalue", this.multiple && this.value == '' || !this.multiple);
 
@@ -759,6 +761,8 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
 			{
 				return;
 			}
+			this.removeAttribute("open");
+
 			this.clearSearch();
 
 			// Reset display

api/js/etemplate/Et2Select/Select/Et2SelectCountry.ts

@@ -12,6 +12,7 @@ import {Et2Select} from "../Et2Select";
 import {Et2StaticSelectMixin, StaticOptions as so} from "../StaticOptions";
 import {egw} from "../../../jsapi/egw_global";
 import {SelectOption} from "../FindSelectOptions";
+import {html} from "lit";
 
 /**
  * Customised Select widget for countries
@@ -46,14 +47,51 @@ export class Et2SelectCountry extends Et2StaticSelectMixin(Et2Select)
 	connectedCallback()
 	{
 		super.connectedCallback();
-
-		// Add element for current value flag
-		this.querySelector("[slot=prefix].tag_image")?.remove();
-		let image = document.createElement("span");
-		image.slot = "prefix";
-		image.classList.add("tag_image", "flag");
-		this.appendChild(image);
 	}
+
+	/**
+	 * Get the element for the flag
+	 *
+	 * @param option
+	 * @protected
+	 */
+	protected _iconTemplate(option)
+	{
+		return html`
+            <span slot="prefix" part="flag country_${option.value}_flag"
+                  style="width: var(--icon-width)">
+			</span>`;
+	}
+
+	/**
+	 * Used to render each option into the select
+	 * Override to get flags in
+	 *
+	 * @param {SelectOption} option
+	 * @returns {TemplateResult}
+	 *
+	protected _optionTemplate(option : SelectOption) : TemplateResult
+	{
+		// Exclude non-matches when searching
+		if(typeof option.isMatch == "boolean" && !option.isMatch)
+		{
+			return html``;
+		}
+
+		return html`
+            <sl-option
+                    part="option"
+                    value="${value}"
+                    title="${!option.title || this.noLang ? option.title : this.egw().lang(option.title)}"
+                    class="${option.class}" .option=${option}
+                    .selected=${this.getValueAsArray().some(v => v == value)}
+                    ?disabled=${option.disabled}
+            >
+                ${this._iconTemplate(option)}
+                ${this.noLang ? option.label : this.egw().lang(option.label)}
+            </sl-option>`;
+	}
+	 */
 }
 
 customElements.define("et2-select-country", Et2SelectCountry);