@schukai/monster 4.136.5 → 4.136.6

package/CHANGELOG.md

@@ -17,11 +17,13 @@
 - **popper:** guard show/hide/update flows against disconnected hosts and missing internal elements
 - **message-state-button:** distinguish overlay, prose, and wide message layouts for smart popper sizing and overflow ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
 - **popper:** support kebab-case camelCase option attributes such as `data-monster-option-popper-content-overflow` ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
+- **popper/select:** let nested `monster-select` poppers escape parent popper content wrappers without shrinking normal parent content sizing ([#416](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/work_items/416))
 
 ### Changes
 
 - document lifecycle ownership rules for Updater-driven and stateful custom element implementations
 - document smart message popper layout behavior for forms and feedback flows ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
+- document and add an issue repro for nested `monster-select` overflow behavior in `monster-popper-button` ([#416](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/work_items/416))
 
 
 

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.5"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.6"}

package/source/components/form/select.mjs

@@ -71,6 +71,7 @@ import {
 	openPositionedPopper,
 	positionPopper,
 	resolveClippingBoundaryElement,
+	resolveParentPopperContentBoundary,
 } from "./util/floating-ui.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
@@ -261,21 +262,17 @@ const remoteInfoElementSymbol = Symbol("remoteInfoElement");
 const areOptionsAvailableAndInitSymbol = Symbol("@@areOptionsAvailableAndInit");
 
 /**
+ * Internal sentinel used to suppress a remote request after URL formatting.
+ *
+ * This is currently inserted only when `filter.defaultValue` resolves to
+ * `undefined` or `null`. An empty string is treated as a real filter value and
+ * therefore still produces a request.
+ *
  * @private
  * @type {symbol}
  */
 const disabledRequestMarker = Symbol("@@disabledRequestMarker");
 
-/**
- * @private
- * @type {symbol}
- */
-const runLookupOnceSymbol = Symbol("runLookupOnce");
-
-/**
- * @private
- * @type {symbol}
- */
 const cleanupOptionsListSymbol = Symbol("cleanupOptionsList");
 const optionsVersionSymbol = Symbol("optionsVersion");
 const pendingSelectionSymbol = Symbol("pendingSelection");
@@ -300,16 +297,6 @@ const debounceOptionsMutationObserverSymbol = Symbol(
  */
 const currentPageSymbol = Symbol("currentPage");
 
-/**
- * @private
- * @type {symbol}
- */
-const remoteFilterFirstOpendSymbol = Symbol("remoteFilterFirstOpend");
-
-/**
- * @private
- * @type {symbol}
- */
 const lookupCacheSymbol = Symbol("lookupCache");
 
 /**
@@ -317,6 +304,7 @@ const lookupCacheSymbol = Symbol("lookupCache");
  * @type {symbol}
  */
 const lookupInProgressSymbol = Symbol("lookupInProgress");
+const unresolvedSelectionValuesSymbol = Symbol("unresolvedSelectionValues");
 const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
 
 /**
@@ -398,6 +386,7 @@ class Select extends CustomControl {
 		this[currentPageSymbol] = 1;
 		this[lookupCacheSymbol] = new Map();
 		this[lookupInProgressSymbol] = new Map();
+		this[unresolvedSelectionValuesSymbol] = new Set();
 		this[optionsMapSymbol] = new Map();
 		this[closeOnSelectAutoSymbol] = true;
 		initOptionObserver.call(this);
@@ -480,8 +469,8 @@ class Select extends CustomControl {
 	 * @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 {number|null} total - Total number of available options, useful for pagination with remote data.
-	 * @property {Object} lookup - Configuration for fetching initially selected values.
-	 * @property {string|null} lookup.url - URL template with a `${filter}` placeholder to look up selected entries on initialization. Used when `url` is set and either `features.lazyLoad` is active or `filter.mode` is `"remote"`.
+	 * @property {Object} lookup - Configuration for hydrating already selected values.
+	 * @property {string|null} lookup.url - URL template with a `${filter}` placeholder to look up selected entries. Prefer a stable value-based lookup endpoint. This is used for initial hydration and for resolving labels of externally assigned selections that are not yet present in the local option map.
 	 * @property {boolean} lookup.grouping - If `true`, all selected values are fetched in a single request; otherwise, a separate request is sent for each value.
 	 * @property {Object} fetch - Configuration for HTTP requests via `fetch`.
 	 * @property {string} fetch.redirect - Fetch redirect mode (e.g., "error", "follow").
@@ -490,7 +479,7 @@ class Select extends CustomControl {
 	 * @property {string} fetch.credentials - Credentials policy for fetch (e.g., "include", "same-origin").
 	 * @property {Object.<string, string>} fetch.headers - HTTP headers to be sent with every request.
 	 * @property {Object} labels - Text labels for various states and UI elements.
-	 * @property {string} labels.cannot-be-loaded - Message displayed when options cannot be loaded.
+	 * @property {string} labels.cannot-be-loaded - Message displayed when options cannot be loaded. Unresolved selected values keep their raw key instead of replacing it with this label.
 	 * @property {string} labels.no-options-available - Message displayed when no static options are provided.
 	 * @property {string} labels.click-to-load-options - Prompt to load options when `features.lazyLoad` is enabled.
 	 * @property {string} labels.select-an-option - Placeholder text when no selection has been made.
@@ -513,10 +502,10 @@ class Select extends CustomControl {
 	 * @property {Object} placeholder - Placeholder texts for input fields.
 	 * @property {string} placeholder.filter - Placeholder text for the filter input field.
 	 * @property {Object} filter - Configuration for the filtering functionality.
-	 * @property {string|null} filter.defaultValue - Default filter value for remote requests. An empty string will prevent the initial request.
+	 * @property {string|null} filter.defaultValue - Default filter value for remote requests. In the current implementation only `undefined` or `null` suppress the request by inserting an internal disabled marker. An empty string `""` is still formatted into the URL and therefore does not prevent the request.
 	 * @property {"options"|"remote"|"disabled"} filter.mode - Filter mode: `"options"` (client-side), `"remote"` (server-side, `lazyLoad` is ignored), or `"disabled"`.
 	 * @property {"inline"|"popper"} filter.position - Position of the filter input: `"inline"` (inside the control) or `"popper"` (inside the dropdown).
-	 * @property {string|null} filter.defaultOptionsUrl - URL to load an initial list of options when `filter.mode` is `"remote"` and no filter value has been entered.
+	 * @property {string|null} filter.defaultOptionsUrl - URL to load options when `filter.mode` is `"remote"` and no filter value has been entered. This is used as the empty-filter source both on open and after the filter is cleared again.
 	 * @property {Object} filter.marker - Markers for embedding the filter value into the `url` for server-side filtering.
 	 * @property {string} filter.marker.open - Opening marker (e.g., `{`).
 	 * @property {string} filter.marker.close - Closing marker (e.g., `}`).
@@ -544,6 +533,7 @@ class Select extends CustomControl {
 	 * @property {Function} formatter.selection - Callback `(value, option) => string` to format the display text of selected values.
 	 * @property {Object} classes - CSS classes for various elements.
 	 * @property {string} classes.badge - CSS class for selection badges.
+	 * @property {string} classes.badgeUnresolved - CSS class used for selection badges whose value could not be hydrated. By default this swaps the badge into a warning style while keeping the raw key visible.
 	 * @property {string} classes.statusOrRemoveBadge - CSS class for the status or remove badge.
 	 * @property {string} classes.remoteInfo - CSS class for the remote info badge.
 	 * @property {string} classes.noOptions - CSS class for the "no options" message.
@@ -625,6 +615,7 @@ class Select extends CustomControl {
 
 				classes: {
 					badge: "monster-badge-primary",
+					badgeUnresolved: "monster-badge-warning",
 					statusOrRemoveBadge: "empty",
 					remoteInfo: "monster-margin-start-4 monster-margin-top-4",
 					noOptions: "monster-margin-top-4 monster-margin-start-4",
@@ -681,6 +672,7 @@ class Select extends CustomControl {
 			// Clear the lookup cache
 			this[lookupCacheSymbol].clear();
 			this[lookupInProgressSymbol].clear();
+			this[unresolvedSelectionValuesSymbol].clear();
 
 			setSelection
 				.call(this, null)
@@ -702,7 +694,6 @@ class Select extends CustomControl {
 					resetErrorAttribute(this);
 
 					this[lazyLoadDoneSymbol] = false;
-					this[runLookupOnceSymbol] = false;
 
 					checkOptionState.call(this);
 					calcAndSetOptionsDimension.call(this);
@@ -753,7 +744,9 @@ class Select extends CustomControl {
 
 		if (self.getOption("url") !== null) {
 			if (lazyLoadFlag || remoteFilterFlag) {
-				lookupSelection.call(self);
+				if (self.getOption("lookup.url")) {
+					lookupSelection.call(self);
+				}
 			} else {
 				self
 					.fetch()
@@ -1776,9 +1769,12 @@ function getTranslations() {
 }
 
 /**
- * @private
- */
-/**
+ * Hydrates the current selection once the component becomes visible.
+ *
+ * This path is used for initial hydration when remote or lazy-loaded options
+ * are not yet present locally. It is intentionally limited to `lookup.url`
+ * and does not fall back to the main remote option source.
+ *
  * @private
  */
 function lookupSelection() {
@@ -1817,7 +1813,10 @@ function runSelectionLookupWhenVisible(self) {
 			return;
 		}
 
-		let url = self.getOption("lookup.url") || self.getOption("url");
+		const url = self.getOption("lookup.url");
+		if (!url) {
+			return;
+		}
 		self[cleanupOptionsListSymbol] = false;
 
 		if (self.getOption("lookup.grouping") === true) {
@@ -2237,22 +2236,120 @@ function parseSlotsToOptions() {
  * @return {*}
  */
 function buildSelectionLabel(value) {
-	// First, check the lookup cache.
-	if (this[lookupCacheSymbol].has(value)) {
-		return this[lookupCacheSymbol].get(value);
-	}
-
 	const strict = this.getOption("features.useStrictValueComparison") === true;
 	const map = this[optionsMapSymbol];
 	const key = strict ? value : String(value);
 
 	if (map && map.has(key)) {
+		if (clearUnresolvedSelectionValue.call(this, value)) {
+			this[lookupCacheSymbol].delete(value);
+		}
 		return map.get(key);
 	}
 
+	if (this[lookupCacheSymbol].has(value)) {
+		return this[lookupCacheSymbol].get(value);
+	}
+
 	return undefined;
 }
 
+/**
+ * @private
+ * @param {*} value
+ * @returns {*}
+ */
+function getSelectionStateKey(value) {
+	return this.getOption("features.useStrictValueComparison") === true
+		? value
+		: String(value);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {boolean}
+ */
+function markSelectionAsUnresolved(value) {
+	const key = getSelectionStateKey.call(this, value);
+	if (this[unresolvedSelectionValuesSymbol].has(key)) {
+		return false;
+	}
+
+	this[unresolvedSelectionValuesSymbol].add(key);
+	return true;
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {boolean}
+ */
+function clearUnresolvedSelectionValue(value) {
+	const key = getSelectionStateKey.call(this, value);
+	return this[unresolvedSelectionValuesSymbol].delete(key);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {boolean}
+ */
+function isSelectionValueUnresolved(value) {
+	const key = getSelectionStateKey.call(this, value);
+	return this[unresolvedSelectionValuesSymbol].has(key);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {string}
+ */
+function getSelectionBadgeClass(value) {
+	const classes = new TokenList(this.getOption("classes.badge"));
+	if (!isSelectionValueUnresolved.call(this, value)) {
+		return classes.toString();
+	}
+
+	const unresolvedClasses = new TokenList(
+		this.getOption("classes.badgeUnresolved"),
+	);
+	for (const token of classes.entries()) {
+		if (token.startsWith("monster-badge-")) {
+			classes.remove(token);
+		}
+	}
+
+	classes.add(unresolvedClasses.entries());
+	return classes.toString();
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @param {string} [preferredLabel]
+ * @returns {{class: string, label: string, unresolved: boolean, value: *}}
+ */
+function buildSelectionItem(value, preferredLabel) {
+	let label = getSelectionLabel.call(this, value);
+	const unresolved = isSelectionValueUnresolved.call(this, value);
+	if (
+		!unresolved &&
+		`${label}` === `${value}` &&
+		isString(preferredLabel) &&
+		preferredLabel.length > 0
+	) {
+		label = preferredLabel;
+	}
+
+	return {
+		label,
+		value,
+		class: getSelectionBadgeClass.call(this, value),
+		unresolved,
+	};
+}
+
 /**
  * @private
  * @param {string} value The value to look up.
@@ -2278,6 +2375,7 @@ async function lookupValueAndCache(value) {
 
 	let hasError = false;
 	let found = false;
+	let refreshSelection = false;
 	try {
 		this[lookupInProgressSymbol].set(value, true);
 
@@ -2309,28 +2407,47 @@ async function lookupValueAndCache(value) {
 			}
 
 			// The lookup might return more than the requested value, so we cache all of them.
-			if (!this[lookupCacheSymbol].has(itemValue)) {
+			if (this[lookupCacheSymbol].get(itemValue) !== itemLabel) {
 				this[lookupCacheSymbol].set(itemValue, itemLabel);
-				if (`${itemValue}` === `${value}`) {
-					found = true;
-				}
+				refreshSelection = true;
+			}
+
+			if (clearUnresolvedSelectionValue.call(this, itemValue)) {
+				refreshSelection = true;
+			}
+
+			if (`${itemValue}` === `${value}`) {
+				found = true;
 			}
 		}
 
 		if (!found && !this[lookupCacheSymbol].has(value)) {
-			const fallback = this.getOption("labels.cannot-be-loaded", value);
-			this[lookupCacheSymbol].set(value, `${fallback}`);
+			this[lookupCacheSymbol].set(value, `${value}`);
+			refreshSelection = true;
 		}
 
-		// If the specific value was found, trigger a re-render of the selection.
-		if (found) {
-			await setSelection.call(this, this.getOption("selection"));
+		if (!found && markSelectionAsUnresolved.call(this, value)) {
+			refreshSelection = true;
 		}
 	} catch (e) {
 		hasError = true;
 		addErrorAttribute(this, e);
+
+		if (!this[lookupCacheSymbol].has(value)) {
+			this[lookupCacheSymbol].set(value, `${value}`);
+			refreshSelection = true;
+		}
+
+		if (markSelectionAsUnresolved.call(this, value)) {
+			refreshSelection = true;
+		}
 	} finally {
 		this[lookupInProgressSymbol].delete(value);
+
+		if (refreshSelection) {
+			await setSelection.call(this, this.getOption("selection"));
+		}
+
 		if (hasError) {
 			setStatusOrRemoveBadges.call(this, "error");
 		} else {
@@ -2932,6 +3049,17 @@ function getSelectPopperPositionOptions() {
 			getDefaultSelectPopperPositionProfile().placement;
 	}
 
+	if (
+		resolveParentPopperContentBoundary(
+			this[controlElementSymbol],
+			this[popperElementSymbol],
+		)
+	) {
+		// Nested selects inside another popper must position against the viewport
+		// so the parent content wrapper does not become their clipping boundary.
+		popperOptions.strategy = "fixed";
+	}
+
 	return popperOptions;
 }
 
@@ -3178,12 +3306,6 @@ function filterFromRemote() {
 		return Promise.reject(new Error("Missing Filter Element."));
 	}
 
-	const url = this.getOption("url");
-	if (!url) {
-		addErrorAttribute(this, "Missing URL for Remote Filter.");
-		return Promise.reject(new Error("Missing URL for Remote Filter."));
-	}
-
 	let filterValue;
 	let showFlag = false;
 
@@ -3207,6 +3329,16 @@ function filterFromRemote() {
 		page: this[currentPageSymbol] || 1,
 	};
 
+	if (shouldUseDefaultOptionsUrl.call(this, filterValue)) {
+		return loadDefaultOptionsFromUrl.call(this, showFlag);
+	}
+
+	const url = this.getOption("url");
+	if (!url) {
+		addErrorAttribute(this, "Missing URL for Remote Filter.");
+		return Promise.reject(new Error("Missing URL for Remote Filter."));
+	}
+
 	return filterFromRemoteByValue.call(this, url, params, showFlag);
 }
 
@@ -3216,7 +3348,8 @@ function filterFromRemote() {
  * @param {object} params
  * @returns {string}
  */
-function formatURL(url, params = {}) {
+function formatURL(url, params = {}, formatOptions = {}) {
+	const preserveEmptyFilter = formatOptions?.preserveEmptyFilter === true;
 	const paramsDefaults = this.getOption("filter.paramsDefaults");
 	const externalParams = this.getOption("filter.params");
 	if (isObject(paramsDefaults) || isObject(externalParams)) {
@@ -3244,7 +3377,7 @@ function formatURL(url, params = {}) {
 	if (
 		params.filter === undefined ||
 		params.filter === null ||
-		params.filter === ""
+		(params.filter === "" && preserveEmptyFilter !== true)
 	) {
 		const defaultValue = this.getOption("filter.defaultValue");
 		if (defaultValue === undefined || defaultValue === null) {
@@ -3284,9 +3417,14 @@ function formatURL(url, params = {}) {
  * @param {boolean} [openPopper] Flag indicating whether to open the popper.
  * @return {string} The formatted URL with the applied filters and markers.
  */
-function filterFromRemoteByValue(optionUrl, params, openPopper) {
+function filterFromRemoteByValue(
+	optionUrl,
+	params,
+	openPopper,
+	formatOptions = {},
+) {
 	return new Processing(() => {
-		let url = formatURL.call(this, optionUrl, params);
+		let url = formatURL.call(this, optionUrl, params, formatOptions);
 
 		if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
 			this.setOption("total", null);
@@ -3400,6 +3538,51 @@ function getCurrentFilterValue() {
 	return "";
 }
 
+function shouldUseDefaultOptionsUrl(filterValue) {
+	if (!isString(this.getOption("filter.defaultOptionsUrl"))) {
+		return false;
+	}
+
+	if (filterValue === undefined || filterValue === null) {
+		return true;
+	}
+
+	if (isString(filterValue)) {
+		return filterValue.trim() === "";
+	}
+
+	return false;
+}
+
+function loadDefaultOptionsFromUrl(openPopper = false) {
+	const url = this.getOption("filter.defaultOptionsUrl");
+	if (!isString(url)) {
+		return Promise.resolve(false);
+	}
+
+	this[cleanupOptionsListSymbol] = true;
+
+	return filterFromRemoteByValue
+		.call(
+			this,
+			url,
+			{
+				filter: "",
+				page: this[currentPageSymbol] || 1,
+			},
+			openPopper,
+			{
+				preserveEmptyFilter: true,
+			},
+		)
+		.then(() => {
+			if (isPositionedPopperOpen(this[popperElementSymbol])) {
+				setStatusOrRemoveBadges.call(this, "open");
+			}
+			return true;
+		});
+}
+
 /**
  * @private
  */
@@ -3519,10 +3702,7 @@ function gatherState() {
 		);
 
 		for (const e of elements) {
-			selection.push({
-				label: getSelectionLabel.call(this, e.value),
-				value: e.value,
-			});
+			selection.push(buildSelectionItem.call(this, e.value));
 		}
 
 		filteredSelection = selection;
@@ -3539,10 +3719,7 @@ function gatherState() {
 			(sel) => !currentInputValues.has(sel.value),
 		);
 		for (const input of checkedElements) {
-			filteredSelection.push({
-				label: getSelectionLabel.call(this, input.value),
-				value: input.value,
-			});
+			filteredSelection.push(buildSelectionItem.call(this, input.value));
 		}
 	}
 
@@ -3821,16 +3998,10 @@ function convertValueToSelection(value) {
 	}
 
 	if (isString(value) || isInteger(value)) {
-		selection.push({
-			label: getSelectionLabel.call(this, value),
-			value: value,
-		});
+		selection.push(buildSelectionItem.call(this, value));
 	} else if (isArray(value)) {
 		for (const v of value) {
-			selection.push({
-				label: getSelectionLabel.call(this, v),
-				value: v,
-			});
+			selection.push(buildSelectionItem.call(this, v));
 		}
 
 		value = value.join(",");
@@ -3955,8 +4126,6 @@ function areSelectionValuesEqual(current, next) {
  * @returns {Promise<unknown | void>}
  */
 function setSelection(selection) {
-	const self = this;
-
 	if (isString(selection) || isInteger(selection)) {
 		const result = convertValueToSelection.call(this, selection);
 		selection = result?.selection;
@@ -3973,15 +4142,9 @@ function setSelection(selection) {
 			continue;
 		}
 
-		let l = getSelectionLabel.call(this, selection[i].value);
-		if (l === selection[i].value) {
-			l = selection[i].label;
-		}
-
-		resultSelection.push({
-			label: l,
-			value: selection[i].value,
-		});
+		resultSelection.push(
+			buildSelectionItem.call(this, selection[i].value, selection[i].label),
+		);
 	}
 
 	selection = resultSelection;
@@ -4016,17 +4179,6 @@ function setSelection(selection) {
 		fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
 	}
 
-	if (this[runLookupOnceSymbol] !== true && selection.length > 0) {
-		this[runLookupOnceSymbol] = true;
-
-		const lazyLoadFlag =
-			this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
-		const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
-		if (lazyLoadFlag || remoteFilterFlag) {
-			lookupSelection.call(self);
-		}
-	}
-
 	return new Processing(() => {
 		const CLASSNAME = "selected";
 
@@ -4178,12 +4330,6 @@ function show() {
 		return;
 	}
 
-	const hasDefaultOptionsUrl = isString(
-		this.getOption("filter.defaultOptionsUrl"),
-	);
-
-	initDefaultOptionsFromUrl.call(this);
-
 	const hasPopperFilterFlag =
 		this.getOption("filter.position") === FILTER_POSITION_POPPER &&
 		getFilterMode.call(this) !== FILTER_MODE_DISABLED;
@@ -4206,17 +4352,23 @@ function show() {
 	registerWithHost.call(this);
 
 	new Processing(() => {
-		if (!self?.[remoteFilterFirstOpendSymbol]) {
-			self[remoteFilterFirstOpendSymbol] = true;
+		const shouldLoadRemoteOptions =
+			getFilterMode.call(self) === FILTER_MODE_REMOTE &&
+			getOptionElements.call(self).length === 0;
 
-			if (!hasDefaultOptionsUrl) {
-				setTimeout(() => {
-					self[cleanupOptionsListSymbol] = true;
-					filterFromRemote.call(self).catch((e) => {
-						addErrorAttribute(self, e);
-					});
-				}, 0);
-			}
+		if (shouldUseDefaultOptionsUrl.call(self, getCurrentFilterValue.call(self))) {
+			setTimeout(() => {
+				loadDefaultOptionsFromUrl.call(self).catch((e) => {
+					addErrorAttribute(self, e);
+				});
+			}, 0);
+		} else if (shouldLoadRemoteOptions) {
+			setTimeout(() => {
+				self[cleanupOptionsListSymbol] = true;
+				filterFromRemote.call(self).catch((e) => {
+					addErrorAttribute(self, e);
+				});
+			}, 0);
 		}
 		calcAndSetOptionsDimension.call(this);
 		focusFilter.call(this);
@@ -4280,31 +4432,6 @@ function unregisterFromHost() {
 	this[hostElementSymbol].unregisterDismissable?.(this);
 }
 
-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");
-			initTotal.call(this, data);
-		})
-		.catch((e) => {
-			addErrorAttribute(this, e);
-			setStatusOrRemoveBadges.call(this, "error");
-		});
-}
-
-/**
- * @private
- */
 /**
  * @private
  */
@@ -4915,7 +5042,8 @@ function getTemplate() {
                  part="badge"
                  data-monster-attributes="
                  data-monster-value path:selection | index:value,
-                 class path:classes | index:badge,
+                 data-monster-unresolved path:selection | index:unresolved,
+                 class path:selection | index:class,
         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>

package/source/components/form/util/floating-ui.mjs

@@ -375,7 +375,8 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 		return;
 	}
 
-	if (contentElement.dataset.monsterOverflowMode === "visible") {
+	const overflowMode = contentElement.dataset.monsterOverflowMode;
+	if (overflowMode === "visible") {
 		return;
 	}
 
@@ -392,6 +393,20 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 		Number.isFinite(contentMaxHeight) && contentMaxHeight > 0
 			? Math.max(contentMaxHeight, minimumReadableHeight)
 			: contentMaxHeight;
+	const preferredContentHeight = getRequiredContentHeight(contentElement);
+
+	if (overflowMode === "horizontal" || overflowMode === "both") {
+		// Overlay-aware modes keep the parent wrapper sized to the real inline content.
+		// Nested poppers may still escape, but they must not inflate the outer popper height.
+		applyOverlayAwareContentHeight(
+			contentElement,
+			preferredContentHeight,
+			nextContentMaxHeight,
+			minimumReadableHeight,
+		);
+		syncNestedScrollContainerHeight(contentElement, nextContentMaxHeight);
+		return;
+	}
 
 	if (Number.isFinite(nextContentMaxHeight) && nextContentMaxHeight > 0) {
 		contentElement.style.maxHeight = `${nextContentMaxHeight}px`;
@@ -402,6 +417,39 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 	syncNestedScrollContainerHeight(contentElement, nextContentMaxHeight);
 }
 
+function applyOverlayAwareContentHeight(
+	contentElement,
+	preferredContentHeight,
+	contentMaxHeight,
+	minimumReadableHeight,
+) {
+	const preferredHeight =
+		Number.isFinite(preferredContentHeight) && preferredContentHeight > 0
+			? Math.max(preferredContentHeight, minimumReadableHeight)
+			: minimumReadableHeight;
+	const constrainedHeight =
+		Number.isFinite(contentMaxHeight) && contentMaxHeight > 0
+			? Math.min(preferredHeight, contentMaxHeight)
+			: preferredHeight;
+	const isConstrained =
+		Number.isFinite(contentMaxHeight) &&
+		contentMaxHeight > 0 &&
+		preferredHeight > contentMaxHeight;
+
+	contentElement.style.removeProperty("overflow");
+	contentElement.style.overflowX = "visible";
+	contentElement.style.overflowY = isConstrained ? "auto" : "visible";
+
+	if (Number.isFinite(constrainedHeight) && constrainedHeight > 0) {
+		contentElement.style.height = `${constrainedHeight}px`;
+		contentElement.style.maxHeight = `${constrainedHeight}px`;
+		return;
+	}
+
+	contentElement.style.removeProperty("height");
+	contentElement.style.removeProperty("maxHeight");
+}
+
 function getFloatingContentElement(floatingElement) {
 	for (const child of floatingElement.children) {
 		if (!(child instanceof HTMLElement)) {
@@ -628,7 +676,11 @@ function resetAdaptiveFloatingElementSize(floatingElement) {
 		return;
 	}
 
+	contentElement.style.removeProperty("height");
 	contentElement.style.removeProperty("maxHeight");
+	contentElement.style.removeProperty("overflow");
+	contentElement.style.removeProperty("overflowX");
+	contentElement.style.removeProperty("overflowY");
 
 	const nestedScrollableElement = getNestedScrollableElement(contentElement);
 	if (!(nestedScrollableElement instanceof HTMLElement)) {
@@ -659,6 +711,22 @@ function getRequiredContentWidth(contentElement) {
 	return Math.max(contentElement.scrollWidth, contentElement.clientWidth);
 }
 
+function getRequiredContentHeight(contentElement) {
+	const nestedScrollableElement = getNestedScrollableElement(contentElement);
+	if (nestedScrollableElement instanceof HTMLElement) {
+		const contentRect = contentElement.getBoundingClientRect();
+		const nestedRect = nestedScrollableElement.getBoundingClientRect();
+		const reservedHeight = Math.max(0, contentRect.height - nestedRect.height);
+		return Math.max(
+			contentElement.scrollHeight,
+			nestedScrollableElement.scrollHeight + reservedHeight,
+			contentElement.clientHeight,
+		);
+	}
+
+	return Math.max(contentElement.scrollHeight, contentElement.clientHeight);
+}
+
 function getNestedScrollableElement(contentElement) {
 	for (const child of contentElement.children) {
 		if (!(child instanceof HTMLElement)) {

package/source/components/layout/popper.mjs

@@ -293,6 +293,8 @@ class Popper extends CustomElement {
 	/**
 	 * Resolves the effective content overflow mode for the rendered wrapper.
 	 * Subclasses can override this when the configured option is only an intermediate mode.
+	 * `smart` keeps regular content measurable inside the popper while nested overlays
+	 * are allowed to escape horizontally without forcing the parent wrapper to size to them.
 	 *
 	 * @return {string}
 	 */
@@ -742,10 +744,27 @@ function applyContentOverflowMode() {
 		return;
 	}
 
-	contentElement.setAttribute(
-		"data-monster-overflow-mode",
-		this.resolveContentOverflowMode(),
-	);
+	const overflowMode = this.resolveContentOverflowMode();
+	contentElement.setAttribute("data-monster-overflow-mode", overflowMode);
+
+	switch (overflowMode) {
+		case "horizontal":
+			contentElement.style.overflow = "visible";
+			contentElement.style.removeProperty("max-height");
+			contentElement.style.removeProperty("max-width");
+			break;
+		case "both":
+		case "visible":
+			contentElement.style.overflow = "visible";
+			contentElement.style.maxHeight = "none";
+			contentElement.style.maxWidth = "none";
+			break;
+		default:
+			contentElement.style.removeProperty("overflow");
+			contentElement.style.removeProperty("max-height");
+			contentElement.style.removeProperty("max-width");
+			break;
+	}
 }
 
 /**

package/test/cases/components/form/select.mjs

@@ -33,6 +33,20 @@ let html2 = `
     </div>
 `;
 
+function createJsonResponse(data, status = 200) {
+    let headers = new Map();
+    headers.set('content-type', 'application/json');
+
+    return Promise.resolve({
+        ok: status >= 200 && status < 300,
+        status,
+        headers,
+        text: function () {
+            return Promise.resolve(JSON.stringify(data));
+        }
+    });
+}
+
 let Select,
     getDefaultSelectPopperPositionProfile,
     resolveSelectListDimension,
@@ -197,6 +211,8 @@ describe('Select', function () {
     });
 
     describe('Popper sizing', function () {
+        this.timeout(5000);
+
         afterEach(() => {
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = "";
@@ -722,25 +738,286 @@ describe('Select', function () {
 
             setTimeout(() => {
                 try {
-                    const observer = mockIntersectionObserver.getInstance();
-                    observer.enterNode();
+                    expect(lookupCount).to.equal(0);
                 } catch (e) {
                     mockIntersectionObserver.restore();
                     return done(e);
                 }
 
+                mockIntersectionObserver.restore();
+                done();
+            }, 150);
+        });
+
+        it('should not refetch after selecting an already loaded remote option', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.defaultValue', '*');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                select.fetch('https://example.com/items?filter=*&page=1')
+                    .then(() => {
+                        try {
+                            expect(requests).to.deep.equal([
+                                'https://example.com/items?filter=*&page=1'
+                            ]);
+
+                            select.value = 'alpha';
+                        } catch (e) {
+                            return done(e);
+                        }
+
+                        setTimeout(() => {
+                            try {
+                                expect(requests).to.deep.equal([
+                                    'https://example.com/items?filter=*&page=1'
+                                ]);
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            done();
+                        }, 200);
+                    })
+                    .catch((e) => done(e));
+            }, 50);
+        });
+
+        it('should reuse defaultOptionsUrl after clearing the filter and reopening', function (done) {
+            this.timeout(5000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+
+            global['fetch'] = function (url) {
+                const requestUrl = String(url);
+                requests.push(requestUrl);
+
+                if (requestUrl.indexOf('/defaults') !== -1) {
+                    return createJsonResponse({
+                        items: [
+                            {id: 'seed', name: 'Seed'}
+                        ],
+                        pagination: {
+                            total: 1,
+                            page: 1,
+                            perPage: 1
+                        }
+                    });
+                }
+
+                return createJsonResponse({
+                    items: [
+                        {id: 'match', name: 'Match'}
+                    ],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('filter.defaultOptionsUrl', 'https://example.com/defaults?page={page}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            const dispatchFilterKey = (input, code, key) => {
+                input.dispatchEvent(new KeyboardEvent('keydown', {
+                    bubbles: true,
+                    composed: true,
+                    code,
+                    key
+                }));
+            };
+
+            setTimeout(() => {
+                let container;
+                let filterInput;
+
+                try {
+                    container = select.shadowRoot.querySelector('[data-monster-role=container]');
+                    filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+                    container.click();
+                } catch (e) {
+                    return done(e);
+                }
+
                 setTimeout(() => {
                     try {
-                        expect(lookupCount).to.equal(0);
+                        expect(requests[0]).to.equal('https://example.com/defaults?page=1');
+
+                        filterInput.value = 'alpha';
+                        dispatchFilterKey(filterInput, 'KeyA', 'a');
+                    } catch (e) {
+                        return done(e);
+                    }
+
+                    setTimeout(() => {
+                        try {
+                            expect(requests[1]).to.equal('https://example.com/items?filter=alpha&page=1');
+
+                            filterInput.value = '';
+                            dispatchFilterKey(filterInput, 'Backspace', 'Backspace');
+                        } catch (e) {
+                            return done(e);
+                        }
+
+                        setTimeout(() => {
+                            try {
+                                expect(requests[2]).to.equal('https://example.com/defaults?page=1');
+
+                                container.click();
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            setTimeout(() => {
+                                try {
+                                    container.click();
+                                } catch (e) {
+                                    return done(e);
+                                }
+
+                                setTimeout(() => {
+                                    try {
+                                        expect(requests[3]).to.equal('https://example.com/defaults?page=1');
+                                    } catch (e) {
+                                        return done(e);
+                                    }
+
+                                    done();
+                                }, 250);
+                            }, 50);
+                        }, 300);
+                    }, 300);
+                }, 250);
+            }, 50);
+        });
+
+        it('should keep unresolved lookup values visible and mark their badge', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: 'missing-key'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                    const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                    expect(badge).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel.textContent.trim()).to.equal('missing-key');
+                    expect(badge.className).to.contain('monster-badge-warning');
+                    expect(badge.className).to.not.contain('monster-badge-primary');
+                    expect(badge.getAttribute('data-monster-unresolved')).to.equal('true');
+                    expect(badgeLabel.textContent).to.not.contain(select.getOption('labels.cannot-be-loaded'));
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 250);
+        });
+
+        it('should clear the unresolved badge state once a local option can resolve the value', function (done) {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: 'missing-key'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                select.setOption('options', [{label: 'Resolved Label', value: 'missing-key'}]);
+                select.value = 'missing-key';
+
+                setTimeout(() => {
+                    try {
+                        const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                        const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                        expect(badge).to.be.instanceof(HTMLDivElement);
+                        expect(badgeLabel.textContent.trim()).to.equal('Resolved Label');
+                        expect(badge.className).to.contain('monster-badge-primary');
+                        expect(badge.className).to.not.contain('monster-badge-warning');
+                        expect(badge.getAttribute('data-monster-unresolved')).to.not.equal('true');
                     } catch (e) {
-                        mockIntersectionObserver.restore();
                         return done(e);
                     }
 
-                    mockIntersectionObserver.restore();
                     done();
                 }, 150);
-            }, 50);
+            }, 250);
         });
 
         it('should not throw when IntersectionObserver is unavailable', function (done) {