@schukai/monster 3.120.0 → 3.121.0

package/source/components/form/select.mjs

@@ -12,13 +12,11 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { internalSymbol } from "../../constants.mjs";
+import { instanceSymbol, internalSymbol } from "../../constants.mjs";
 import { buildMap, build as buildValue } from "../../data/buildmap.mjs";
-import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { positionPopper } from "./util/floating-ui.mjs";
 import {
 	addAttributeToken,
+	containsAttributeToken,
 	findClosestByAttribute,
 	removeAttributeToken,
 } from "../../dom/attributes.mjs";
@@ -29,12 +27,18 @@ import {
 	getSlottedElements,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
+import { addErrorAttribute, removeErrorAttribute } from "../../dom/error.mjs";
 import {
 	findTargetElementFromEvent,
 	fireCustomEvent,
 	fireEvent,
 } from "../../dom/events.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { getDocument } from "../../dom/util.mjs";
+import {
+	getDocumentTranslations,
+	Translations,
+} from "../../i18n/translations.mjs";
 import { Formatter } from "../../text/formatter.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import { ID } from "../../types/id.mjs";
@@ -50,21 +54,17 @@ import {
 import { Observer } from "../../types/observer.mjs";
 import { ProxyObserver } from "../../types/proxyobserver.mjs";
 import { validateArray, validateString } from "../../types/validate.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Processing } from "../../util/processing.mjs";
 import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
 import { SelectStyleSheet } from "./stylesheet/select.mjs";
-import {
-	getDocumentTranslations,
-	Translations,
-} from "../../i18n/translations.mjs";
-import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import { addErrorAttribute, removeErrorAttribute } from "../../dom/error.mjs";
+import { positionPopper } from "./util/floating-ui.mjs";
 
 export {
-	Select,
-	popperElementSymbol,
-	getSummaryTemplate,
 	getSelectionTemplate,
+	getSummaryTemplate,
+	popperElementSymbol,
+	Select,
 };
 
 /**
@@ -227,6 +227,20 @@ const disabledRequestMarker = Symbol("@@disabledRequestMarker");
  */
 const runLookupOnceSymbol = Symbol("runLookupOnce");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const cleanupOptionsListSymbol = Symbol("cleanupOptionsList");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceOptionsMutationObserverSymbol = Symbol(
+	"debounceOptionsMutationObserver",
+);
+
 /**
  * @private
  * @type {number}
@@ -361,59 +375,55 @@ class Select extends CustomControl {
 	 *
 	 * The individual configuration values can be found in the table.
 	 *
-	 * @property {Object} toggleEventType List of event types to be observed for opening the dropdown
-	 * @property {boolean} delegatesFocus lorem [see mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)
-	 * @property {Object[]} options Selection of key identifier pairs available for selection and displayed in the dropdown.
-	 * @property {string} options[].label
-	 * @property {string} options[].value
-	 * @property {string} options[].visibility hidden or visible
-	 * @property {Array} selection Selected options
-	 * @property {Integer} showMaxOptions Maximum number of visible options before a scroll bar should be displayed.
-	 * @property {string} type Multiple (checkbox) or single selection (radio)
-	 * @property {string} name Name of the form field
-	 * @property {string} url Load options from server per url
-	 * @property {object} lookup Load options from server per url
-	 * @property {string} lookup.url Load options from server per url, the playceholder ${filter} is replaced with the value of the selected option
-	 * @property {boolean} lookup.grouping Load all selected options from server per url at once (true) or one by one (false)
-	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
-	 * @property {String} fetch.redirect
-	 * @property {String} fetch.method
-	 * @property {String} fetch.mode
-	 * @property {String} fetch.credentials
-	 * @property {Object} fetch.headers
-	 * @property {Object} labels
-	 * @property {string} labels.cannot-be-loaded cannot be loaded
-	 * @property {string} labels.no-options-available no options available
-	 * @property {string} labels.select-an-option select an option
-	 * @property {string} labels.no-option no option in the list, maybe you have to change the filter
-	 * @property {Object} features List with features
-	 * @property {Boolean} features.clearAll Display of a delete button to delete the entire selection
-	 * @property {Boolean} features.clear Display of a delete key for deleting the specific selection
-	 * @property {Boolean} features.lazyLoad Load options when first opening the dropdown. (Hint; lazylLoad is not supported with remote filter)
-	 * @property {Boolean} features.closeOnSelect Close the dropdown when an option is selected (since 3.54.0)
-	 * @property {Boolean} features.emptyValueIfNoOptions If no options are available, the selection is set to an empty array
-	 * @property {Boolean} features.storeFetchedData Store fetched data in the object
-	 * @property {Boolean} features.useStrictValueComparison Use strict value comparison for the selection
-	 * @property {string} filter.defaultValue Default filter value, if the filter is empty, if the default value is null, then no request is made
-	 * @property {Boolean} filter.mode Filter mode, values: options, remote, disabled (Hint; lazylLoad is not supported with remote filter, if you use remote filter, the lazyLoad is disabled)
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {string} templateMapping Mapping of the template placeholders
-	 * @property {string} templateMapping.selected Selected Template
-	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-	 * @property {string} popper.placement PopperJS placement
-	 * @property {Object[]} modifiers PopperJS placement
-	 * @property {Object} mapping
-	 * @property {String} mapping.selector Path to select the appropriate entries
-	 * @property {String} mapping.labelTemplate template with the label placeholders in the form ${name}, where name is the key (**)
-	 * @property {String} mapping.valueTemplate template with the value placeholders in the form ${name}, where name is the key
-	 * @property {function|undefined} mapping.filter Filtering of values via a function
-	 * @property {Object} empty
-	 * @property {String} empty.defaultValueRadio Default value if you use radio buttons
-	 * @property {Array} empty.defaultValueCheckbox Default value if you use checkboxes
-	 * @property {Array} empty.equivalents Equivalents for empty values
-	 * @property {Object} formatter
-	 * @property {function|undefined} formatter.selection format selection label
+	 * @property {string[]} toggleEventType Array of DOM event names (e.g. ["click","touch"]) to toggle the dropdown.
+	 * @property {boolean} delegatesFocus Whether the element delegates focus to its internal control (e.g. the filter input).
+	 * @property {Array<Object>} options Array of option objects {label,value,visibility?,data?} for static option list.
+	 * @property {string|string[]} selection Initial selected value(s) as string, comma-separated string, or array of strings.
+	 * @property {number} showMaxOptions Maximum visible options before the dropdown scrolls.
+	 * @property {"radio"|"checkbox"} type Selection mode: "radio" for single, "checkbox" for multiple.
+	 * @property {string} name Name of the hidden form field for form submission.
+	 * @property {string|null} url URL to dynamically fetch options via HTTP when opening or filtering.
+	 * @property {string} lookup.url URL template with ${filter} placeholder to fetch only selected entries on init when `url` is set and either `features.lazyLoad` or `filter.mode==="remote"`.
+	 * @property {boolean} lookup.grouping Group lookup requests: true to fetch all selected values in one request, false to fetch each individually.
+	 * @property {string} fetch.redirect Fetch redirect mode (e.g. "error").
+	 * @property {string} fetch.method HTTP method for fetching options (e.g. "GET").
+	 * @property {string} fetch.mode Fetch mode (e.g. "same-origin").
+	 * @property {string} fetch.credentials Credentials policy for fetch (e.g. "same-origin").
+	 * @property {Object.<string,string>} fetch.headers HTTP headers for fetch requests.
+	 * @property {string} labels.cannot-be-loaded Message when options cannot be loaded.
+	 * @property {string} labels.no-options-available Message when no static options are available.
+	 * @property {string} labels.click-to-load-options Message prompting user to click to load options when `features.lazyLoad` is enabled.
+	 * @property {string} labels.select-an-option Placeholder text when no selection is made.
+	 * @property {string} labels.no-options Message when neither slots nor fetched options exist.
+	 * @property {string} labels.no-options-found Message when filter yields no matching options.
+	 * @property {string} labels.summary-text.zero Plural template for zero selected entries (e.g. "No entries were selected").
+	 * @property {string} labels.summary-text.one Plural template for one selected entry.
+	 * @property {string} labels.summary-text.other Plural template for multiple selected entries.
+	 * @property {boolean} features.clearAll Show a "clear all" badge to reset selection.
+	 * @property {boolean} features.clear Show remove icon on individual selection badges.
+	 * @property {boolean} features.lazyLoad Lazy-load options on first open (initial fetch on show and triggers `lookup.url` preload; automatically disabled if `filter.mode==="remote"`).
+	 * @property {boolean} features.closeOnSelect Automatically close dropdown after selection.
+	 * @property {boolean} features.emptyValueIfNoOptions Set value to empty when no options are available.
+	 * @property {boolean} features.storeFetchedData Persist raw fetched data for later retrieval via `getLastFetchedData()`.
+	 * @property {boolean} features.useStrictValueComparison Use strict (`===`) comparison when matching option values.
+	 * @property {string|null} filter.defaultValue Default filter value for remote requests; if unset or empty, disabled marker prevents request.
+	 * @property {"options"|"remote"|"disabled"} filter.mode Client-side ("options"), server-side ("remote"; disables `features.lazyLoad`), or disabled filtering.
+	 * @property {"inline"|"popper"} filter.position Position of filter input: inline within control or inside popper dropdown.
+	 * @property {string} filter.marker.open Opening marker for embedding filter value in `filter.mode==="remote"` URLs.
+	 * @property {string} filter.marker.close Closing marker for embedding filter value in URLs.
+	 * @property {string|null} filter.defaultOptionsUrl URL for default options when `filter.mode==="remote"` is set and no filter value is provided.
+	 * @property {string} templates.main HTML template string for rendering options and selection badges.
+	 * @property {string} templateMapping.selected Template variant for selected items (e.g. badge vs summary view).
+	 * @property {string} popper.placement Popper.js placement strategy for dropdown (e.g. "bottom").
+	 * @property {Array<string|Object>} popper.middleware Popper.js middleware or offset configurations.
+	 * @property {string} mapping.selector Data path or selector to identify entries in imported data.
+	 * @property {string} mapping.labelTemplate Template for option labels using placeholders like `${name}`.
+	 * @property {string} mapping.valueTemplate Template for option values using placeholders like `${name}`.
+	 * @property {Function} mapping.filter Optional callback to filter imported map entries before building `options[]`.
+	 * @property {string} empty.defaultValueRadio Default radio-value when no selection exists.
+	 * @property {Array} empty.defaultValueCheckbox Default checkbox-values array when no selection exists.
+	 * @property {Array} empty.equivalents Values considered empty (e.g. `undefined`, `null`, `""`, `NaN`) and normalized to defaults.
+	 * @property {Function} formatter.selection Callback `(value)=>string` to format the display label of each selected value.
 	 */
 	get defaults() {
 		return Object.assign(
@@ -464,6 +474,7 @@ class Select extends CustomControl {
 						open: "{",
 						close: "}",
 					},
+					defaultOptionsUrl: null,
 				},
 				classes: {
 					badge: "monster-badge-primary",
@@ -514,11 +525,8 @@ class Select extends CustomControl {
 		let remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
 
 		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
-			self.getOption("features.lazyLoad", false);
-			if (lazyLoadFlag === true) {
-				addErrorAttribute(this, "lazyLoad is not supported with remote filter");
-				lazyLoadFlag = false;
-			}
+			self.setOption("features.lazyLoad", false);
+			lazyLoadFlag = false;
 		}
 
 		if (self.hasAttribute("value")) {
@@ -697,95 +705,8 @@ class Select extends CustomControl {
 	 * @fires monster-options-set this event is fired when the options are set
 	 */
 	importOptions(data) {
-		const self = this;
-		const mappingOptions = this.getOption("mapping", {});
-		const selector = mappingOptions?.["selector"];
-		const labelTemplate = mappingOptions?.["labelTemplate"];
-		const valueTemplate = mappingOptions?.["valueTemplate"];
-		let filter = mappingOptions?.["filter"];
-
-		let flag = false;
-		if (labelTemplate === "") {
-			addErrorAttribute(this, "empty label template");
-			flag = true;
-		}
-
-		if (valueTemplate === "") {
-			addErrorAttribute(this, "empty value template");
-			flag = true;
-		}
-
-		if (flag === true) {
-			throw new Error("missing label configuration");
-		}
-		if (isString(filter)) {
-			if (0 === filter.indexOf("run:")) {
-				const code = filter.replace("run:", "");
-				filter = (m, v, k) => {
-					const fkt = new Function("m", "v", "k", "control", code);
-					return fkt(m, v, k, self);
-				};
-			} else if (0 === filter.indexOf("call:")) {
-				const parts = filter.split(":");
-				parts.shift(); // remove prefix
-				const fkt = parts.shift();
-
-				switch (fkt) {
-					case "filterValueOfAttribute":
-						const attribute = parts.shift();
-						const attrValue = self.getAttribute(attribute);
-
-						filter = (m, v, k) => {
-							const mm = buildValue(m, valueTemplate);
-							return mm != attrValue; // no type check, no !==
-						};
-						break;
-
-					default:
-						addErrorAttribute(
-							this,
-							new Error(`Unknown filter function ${fkt}`),
-						);
-				}
-			}
-		}
-
-		const map = buildMap(data, selector, labelTemplate, valueTemplate, filter);
-
-		const options = [];
-
-		if (!isIterable(map)) {
-			throw new Error("map is not iterable");
-		}
-
-		const visibility = "visible";
-
-		map.forEach((label, value) => {
-			options.push({
-				value,
-				label,
-				visibility,
-				data: map.get(value),
-			});
-		});
-
-		runAsOptionLengthChanged.call(this, map.size);
-		this.setOption("options", options);
-
-		fireCustomEvent(this, "monster-options-set", {
-			options,
-		});
-
-		setTimeout(() => {
-			setSelection
-				.call(this, this.getOption("selection"))
-				.then(() => {})
-				.catch((e) => {
-					addErrorAttribute(this, e);
-				});
-		}, 10);
-
-		return this;
+		this[cleanupOptionsListSymbol] = true;
+		return importOptionsIntern.call(this, data);
 	}
 
 	/**
@@ -814,6 +735,102 @@ class Select extends CustomControl {
 	}
 }
 
+/**
+ * @private
+ * @param data
+ * @returns {any}
+ */
+function importOptionsIntern(data) {
+	const self = this;
+	const mappingOptions = this.getOption("mapping", {});
+	const selector = mappingOptions?.["selector"];
+	const labelTemplate = mappingOptions?.["labelTemplate"];
+	const valueTemplate = mappingOptions?.["valueTemplate"];
+	let filter = mappingOptions?.["filter"];
+
+	let flag = false;
+	if (labelTemplate === "") {
+		addErrorAttribute(this, "empty label template");
+		flag = true;
+	}
+
+	if (valueTemplate === "") {
+		addErrorAttribute(this, "empty value template");
+		flag = true;
+	}
+
+	if (flag === true) {
+		throw new Error("missing label configuration");
+	}
+	if (isString(filter)) {
+		if (0 === filter.indexOf("run:")) {
+			const code = filter.replace("run:", "");
+			filter = (m, v, k) => {
+				const fkt = new Function("m", "v", "k", "control", code);
+				return fkt(m, v, k, self);
+			};
+		} else if (0 === filter.indexOf("call:")) {
+			const parts = filter.split(":");
+			parts.shift(); // remove prefix
+			const fkt = parts.shift();
+
+			switch (fkt) {
+				case "filterValueOfAttribute":
+					const attribute = parts.shift();
+					const attrValue = self.getAttribute(attribute);
+
+					filter = (m, v, k) => {
+						const mm = buildValue(m, valueTemplate);
+						return mm != attrValue; // no type check, no !==
+					};
+					break;
+
+				default:
+					addErrorAttribute(this, new Error(`Unknown filter function ${fkt}`));
+			}
+		}
+	}
+
+	const map = buildMap(data, selector, labelTemplate, valueTemplate, filter);
+
+	let options = [];
+	if (this[cleanupOptionsListSymbol] !== true) {
+		options = this.getOption("options", []);
+	}
+
+	if (!isIterable(map)) {
+		throw new Error("map is not iterable");
+	}
+
+	const visibility = "visible";
+
+	map.forEach((label, value) => {
+		options.push({
+			value,
+			label,
+			visibility,
+			data: map.get(value),
+		});
+	});
+
+	this.setOption("options", options);
+
+	fireCustomEvent(this, "monster-options-set", {
+		options,
+	});
+
+	setTimeout(() => {
+		setSelection
+			.call(this, this.getOption("selection"))
+			.then(() => {})
+			.catch((e) => {
+				addErrorAttribute(this, e);
+			});
+	}, 10);
+
+	return this;
+}
+
 /**
  * @private
  * @returns {object}
@@ -1003,6 +1020,8 @@ function lookupSelection() {
 			url = lookupUrl;
 		}
 
+		this[cleanupOptionsListSymbol] = false;
+
 		if (this.getOption("lookup.grouping") === true) {
 			filterFromRemoteByValue
 				.call(
@@ -1027,6 +1046,8 @@ function lookupSelection() {
 }
 
 function fetchIt(url, controlOptions) {
+	const self = this;
+
 	if (url instanceof URL) {
 		url = url.toString();
 	}
@@ -1054,7 +1075,7 @@ function fetchIt(url, controlOptions) {
 						map instanceof Map
 					) {
 						try {
-							this.importOptions(map);
+							importOptionsIntern.call(self, map);
 						} catch (e) {
 							setStatusOrRemoveBadges.call(this, "error");
 							reject(e);
@@ -1074,7 +1095,7 @@ function fetchIt(url, controlOptions) {
 
 						result = setSelection.call(this, newValue);
 
-						requestAnimationFrame(() => {
+						queueMicrotask(() => {
 							checkOptionState.call(this);
 							setStatusOrRemoveBadges.call(this, "closed");
 							updatePopper.call(this);
@@ -1203,7 +1224,7 @@ function getSummaryTemplate() {
            autocomplete="off"
            tabindex="0"
     >
-    <div data-monster-replace="path:messages.selected"></div>    
+    <div data-monster-replace="path:messages.selected"></div>
 </div>`;
 }
 
@@ -1239,52 +1260,9 @@ function parseSlotsToOptions() {
 		});
 	});
 
-	runAsOptionLengthChanged.call(this, options.length);
 	this.setOption("options", options);
 }
 
-/**
- * wait until all options are finished rendering
- *
- * @private
- * @param {int} targetLength
- */
-function runAsOptionLengthChanged(targetLength) {
-	const self = this;
-
-	if (!self[optionsElementSymbol]) {
-		return;
-	}
-
-	const callback = function (mutationsList, observer) {
-		const run = false;
-		for (const mutation of mutationsList) {
-			if (mutation.type === "childList") {
-				const run = true;
-				break;
-			}
-		}
-
-		if (run === true) {
-			const nodes = self[optionsElementSymbol].querySelectorAll(
-				`div[${ATTRIBUTE_ROLE}=option]`,
-			);
-
-			if (nodes.length === targetLength) {
-				checkOptionState.call(self);
-				observer.disconnect();
-			}
-		}
-	};
-
-	const observer = new MutationObserver(callback);
-	observer.observe(self[optionsElementSymbol], {
-		attributes: false,
-		childList: true,
-		subtree: true,
-	});
-}
-
 /**
  * @private
  * @param {*} value
@@ -1748,6 +1726,8 @@ function handleFilterKeyEvents() {
 		if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
 			filterOptions.call(this);
 		} else {
+			this[cleanupOptionsListSymbol] = true;
+
 			filterFromRemote.call(this).catch((e) => {
 				addErrorAttribute(this, e);
 			});
@@ -2075,10 +2055,29 @@ function clearSelection() {
 		});
 }
 
+const optionAvailableDeadManSymbol = Symbol("optionAvailableDeadManSymbol");
+
 /**
  * @private
  */
 function areOptionsAvailableAndInit() {
+	// against flickering
+	if (this[optionAvailableDeadManSymbol] instanceof DeadMansSwitch) {
+		try {
+			this[optionAvailableDeadManSymbol].touch();
+			return;
+		} catch (e) {
+			delete this[optionAvailableDeadManSymbol];
+		}
+	}
+
+	this[optionAvailableDeadManSymbol] = new DeadMansSwitch(200, () => {
+		areOptionsAvailableAndInitInternal.call(this);
+		delete this[timerCallbackSymbol];
+	});
+}
+
+function areOptionsAvailableAndInitInternal() {
 	// prevent multiple calls
 	if (this[areOptionsAvailableAndInitSymbol] === undefined) {
 		this[areOptionsAvailableAndInitSymbol] = 0;
@@ -2112,6 +2111,17 @@ function areOptionsAvailableAndInit() {
 			msg = this.getOption("labels.click-to-load-options");
 		}
 
+		if (this.getOption("filter.mode") === FILTER_MODE_REMOTE) {
+			msg = "";
+		}
+
+		if (
+			containsAttributeToken(this[controlElementSymbol], "class", "open") ===
+			true
+		) {
+			msg = "";
+		}
+
 		this.setOption("messages.control", msg);
 		this.setOption("messages.summary", "");
 
@@ -2443,6 +2453,11 @@ function fetchData(url) {
 		.then((response) => {
 			self[isLoadingSymbol] = false;
 			delayWatch = true;
+
+			if (response.status >= 200 && response.status < 300) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+
 			const contentType = response.headers.get("content-type");
 			if (contentType && contentType.indexOf("application/json") !== -1) {
 				return response.text();
@@ -2516,6 +2531,8 @@ function show() {
 		return;
 	}
 
+	initDefaultOptionsFromUrl.call(this);
+
 	const hasPopperFilterFlag =
 		this.getOption("filter.position") === FILTER_POSITION_POPPER &&
 		getFilterMode.call(this) !== FILTER_MODE_DISABLED;
@@ -2543,6 +2560,27 @@ function show() {
 		});
 }
 
+function initDefaultOptionsFromUrl() {
+	const url = this.getOption("filter.defaultOptionsUrl");
+	if (!url) {
+		return;
+	}
+
+	this.setOption("filter.defaultOptionsUrl", null);
+
+	fetchData
+		.call(this, url)
+		.then((data) => {
+			this[cleanupOptionsListSymbol] = false;
+			importOptionsIntern.call(this, data);
+			setStatusOrRemoveBadges.call(this, "open");
+		})
+		.catch((e) => {
+			addErrorAttribute(this, e);
+			setStatusOrRemoveBadges.call(this, "error");
+		});
+}
+
 /**
  * @private
  */
@@ -2692,6 +2730,7 @@ function initEventHandler() {
 					ATTRIBUTE_ROLE,
 					"remove-badge",
 				);
+
 				if (element instanceof HTMLElement) {
 					return;
 				}
@@ -2741,6 +2780,34 @@ function initEventHandler() {
 	self.addEventListener("input", self[inputEventHandler]);
 	self.addEventListener("keydown", self[keyEventHandler]);
 
+	const callback = () => {
+		if (this[debounceOptionsMutationObserverSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[debounceOptionsMutationObserverSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[debounceOptionsMutationObserverSymbol];
+			}
+		}
+
+		this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
+			100,
+			() => {
+				checkOptionState.call(self);
+				calcAndSetOptionsDimension.call(self);
+				updatePopper.call(self);
+				delete this[debounceOptionsMutationObserverSymbol];
+			},
+		);
+	};
+
+	const observer = new MutationObserver(callback);
+	observer.observe(self[optionsElementSymbol], {
+		attributes: false,
+		childList: true,
+		subtree: true,
+	});
+
 	return self;
 }
 
@@ -2780,16 +2847,16 @@ function setStatusOrRemoveBadges(suggestion) {
 			return;
 		}
 
-		if (clearAllFlag) {
-			if (current !== "clear") {
-				this.setOption("classes.statusOrRemoveBadge", "clear");
+		if (this[controlElementSymbol].classList.contains("open")) {
+			if (current !== "open") {
+				this.setOption("classes.statusOrRemoveBadge", "open");
 			}
 			return;
 		}
 
-		if (this[controlElementSymbol].classList.contains("open")) {
-			if (current !== "open") {
-				this.setOption("classes.statusOrRemoveBadge", "open");
+		if (clearAllFlag) {
+			if (current !== "clear") {
+				this.setOption("classes.statusOrRemoveBadge", "clear");
 			}
 			return;
 		}
@@ -2902,10 +2969,10 @@ function getTemplate() {
                            data-monster-attributes="
             type path:type,
             role path:role,
-            value path:options.value, 
-            name path:name, 
+            value path:options.value,
+            name path:name,
             part path:type | prefix:option- | suffix: form,
-            class path:options.class 
+            class path:options.class
             " tabindex="-1">
                     <div data-monster-replace="path:options.label"
                          part="option-label"></div>
@@ -2917,8 +2984,8 @@ function getTemplate() {
             <div data-monster-role="badge"
                  part="badge"
                  data-monster-attributes="
-                 data-monster-value path:selection | index:value, 
-                 class path:classes | index:badge, 
+                 data-monster-value path:selection | index:value,
+                 class path:classes | index:badge,
         part path:type | suffix:-option | prefix: form-" tabindex="-1">
                 <div data-monster-replace="path:selection | index:label" part="badge-label"
                      data-monster-role="badge-label"></div>