@schukai/monster 4.148.0 → 4.148.1

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.148.0"}
+{"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.148.1"}

package/source/components/form/select.mjs

@@ -323,6 +323,8 @@ const lookupCacheSymbol = Symbol("lookupCache");
 const lookupInProgressSymbol = Symbol("lookupInProgress");
 const unresolvedSelectionValuesSymbol = Symbol("unresolvedSelectionValues");
 const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
+const remoteLifecycleVersionSymbol = Symbol("remoteLifecycleVersion");
+const activeFetchRequestsSymbol = Symbol("activeFetchRequests");
 const remoteInfoRequestSymbol = Symbol("remoteInfoRequest");
 const remoteInfoStableMessageSymbol = Symbol("remoteInfoStableMessage");
 
@@ -419,6 +421,8 @@ class Select extends CustomControl {
 		this[lookupInProgressSymbol] = new Map();
 		this[unresolvedSelectionValuesSymbol] = new Set();
 		this[optionsMapSymbol] = new Map();
+		this[remoteLifecycleVersionSymbol] = 0;
+		this[activeFetchRequestsSymbol] = new Set();
 		this[closeOnSelectAutoSymbol] = true;
 		initOptionObserver.call(this);
 	}
@@ -720,6 +724,7 @@ class Select extends CustomControl {
 	 */
 	reset() {
 		try {
+			invalidatePendingRemoteWork.call(this);
 			hide.call(this);
 
 			// Clear the lookup cache
@@ -963,6 +968,8 @@ class Select extends CustomControl {
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		invalidatePendingRemoteWork.call(this);
+		hide.call(this, false);
 		clearPendingOpenIntent.call(this);
 		if (!this[usesHostDismissSymbol]) {
 			const document = getDocument();
@@ -2021,6 +2028,65 @@ function runSelectionLookupWhenVisible(self) {
 function isEmptyLookupValue(value) {
 	return isValueIsEmpty.call(this, value);
 }
+
+function getRemoteLifecycleVersion() {
+	return Number.isInteger(this[remoteLifecycleVersionSymbol])
+		? this[remoteLifecycleVersionSymbol]
+		: 0;
+}
+
+function isRemoteLifecycleCurrent(version) {
+	return getRemoteLifecycleVersion.call(this) === version;
+}
+
+function invalidatePendingRemoteWork() {
+	this[remoteLifecycleVersionSymbol] = getRemoteLifecycleVersion.call(this) + 1;
+	this[fetchRequestVersionSymbol] =
+		(Number.isInteger(this[fetchRequestVersionSymbol])
+			? this[fetchRequestVersionSymbol]
+			: 0) + 1;
+
+	if (this[activeFetchRequestsSymbol] instanceof Set) {
+		this[activeFetchRequestsSymbol].clear();
+	}
+	this[isLoadingSymbol] = false;
+	this[remoteInfoRequestSymbol] = null;
+
+	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
+		try {
+			this[keyFilterEventSymbol].defuse();
+		} catch (e) {}
+		delete this[keyFilterEventSymbol];
+	}
+}
+
+function beginTrackedFetch() {
+	if (!(this[activeFetchRequestsSymbol] instanceof Set)) {
+		this[activeFetchRequestsSymbol] = new Set();
+	}
+
+	const token = {};
+	this[activeFetchRequestsSymbol].add(token);
+	this[isLoadingSymbol] = true;
+	return token;
+}
+
+function isTrackedFetchActive(token) {
+	return (
+		this[activeFetchRequestsSymbol] instanceof Set &&
+		this[activeFetchRequestsSymbol].has(token)
+	);
+}
+
+function finishTrackedFetch(token) {
+	if (this[activeFetchRequestsSymbol] instanceof Set) {
+		this[activeFetchRequestsSymbol].delete(token);
+		this[isLoadingSymbol] = this[activeFetchRequestsSymbol].size > 0;
+		return;
+	}
+
+	this[isLoadingSymbol] = false;
+}
 /**
  *
  * @param url
@@ -2029,6 +2095,7 @@ function isEmptyLookupValue(value) {
  */
 function fetchIt(url, controlOptions) {
 	const self = this;
+	const lifecycleVersion = getRemoteLifecycleVersion.call(this);
 
 	if (url instanceof URL) {
 		url = url.toString();
@@ -2066,7 +2133,10 @@ function fetchIt(url, controlOptions) {
 			fetchData
 				.call(this, url)
 				.then((map) => {
-					if (requestVersion !== this[fetchRequestVersionSymbol]) {
+					if (
+						requestVersion !== this[fetchRequestVersionSymbol] ||
+						!isRemoteLifecycleCurrent.call(this, lifecycleVersion)
+					) {
 						resolve();
 						return;
 					}
@@ -2088,6 +2158,13 @@ function fetchIt(url, controlOptions) {
 						this[lastFetchedDataSymbol] = map;
 
 						queueMicrotask(() => {
+							if (
+								requestVersion !== this[fetchRequestVersionSymbol] ||
+								!isRemoteLifecycleCurrent.call(this, lifecycleVersion)
+							) {
+								resolve();
+								return;
+							}
 							checkOptionState.call(this);
 							if (
 								getFilterMode.call(this) === FILTER_MODE_REMOTE &&
@@ -2112,7 +2189,10 @@ function fetchIt(url, controlOptions) {
 					reject(new Error("invalid response"));
 				})
 				.catch((e) => {
-					if (requestVersion !== this[fetchRequestVersionSymbol]) {
+					if (
+						requestVersion !== this[fetchRequestVersionSymbol] ||
+						!isRemoteLifecycleCurrent.call(this, lifecycleVersion)
+					) {
 						resolve();
 						return;
 					}
@@ -2125,6 +2205,10 @@ function fetchIt(url, controlOptions) {
 		})
 			.run()
 			.catch((e) => {
+				if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+					resolve();
+					return;
+				}
 				setStatusOrRemoveBadges.call(this, "error");
 				addErrorAttribute(this, e);
 				clearOptionsOnError.call(this);
@@ -2852,6 +2936,8 @@ function buildSelectionItem(value, preferredLabel) {
  * @returns {Promise<void>}
  */
 async function lookupValueAndCache(value) {
+	const lifecycleVersion = getRemoteLifecycleVersion.call(this);
+	const lookupToken = {};
 	const lookupUrl = this.getOption("lookup.url");
 	const lookupValue = getSelectionValueLabel.call(this, value);
 	const cacheKey = getSelectionCacheKey.call(this, value);
@@ -2875,7 +2961,7 @@ async function lookupValueAndCache(value) {
 	let found = false;
 	let refreshSelection = false;
 	try {
-		this[lookupInProgressSymbol].set(value, true);
+		this[lookupInProgressSymbol].set(value, lookupToken);
 
 		const markerOpen = this.getOption("filter.marker.open", "{");
 		const markerClose = this.getOption("filter.marker.close", "}");
@@ -2885,6 +2971,9 @@ async function lookupValueAndCache(value) {
 		);
 
 		const data = await fetchData.call(this, url);
+		if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+			return;
+		}
 
 		const mappingOptions = this.getOption("mapping", {});
 		const map = buildMap(
@@ -2932,6 +3021,9 @@ async function lookupValueAndCache(value) {
 			refreshSelection = true;
 		}
 	} catch (e) {
+		if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+			return;
+		}
 		hasError = true;
 		addErrorAttribute(this, e);
 
@@ -2944,16 +3036,19 @@ async function lookupValueAndCache(value) {
 			refreshSelection = true;
 		}
 	} finally {
-		this[lookupInProgressSymbol].delete(value);
-
-		if (refreshSelection) {
-			await setSelection.call(this, this.getOption("selection"));
+		if (this[lookupInProgressSymbol].get(value) === lookupToken) {
+			this[lookupInProgressSymbol].delete(value);
 		}
+		if (isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+			if (refreshSelection) {
+				await setSelection.call(this, this.getOption("selection"));
+			}
 
-		if (hasError) {
-			setStatusOrRemoveBadges.call(this, "error");
-		} else {
-			setStatusOrRemoveBadges.call(this);
+			if (hasError) {
+				setStatusOrRemoveBadges.call(this, "error");
+			} else {
+				setStatusOrRemoveBadges.call(this);
+			}
 		}
 	}
 }
@@ -3573,11 +3668,14 @@ function resolveSelectViewportMetrics({
 	offsetTop = 0,
 	padding = SELECT_VIEWPORT_PADDING,
 }) {
+	const hasVisualWidth = Number.isFinite(visualWidth) && visualWidth > 0;
+	const hasVisualHeight = Number.isFinite(visualHeight) && visualHeight > 0;
+
 	return {
-		width: Math.max(layoutWidth, visualWidth),
-		height: Math.max(layoutHeight, visualHeight),
-		left: offsetLeft,
-		top: offsetTop,
+		width: hasVisualWidth ? visualWidth : Math.max(0, layoutWidth),
+		height: hasVisualHeight ? visualHeight : Math.max(0, layoutHeight),
+		left: hasVisualWidth ? offsetLeft : 0,
+		top: hasVisualHeight ? offsetTop : 0,
 		padding,
 	};
 }
@@ -3676,6 +3774,7 @@ function getSelectPopperPositionOptions() {
 	}
 
 	popperOptions.adaptiveSize = false;
+	popperOptions.hideWhenReferenceHidden = true;
 
 	if (
 		resolveParentPopperContentBoundary(
@@ -4090,7 +4189,12 @@ function filterFromRemoteByValue(
 	openPopper,
 	formatOptions = {},
 ) {
+	const lifecycleVersion = getRemoteLifecycleVersion.call(this);
+
 	return new Processing(() => {
+		if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+			return;
+		}
 		let url = formatURL.call(this, optionUrl, params, formatOptions);
 
 		if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
@@ -4104,12 +4208,18 @@ function filterFromRemoteByValue(
 				disableHiding: true,
 			})
 			.then(() => {
+				if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+					return;
+				}
 				checkOptionState.call(this);
 				if (openPopper === true) {
 					show.call(this);
 				}
 			})
 			.catch((e) => {
+				if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+					return;
+				}
 				if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
 					this.setOption("total", null);
 					resetPaginationState.call(this);
@@ -4897,31 +5007,24 @@ function setSelection(selection) {
  * @throws {TypeError} unsupported response
  */
 function fetchData(url) {
-	const self = this;
 	if (!url) url = this.getOption("url");
 	if (!url) return Promise.resolve();
 
 	const fetchOptions = this.getOption("fetch", {});
-
-	let delayWatch = false;
+	const fetchToken = beginTrackedFetch.call(this);
 
 	// if fetch short time, do not show loading badge, because of flickering
 	requestAnimationFrame(() => {
-		if (delayWatch === true) return;
+		if (!isTrackedFetchActive.call(this, fetchToken)) return;
 		setStatusOrRemoveBadges.call(this, "loading");
-		delayWatch = true;
 	});
 
 	url = formatURL.call(this, url);
 
-	self[isLoadingSymbol] = true;
 	const global = getGlobal();
-	return global
-		.fetch(url, fetchOptions)
+	return Promise.resolve()
+		.then(() => global.fetch(url, fetchOptions))
 		.then((response) => {
-			self[isLoadingSymbol] = false;
-			delayWatch = true;
-
 			if (!(response.status >= 200 && response.status < 300)) {
 				throw new Error(`HTTP error! status: ${response.status}`);
 			}
@@ -4940,23 +5043,24 @@ function fetchData(url) {
 				throw new TypeError("the result cannot be parsed, check the URL");
 			}
 		})
-		.catch((e) => {
-			self[isLoadingSymbol] = false;
-			delayWatch = true;
-			throw e;
+		.finally(() => {
+			finishTrackedFetch.call(this, fetchToken);
 		});
 }
 
 /**
  * @private
+ * @param {boolean} updateStatus
  */
-function hide() {
+function hide(updateStatus = true) {
 	clearPendingOpenIntent.call(this);
 	cancelFloatingLayout(this[popperElementSymbol]);
 	resetSelectPopperDimensionStyles.call(this);
 	closePositionedPopper(this[popperElementSymbol]);
 	unlockControlBarSelectHostWidthAfterOpenPopper.call(this);
-	setStatusOrRemoveBadges.call(this, "closed");
+	if (updateStatus) {
+		setStatusOrRemoveBadges.call(this, "closed");
+	}
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
 	unregisterFromHost.call(this);
 }
@@ -5080,8 +5184,10 @@ function show() {
  * @return {boolean}
  */
 function isInControlBar() {
-	return this.closest("monster-control-bar,monster-button-bar") instanceof
-		HTMLElement;
+	return (
+		this.closest("monster-control-bar,monster-button-bar") instanceof
+		HTMLElement
+	);
 }
 
 /**
@@ -5138,6 +5244,8 @@ function unregisterFromHost() {
  * @private
  */
 function initTotal() {
+	const lifecycleVersion = getRemoteLifecycleVersion.call(this);
+
 	if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
 		return;
 	}
@@ -5169,6 +5277,9 @@ function initTotal() {
 	const remoteInfoRequest = getGlobal()
 		.fetch(url, fetchOptions)
 		.then((response) => {
+			if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+				return;
+			}
 			if (!response.ok) {
 				addErrorAttribute(
 					this,
@@ -5179,6 +5290,9 @@ function initTotal() {
 			return response.text();
 		})
 		.then((text) => {
+			if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+				return;
+			}
 			if (!text) return;
 			try {
 				const data = JSON.parse(String(text));
@@ -5189,6 +5303,9 @@ function initTotal() {
 			}
 		})
 		.catch((e) => {
+			if (!isRemoteLifecycleCurrent.call(this, lifecycleVersion)) {
+				return;
+			}
 			addErrorAttribute(this, e);
 		})
 		.finally(() => {

package/source/components/form/util/floating-layout-queue.mjs

@@ -49,6 +49,9 @@ function enqueueFloatingLayout({
 	}
 
 	let job = jobs.get(popperElement);
+	if (job?.cancelled === true) {
+		return Promise.resolve();
+	}
 	if (!job) {
 		job = createJob(popperElement);
 		jobs.set(popperElement, job);
@@ -84,8 +87,12 @@ function cancelFloatingLayout(popperElement) {
 	}
 
 	job.cancelled = true;
+	job.pending = false;
+	job.reasons = 0;
 	job.resolve();
-	jobs.delete(popperElement);
+	if (!job.running) {
+		jobs.delete(popperElement);
+	}
 }
 
 function flushFloatingLayoutQueueForTests() {
@@ -175,21 +182,25 @@ async function flushQueue() {
 	}
 
 	flushing = true;
-	const currentJobs = Array.from(jobs.values());
-
-	for (const job of currentJobs) {
-		await flushJob(job);
-	}
-
-	flushing = false;
+	try {
+		const currentJobs = Array.from(jobs.values());
 
-	if (Array.from(jobs.values()).some((job) => job.pending && !job.cancelled)) {
-		for (const job of jobs.values()) {
-			if (job.pending) {
-				job.pending = false;
+		for (const job of currentJobs) {
+			await flushJob(job);
+		}
+	} finally {
+		flushing = false;
+
+		if (
+			Array.from(jobs.values()).some((job) => job.pending && !job.cancelled)
+		) {
+			for (const job of jobs.values()) {
+				if (job.pending) {
+					job.pending = false;
+				}
 			}
+			scheduleQueueFlush();
 		}
-		scheduleQueueFlush();
 	}
 }
 
@@ -227,14 +238,23 @@ async function flushJob(job) {
 		}
 	} finally {
 		job.running = false;
-		recordLayoutSignature(job);
-		if (job.pending && shouldSuppressOscillatingPendingLayout(job)) {
+		if (job.cancelled) {
 			job.pending = false;
 			job.reasons = 0;
-		}
-		if (!job.pending && job.reasons === 0) {
 			job.resolve();
-			jobs.delete(job.popperElement);
+			if (jobs.get(job.popperElement) === job) {
+				jobs.delete(job.popperElement);
+			}
+		} else {
+			recordLayoutSignature(job);
+			if (job.pending && shouldSuppressOscillatingPendingLayout(job)) {
+				job.pending = false;
+				job.reasons = 0;
+			}
+			if (!job.pending && job.reasons === 0) {
+				job.resolve();
+				jobs.delete(job.popperElement);
+			}
 		}
 	}
 }

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

@@ -33,6 +33,7 @@ import {
 
 export {
 	applyAdaptiveFloatingElementSize,
+	applyFloatingReferenceVisibility,
 	closePositionedPopper,
 	createVisibilityRecoveryConfig,
 	getFloatingVisibleRatio,
@@ -106,8 +107,7 @@ function enableFloatingPositioning(controlElement, popperElement, config) {
 
 		enqueueFloatingLayout({
 			popperElement,
-			reason:
-				FLOATING_LAYOUT_REASON.POSITION | FLOATING_LAYOUT_REASON.RESIZE,
+			reason: FLOATING_LAYOUT_REASON.POSITION | FLOATING_LAYOUT_REASON.RESIZE,
 			isActive: () => isPositionedPopperOpen(popperElement),
 			position: () => {
 				runFloatingUpdateHook(popperElement);
@@ -177,6 +177,13 @@ function syncFloatingPopover(
 		if (!isPositionedPopperOpen(popperElement)) {
 			return;
 		}
+		if (
+			config.hideWhenReferenceHidden === true &&
+			!applyFloatingReferenceVisibility(controlElement, popperElement)
+		) {
+			visibilityRecoveryMap.delete(popperElement);
+			return;
+		}
 
 		Object.assign(popperElement.style, {
 			top: "0",
@@ -202,12 +209,49 @@ function syncFloatingPopover(
 	});
 }
 
+function applyFloatingReferenceVisibility(referenceElement, popperElement) {
+	if (!(popperElement instanceof HTMLElement)) {
+		return true;
+	}
+
+	const referenceRect =
+		referenceElement instanceof HTMLElement
+			? referenceElement.getBoundingClientRect()
+			: null;
+	const referenceArea = referenceRect
+		? referenceRect.width * referenceRect.height
+		: 0;
+	let referenceHidden = false;
+	if (referenceElement instanceof HTMLElement && referenceArea > 0) {
+		referenceHidden = !getVisibleElementRect(referenceElement, referenceRect);
+	} else if (referenceElement instanceof HTMLElement) {
+		const referenceStyle = getComputedStyle(referenceElement);
+		referenceHidden =
+			referenceStyle.display === "none" ||
+			referenceStyle.visibility === "hidden";
+	}
+
+	if (referenceHidden) {
+		popperElement.dataset.monsterReferenceHidden = "true";
+		popperElement.style.visibility = "hidden";
+		return false;
+	}
+
+	if (popperElement.dataset.monsterReferenceHidden === "true") {
+		delete popperElement.dataset.monsterReferenceHidden;
+		popperElement.style.removeProperty("visibility");
+	}
+
+	return true;
+}
+
 function closePositionedPopper(popperElement) {
 	cancelFloatingLayout(popperElement);
 	stopAutoUpdate(popperElement);
 	cancelFloatingAppearanceFrame(popperElement);
 	visibilityRecoveryMap.delete(popperElement);
 	delete popperElement.dataset.monsterAppearance;
+	delete popperElement.dataset.monsterReferenceHidden;
 	popperElement.style.display = "none";
 	popperElement.style.removeProperty("visibility");
 	popperElement.style.removeProperty("position");
@@ -226,6 +270,7 @@ function normalizePopperConfig(options, controlElement, popperElement) {
 			engine: "floating",
 			strategy: "absolute",
 			adaptiveSize: true,
+			hideWhenReferenceHidden: false,
 		},
 		options,
 	);
@@ -423,7 +468,7 @@ function getFloatingVisibleRatio(floatingElement) {
 		return 1;
 	}
 
-	const visibleRect = getVisibleFloatingRect(floatingElement, rect);
+	const visibleRect = getVisibleElementRect(floatingElement, rect);
 	if (!visibleRect) {
 		return 0;
 	}
@@ -432,13 +477,26 @@ function getFloatingVisibleRatio(floatingElement) {
 	return Math.max(0, Math.min(1, visibleArea / area));
 }
 
-function getVisibleFloatingRect(floatingElement, rect) {
+function getVisibleElementRect(element, rect) {
 	let visibleRect = normalizeRect(rect);
+	const visualViewport = window.visualViewport;
+	const viewportLeft = visualViewport?.offsetLeft || 0;
+	const viewportTop = visualViewport?.offsetTop || 0;
+	const viewportWidth =
+		visualViewport?.width ||
+		window.innerWidth ||
+		document.documentElement.clientWidth ||
+		0;
+	const viewportHeight =
+		visualViewport?.height ||
+		window.innerHeight ||
+		document.documentElement.clientHeight ||
+		0;
 	const viewportRect = {
-		top: 0,
-		left: 0,
-		right: window.innerWidth || document.documentElement.clientWidth || 0,
-		bottom: window.innerHeight || document.documentElement.clientHeight || 0,
+		top: viewportTop,
+		left: viewportLeft,
+		right: viewportLeft + viewportWidth,
+		bottom: viewportTop + viewportHeight,
 	};
 	viewportRect.width = Math.max(0, viewportRect.right - viewportRect.left);
 	viewportRect.height = Math.max(0, viewportRect.bottom - viewportRect.top);
@@ -448,7 +506,7 @@ function getVisibleFloatingRect(floatingElement, rect) {
 		return null;
 	}
 
-	for (const clippingContainer of getFloatingClippingContainers(floatingElement)) {
+	for (const clippingContainer of getFloatingClippingContainers(element)) {
 		visibleRect = intersectRects(
 			visibleRect,
 			normalizeRect(clippingContainer.getBoundingClientRect()),
@@ -483,9 +541,7 @@ function normalizeRect(rect) {
 	const left = Number.isFinite(rect.left) ? rect.left : rect.x || 0;
 	const top = Number.isFinite(rect.top) ? rect.top : rect.y || 0;
 	const right = Number.isFinite(rect.right) ? rect.right : left + rect.width;
-	const bottom = Number.isFinite(rect.bottom)
-		? rect.bottom
-		: top + rect.height;
+	const bottom = Number.isFinite(rect.bottom) ? rect.bottom : top + rect.height;
 
 	return {
 		top,

package/test/cases/components/form/floating-ui.mjs

@@ -5,6 +5,7 @@ let expect = chai.expect;
 
 let resolveClippingBoundaryElement;
 let applyAdaptiveFloatingElementSize;
+let applyFloatingReferenceVisibility;
 let createVisibilityRecoveryConfig;
 let getFloatingVisibleRatio;
 
@@ -19,6 +20,7 @@ describe("form floating-ui boundary resolution", function () {
 			.then((m) => {
 				resolveClippingBoundaryElement = m.resolveClippingBoundaryElement;
 				applyAdaptiveFloatingElementSize = m.applyAdaptiveFloatingElementSize;
+				applyFloatingReferenceVisibility = m.applyFloatingReferenceVisibility;
 				createVisibilityRecoveryConfig = m.createVisibilityRecoveryConfig;
 				getFloatingVisibleRatio = m.getFloatingVisibleRatio;
 				done();
@@ -169,7 +171,8 @@ describe("form floating-ui boundary resolution", function () {
 
 		popper.style.maxHeight = "300px";
 		content.setAttribute("part", "content");
-		content.textContent = "A long help text that still needs one readable line.";
+		content.textContent =
+			"A long help text that still needs one readable line.";
 		content.style.fontSize = "16px";
 		content.style.lineHeight = "24px";
 		popper.appendChild(content);
@@ -476,4 +479,48 @@ describe("form floating-ui boundary resolution", function () {
 			"arrow",
 		]);
 	});
+
+	it("should hide a floating element while its reference is clipped", function () {
+		const reference = document.createElement("div");
+		const popper = document.createElement("div");
+		reference.getBoundingClientRect = () => ({
+			top: -100,
+			left: 10,
+			right: 110,
+			bottom: -50,
+			width: 100,
+			height: 50,
+			x: 10,
+			y: -100,
+		});
+
+		const visible = applyFloatingReferenceVisibility(reference, popper);
+
+		expect(visible).to.equal(false);
+		expect(popper.style.visibility).to.equal("hidden");
+		expect(popper.dataset.monsterReferenceHidden).to.equal("true");
+	});
+
+	it("should restore a floating element when its reference is visible again", function () {
+		const reference = document.createElement("div");
+		const popper = document.createElement("div");
+		reference.getBoundingClientRect = () => ({
+			top: 10,
+			left: 10,
+			right: 110,
+			bottom: 60,
+			width: 100,
+			height: 50,
+			x: 10,
+			y: 10,
+		});
+		popper.dataset.monsterReferenceHidden = "true";
+		popper.style.visibility = "hidden";
+
+		const visible = applyFloatingReferenceVisibility(reference, popper);
+
+		expect(visible).to.equal(true);
+		expect(popper.style.visibility).to.equal("");
+		expect(popper.dataset.monsterReferenceHidden).to.equal(undefined);
+	});
 });

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

@@ -86,6 +86,17 @@ function waitForCondition(check, {timeout = 4000, interval = 25} = {}) {
     });
 }
 
+function configureRemotePaginatedSelect(select) {
+    select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+    select.setOption('filter.mode', 'remote');
+    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');
+}
+
 let Select,
     SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
@@ -397,6 +408,46 @@ describe('Select', function () {
         }
     });
 
+    it('should keep the floating layout queue usable after cancelling a running reentrant job', async function () {
+        const cancelledPopper = document.createElement('div');
+        const nextPopper = document.createElement('div');
+        const releasePosition = createDeferred();
+        let positionStarted = false;
+        let positionFinished = false;
+        let nextMutationCount = 0;
+
+        enqueueFloatingLayout({
+            popperElement: cancelledPopper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            position: async () => {
+                positionStarted = true;
+                await releasePosition.promise;
+                await enqueueFloatingLayout({
+                    popperElement: cancelledPopper,
+                    reason: FLOATING_LAYOUT_REASON.SETTLE
+                });
+                positionFinished = true;
+            }
+        });
+
+        await waitForCondition(() => positionStarted === true);
+        cancelFloatingLayout(cancelledPopper);
+        releasePosition.resolve();
+        await waitForCondition(() => positionFinished === true);
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        enqueueFloatingLayout({
+            popperElement: nextPopper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            mutate: () => {
+                nextMutationCount += 1;
+            }
+        });
+        await flushFloatingLayoutQueueForTests();
+
+        expect(nextMutationCount).to.equal(1);
+    });
+
     it('should flush reentrant floating layout queue jobs through the watchdog', async function () {
         const originalRequestAnimationFrame = global.requestAnimationFrame;
         const originalCancelAnimationFrame = global.cancelAnimationFrame;
@@ -738,7 +789,7 @@ describe('Select', function () {
             expect(popper.style.display).to.equal('block');
         });
 
-        it('should allow the popper to become wider than a narrow control', function (done) {
+        it('should allow the popper to become wider than a narrow control', async function () {
             const mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
 
@@ -764,23 +815,12 @@ describe('Select', function () {
                 y: 100
             });
 
-            setTimeout(() => {
-                try {
-                    shadowRoot.querySelector('[data-monster-role=container]').click();
-                    setTimeout(() => {
-                        try {
-                            expect(popper.style.minWidth).to.equal('240px');
-                            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
-                            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
-                            done();
-                        } catch (e) {
-                            done(e);
-                        }
-                    }, 80);
-                } catch (e) {
-                    done(e);
-                }
-            }, 20);
+            await new Promise(resolve => setTimeout(resolve, 20));
+            shadowRoot.querySelector('[data-monster-role=container]').click();
+            await waitForCondition(() => popper.style.minWidth === '240px');
+
+            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
+            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
         });
 
         it('should use fixed positioning inside a control bar', function (done) {
@@ -1136,12 +1176,48 @@ describe('Select', function () {
             ]);
         });
 
-        it('should prefer the larger live viewport metrics after a resize', function () {
+        it('should use the reduced visual viewport while a soft keyboard is open', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 390,
+                layoutHeight: 844,
+                visualWidth: 390,
+                visualHeight: 480,
+                offsetLeft: 0,
+                offsetTop: 0,
+                padding: 12
+            });
+
+            expect(result.width).to.equal(390);
+            expect(result.height).to.equal(480);
+            expect(result.left).to.equal(0);
+            expect(result.top).to.equal(0);
+            expect(result.padding).to.equal(12);
+        });
+
+        it('should preserve visual viewport offsets for zoomed mobile layouts', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 1200,
+                layoutHeight: 900,
+                visualWidth: 600,
+                visualHeight: 450,
+                offsetLeft: 20,
+                offsetTop: 30,
+                padding: 12
+            });
+
+            expect(result.width).to.equal(600);
+            expect(result.height).to.equal(450);
+            expect(result.left).to.equal(20);
+            expect(result.top).to.equal(30);
+            expect(result.padding).to.equal(12);
+        });
+
+        it('should fall back to layout viewport metrics without a visual viewport', function () {
             const result = resolveSelectViewportMetrics({
                 layoutWidth: 1400,
                 layoutHeight: 900,
-                visualWidth: 1024,
-                visualHeight: 700,
+                visualWidth: 0,
+                visualHeight: 0,
                 offsetLeft: 20,
                 offsetTop: 30,
                 padding: 12
@@ -1149,8 +1225,8 @@ describe('Select', function () {
 
             expect(result.width).to.equal(1400);
             expect(result.height).to.equal(900);
-            expect(result.left).to.equal(20);
-            expect(result.top).to.equal(30);
+            expect(result.left).to.equal(0);
+            expect(result.top).to.equal(0);
             expect(result.padding).to.equal(12);
         });
 
@@ -1487,6 +1563,142 @@ describe('Select', function () {
                     .catch((e) => done(e));
             }, 50);
         });
+
+        it('should ignore a remote page response that settles after reset', async function () {
+            this.timeout(5000);
+
+            const deferredResponse = createDeferred();
+            let requestStarted = false;
+            global['fetch'] = function () {
+                requestStarted = true;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request = select.fetch('https://example.com/items?filter=old&page=3');
+            await waitForCondition(() => requestStarted === true);
+
+            select.reset();
+            await waitForCondition(() => {
+                return select.getOption('options').length === 0 && select.getOption('total') === null;
+            });
+
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'old-3', name: 'Old page 3'}],
+                    pagination: {
+                        total: 9,
+                        page: 3,
+                        perPage: 1
+                    }
+                })
+            );
+            await request;
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+            expect(pagination.style.display).to.equal('none');
+            expect(pagination.getOption('currentPage')).to.equal(null);
+            expect(pagination.getOption('pages')).to.equal(null);
+        });
+
+        it('should ignore a remote page response after disconnect and reconnect', async function () {
+            this.timeout(5000);
+
+            const deferredResponse = createDeferred();
+            let requestStarted = false;
+            global['fetch'] = function () {
+                requestStarted = true;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request = select.fetch('https://example.com/items?filter=old&page=2');
+            await waitForCondition(() => requestStarted === true);
+
+            select.remove();
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'old-2', name: 'Old page 2'}],
+                    pagination: {
+                        total: 4,
+                        page: 2,
+                        perPage: 1
+                    }
+                })
+            );
+            await request;
+            mocks.appendChild(select);
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+            expect(pagination.style.display).to.equal('none');
+            expect(pagination.getOption('currentPage')).to.equal(null);
+            expect(pagination.getOption('pages')).to.equal(null);
+        });
+
+        it('should keep the newest remote page when responses settle out of order', async function () {
+            this.timeout(5000);
+
+            const page2Response = createDeferred();
+            const page3Response = createDeferred();
+            const requests = [];
+            global['fetch'] = function (url) {
+                const requestUrl = String(url);
+                requests.push(requestUrl);
+                return requestUrl.includes('page=2') ? page2Response.promise : page3Response.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request2 = select.fetch('https://example.com/items?filter=all&page=2');
+            const request3 = select.fetch('https://example.com/items?filter=all&page=3');
+            await waitForCondition(() => requests.length === 2);
+
+            page3Response.resolve(
+                await createJsonResponse({
+                    items: [{id: 'page-3', name: 'Page 3'}],
+                    pagination: {
+                        total: 3,
+                        page: 3,
+                        perPage: 1
+                    }
+                })
+            );
+            await request3;
+
+            page2Response.resolve(
+                await createJsonResponse({
+                    items: [{id: 'page-2', name: 'Page 2'}],
+                    pagination: {
+                        total: 3,
+                        page: 2,
+                        perPage: 1
+                    }
+                })
+            );
+            await request2;
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['page-3']);
+            expect(pagination.getOption('currentPage')).to.equal(3);
+            expect(pagination.getOption('pages')).to.equal(3);
+        });
     });
 
     describe('document.createElement()', function () {
@@ -2488,6 +2700,47 @@ describe('Select', function () {
             expect(requests).to.have.length(1);
         });
 
+        it('should cancel a pending remote filter request on reset', async function () {
+            this.timeout(5000);
+
+            const 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');
+            configureRemotePaginatedSelect(select);
+            select.setOption('filter.position', 'popper');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            filterInput.value = 'alpha';
+            filterInput.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+            select.reset();
+
+            await new Promise(resolve => setTimeout(resolve, 260));
+
+            expect(requests).to.deep.equal([]);
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+        });
+
         it('should keep unresolved lookup values visible and mark their badge', function (done) {
             this.timeout(3000);