@schukai/monster 4.148.3 → 4.148.5

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.3"}
+{"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.5"}

package/source/components/datatable/constants.mjs

@@ -20,6 +20,22 @@ import { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
  */
 const STYLE_DISPLAY_MODE_BLOCK = "block";
 
+/**
+ * Datasource lifecycle operation for read requests.
+ *
+ * @since 4.148.5
+ * @type {string}
+ */
+const DATASOURCE_OPERATION_READ = "read";
+
+/**
+ * Datasource lifecycle operation for write requests.
+ *
+ * @since 4.148.5
+ * @type {string}
+ */
+const DATASOURCE_OPERATION_WRITE = "write";
+
 /**
  * This attribute `data-monster-datasource` can be used to pass a datasource.
  *
@@ -105,6 +121,8 @@ const ATTRIBUTE_DATATABLE_MODE_HIDDEN = "hidden";
 const ATTRIBUTE_DATATABLE_MODE_VISIBLE = "visible";
 
 export {
+	DATASOURCE_OPERATION_READ,
+	DATASOURCE_OPERATION_WRITE,
 	ATTRIBUTE_DATASOURCE,
 	ATTRIBUTE_DATASOURCE_SELECTOR,
 	ATTRIBUTE_DATASOURCE_ARGUMENTS,

package/source/components/datatable/datasource/rest.mjs

@@ -31,6 +31,10 @@ import { Observer } from "../../../types/observer.mjs";
 import { Pathfinder } from "../../../data/pathfinder.mjs";
 import { fireCustomEvent } from "../../../dom/events.mjs";
 import { isArray, isFunction, isObject, isString } from "../../../types/is.mjs";
+import {
+	DATASOURCE_OPERATION_READ,
+	DATASOURCE_OPERATION_WRITE,
+} from "../constants.mjs";
 
 export { Rest };
 
@@ -318,6 +322,9 @@ class Rest extends Datasource {
 	 * @fires monster-datasource-fetch
 	 * @fires monster-datasource-fetched
 	 * @fires monster-datasource-error
+	 * @fires monster-datasource-validation
+	 * @description Lifecycle event details contain `datasource` and
+	 * `operation: "read"` for this request.
 	 */
 	read() {
 		const opt = clone(this.getOption("read"));
@@ -372,6 +379,7 @@ class Rest extends Datasource {
 		return new Promise((resolve, reject) => {
 			fireCustomEvent(this, "monster-datasource-fetch", {
 				datasource: this,
+				operation: DATASOURCE_OPERATION_READ,
 			});
 
 			queueMicrotask(() => {
@@ -381,15 +389,18 @@ class Rest extends Datasource {
 						if (this[readRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-fetched", {
 								datasource: this,
+								operation: DATASOURCE_OPERATION_READ,
 							});
 						}
 
 						resolve(response);
 					})
 					.catch((error) => {
-						handleValidationError.call(this, error);
+						handleValidationError.call(this, error, DATASOURCE_OPERATION_READ);
 						if (this[readRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-error", {
+								datasource: this,
+								operation: DATASOURCE_OPERATION_READ,
 								error: error,
 							});
 
@@ -404,6 +415,12 @@ class Rest extends Datasource {
 	/**
 	 * Writes the data to the rest api.
 	 * @return {Promise}
+	 * @fires monster-datasource-fetch
+	 * @fires monster-datasource-fetched
+	 * @fires monster-datasource-error
+	 * @fires monster-datasource-validation
+	 * @description Lifecycle event details contain `datasource` and
+	 * `operation: "write"` for this request.
 	 */
 	write() {
 		const opt = clone(this.getOption("write"));
@@ -435,6 +452,7 @@ class Rest extends Datasource {
 		return new Promise((resolve, reject) => {
 			fireCustomEvent(this, "monster-datasource-fetch", {
 				datasource: this,
+				operation: DATASOURCE_OPERATION_WRITE,
 			});
 
 			queueMicrotask(() => {
@@ -444,15 +462,18 @@ class Rest extends Datasource {
 						if (this[writeRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-fetched", {
 								datasource: this,
+								operation: DATASOURCE_OPERATION_WRITE,
 							});
 						}
 
 						resolve(response);
 					})
 					.catch((error) => {
-						handleValidationError.call(this, error);
+						handleValidationError.call(this, error, DATASOURCE_OPERATION_WRITE);
 						if (this[writeRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-error", {
+								datasource: this,
+								operation: DATASOURCE_OPERATION_WRITE,
 								error: error,
 							});
 
@@ -662,9 +683,10 @@ function initIntersectionObserver() {
 /**
  * @private
  * @param {Error} error
+ * @param {string} operation
  * @return {Promise<void>}
  */
-function handleValidationError(error) {
+function handleValidationError(error, operation) {
 	const path = this.getOption("response.path.validationErrors");
 	if (!path) {
 		return Promise.resolve();
@@ -723,6 +745,8 @@ function handleValidationError(error) {
 				new CustomEvent("monster-datasource-validation", {
 					bubbles: true,
 					detail: {
+						datasource: this,
+						operation,
 						errors: normalizedErrors,
 						raw: rawErrors,
 						message,

package/source/components/datatable/save-button.mjs

@@ -37,7 +37,10 @@ import { Observer } from "../../types/observer.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
 import { clone } from "../../util/clone.mjs";
 import { State } from "../form/types/state.mjs";
-import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
+import {
+	ATTRIBUTE_DATASOURCE_SELECTOR,
+	DATASOURCE_OPERATION_WRITE,
+} from "./constants.mjs";
 import { Datasource } from "./datasource.mjs";
 import { Rest as RestDatasource } from "./datasource/rest.mjs";
 import { BadgeStyleSheet } from "../stylesheet/badge.mjs";
@@ -203,7 +206,10 @@ class SaveButton extends CustomElement {
 			}
 
 			if (element instanceof RestDatasource) {
-				element.addEventListener("monster-datasource-fetch", () => {
+				element.addEventListener("monster-datasource-fetch", (event) => {
+					if (event?.detail?.operation === DATASOURCE_OPERATION_WRITE) {
+						return;
+					}
 					if (self[saveInFlightSymbol]) {
 						self[pendingResetSymbol] = true;
 						return;
@@ -211,15 +217,20 @@ class SaveButton extends CustomElement {
 					self[fetchInFlightSymbol] = true;
 					clearOriginValues.call(self);
 				});
-				element.addEventListener("monster-datasource-fetched", () => {
-					self[fetchInFlightSymbol] = false;
+				element.addEventListener("monster-datasource-fetched", (event) => {
+					if (event?.detail?.operation !== DATASOURCE_OPERATION_WRITE) {
+						self[fetchInFlightSymbol] = false;
+					}
 					setOriginValues.call(
 						self,
 						clone(self[datasourceLinkedElementSymbol].data),
 					);
 					updateChangesState.call(self);
 				});
-				element.addEventListener("monster-datasource-error", () => {
+				element.addEventListener("monster-datasource-error", (event) => {
+					if (event?.detail?.operation === DATASOURCE_OPERATION_WRITE) {
+						return;
+					}
 					self[fetchInFlightSymbol] = false;
 				});
 			}

package/source/components/form/select.mjs

@@ -113,6 +113,18 @@ const keyFilterEventSymbol = Symbol("keyFilterEvent");
  */
 const lazyLoadDoneSymbol = Symbol("lazyLoadDone");
 
+/**
+ * @private
+ * @type {Symbol}
+ */
+const lazyLoadRequestSymbol = Symbol("lazyLoadRequest");
+
+/**
+ * @private
+ * @type {Symbol}
+ */
+const lazyLoadErrorSymbol = Symbol("lazyLoadError");
+
 /**
  * @private
  * @type {Symbol}
@@ -300,6 +312,7 @@ const optionsMapVersionSnapshotSymbol = Symbol("optionsMapVersionSnapshot");
 const selectionVersionSymbol = Symbol("selectionVersion");
 const closeOnSelectAutoSymbol = Symbol("closeOnSelectAuto");
 const lastFilterValueSymbol = Symbol("lastFilterValue");
+const filterInputVersionSymbol = Symbol("filterInputVersion");
 
 /**
  * @private
@@ -2051,6 +2064,7 @@ function invalidatePendingRemoteWork() {
 	}
 	this[isLoadingSymbol] = false;
 	this[remoteInfoRequestSymbol] = null;
+	delete this[lazyLoadRequestSymbol];
 
 	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
 		try {
@@ -4014,6 +4028,7 @@ function handleFilterInputEvents() {
 	}
 
 	this[lastFilterValueSymbol] = filterValue;
+	bumpFilterInputVersion.call(this);
 
 	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
 		try {
@@ -4061,6 +4076,16 @@ function getCurrentFilterInputValue() {
 	return undefined;
 }
 
+function getFilterInputVersion() {
+	return Number.isInteger(this[filterInputVersionSymbol])
+		? this[filterInputVersionSymbol]
+		: 0;
+}
+
+function bumpFilterInputVersion() {
+	this[filterInputVersionSymbol] = getFilterInputVersion.call(this) + 1;
+}
+
 /**
  * @private
  */
@@ -4601,7 +4626,15 @@ function areOptionsAvailableAndInitInternal() {
 		options === null ||
 		(isArray(options) && options.length === 0)
 	) {
-		setStatusOrRemoveBadges.call(this, "empty");
+		const lazyLoadPending = this[lazyLoadRequestSymbol] instanceof Promise;
+		const lazyLoadError = isString(this[lazyLoadErrorSymbol]);
+		if (lazyLoadError) {
+			setStatusOrRemoveBadges.call(this, "error");
+		} else if (lazyLoadPending) {
+			setStatusOrRemoveBadges.call(this, "loading");
+		} else {
+			setStatusOrRemoveBadges.call(this, "empty");
+		}
 		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
 			if (this[isLoadingSymbol] !== true) {
 				if (isInteger(this.getOption("total"))) {
@@ -4615,7 +4648,9 @@ function areOptionsAvailableAndInitInternal() {
 
 		let msg = this.getOption("labels.no-options-available");
 
-		if (
+		if (lazyLoadError) {
+			msg = this.getOption("labels.cannot-be-loaded");
+		} else if (
 			this.getOption("url") !== null &&
 			this.getOption("features.lazyLoad") === true &&
 			this[lazyLoadDoneSymbol] !== true
@@ -4651,7 +4686,11 @@ function areOptionsAvailableAndInitInternal() {
 		if (this.getOption("features.emptyValueIfNoOptions") === true) {
 			this.value = "";
 		}
-		if (this[isLoadingSymbol] !== true) {
+		if (
+			this[isLoadingSymbol] !== true &&
+			lazyLoadPending === false &&
+			lazyLoadError === false
+		) {
 			addErrorAttribute(this, "No options available.");
 		}
 		return false;
@@ -5087,24 +5126,65 @@ function show() {
 		this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
 
 	if (lazyLoadFlag === true) {
-		this[lazyLoadDoneSymbol] = true;
+		if (this[lazyLoadRequestSymbol] instanceof Promise) {
+			return;
+		}
+
+		if (isString(this[lazyLoadErrorSymbol])) {
+			removeErrorAttribute(this, this[lazyLoadErrorSymbol]);
+			delete this[lazyLoadErrorSymbol];
+		}
+		removeErrorAttribute(this, "No options available.");
 		setStatusOrRemoveBadges.call(this, "loading");
 
-		new Processing(200, () => {
-			this.fetch()
-				.then(() => {
-					checkOptionState.call(this);
-					requestAnimationFrame(() => {
+		const lifecycleVersion = getRemoteLifecycleVersion.call(this);
+		const lazyLoadRequest = new Processing(200, () => {
+			if (
+				!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
+				this.isConnected !== true
+			) {
+				return;
+			}
+
+			return this.fetch();
+		}).run();
+		this[lazyLoadRequestSymbol] = lazyLoadRequest;
+
+		lazyLoadRequest
+			.then(() => {
+				if (
+					this[lazyLoadRequestSymbol] !== lazyLoadRequest ||
+					!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
+					this.isConnected !== true
+				) {
+					return;
+				}
+
+				delete this[lazyLoadRequestSymbol];
+				this[lazyLoadDoneSymbol] = true;
+				delete this[lazyLoadErrorSymbol];
+				checkOptionState.call(this);
+				requestAnimationFrame(() => {
+					if (
+						isRemoteLifecycleCurrent.call(this, lifecycleVersion) &&
+						this.isConnected === true
+					) {
 						show.call(this);
-					});
-				})
-				.catch((e) => {
-					addErrorAttribute(this, e);
-					setStatusOrRemoveBadges.call(this, "error");
+					}
 				});
-		})
-			.run()
+			})
 			.catch((e) => {
+				if (
+					this[lazyLoadRequestSymbol] !== lazyLoadRequest ||
+					!isRemoteLifecycleCurrent.call(this, lifecycleVersion)
+				) {
+					return;
+				}
+
+				delete this[lazyLoadRequestSymbol];
+				this[lazyLoadDoneSymbol] = false;
+				this[lazyLoadErrorSymbol] =
+					e instanceof Error ? e.message : String(e);
 				addErrorAttribute(this, e);
 				setStatusOrRemoveBadges.call(this, "error");
 			});
@@ -5141,6 +5221,8 @@ function show() {
 	addAttributeToken(this[controlElementSymbol], "class", "open");
 	registerWithHost.call(this);
 
+	const filterInputVersion = getFilterInputVersion.call(this);
+
 	new Processing(() => {
 		const shouldLoadRemoteOptions =
 			getFilterMode.call(self) === FILTER_MODE_REMOTE &&
@@ -5152,12 +5234,18 @@ function show() {
 
 		if (shouldLoadDefaultOptions) {
 			setTimeout(() => {
+				if (getFilterInputVersion.call(this) !== filterInputVersion) {
+					return;
+				}
 				loadDefaultOptionsFromUrl.call(self).catch((e) => {
 					addErrorAttribute(self, e);
 				});
 			}, 0);
 		} else if (shouldLoadRemoteOptions) {
 			setTimeout(() => {
+				if (getFilterInputVersion.call(this) !== filterInputVersion) {
+					return;
+				}
 				self[cleanupOptionsListSymbol] = true;
 				filterFromRemote.call(self).catch((e) => {
 					addErrorAttribute(self, e);

package/test/cases/components/datatable/datasource-rest-lifecycle.mjs

@@ -0,0 +1,299 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+chai.use(chaiDom);
+
+let DataFetchError;
+
+const waitForUpdates = () => new Promise((resolve) => setTimeout(resolve, 30));
+
+function createDatasource(id) {
+	const datasource = document.createElement("monster-datasource-rest");
+	datasource.id = id;
+	datasource.setOption("features.autoInit", false);
+	datasource.setOption("read.url", "/records/1");
+	datasource.setOption("write.url", "/records/1");
+	return datasource;
+}
+
+function listenForLifecycle(datasource) {
+	const events = [];
+	for (const type of [
+		"monster-datasource-fetch",
+		"monster-datasource-fetched",
+		"monster-datasource-error",
+		"monster-datasource-validation",
+	]) {
+		datasource.addEventListener(type, (event) => {
+			events.push({ type, detail: event.detail });
+		});
+	}
+	return events;
+}
+
+function createSaveButton(datasourceSelector) {
+	const button = document.createElement("monster-datasource-save-button");
+	button.setOption("datasource.selector", datasourceSelector);
+	button.setOption("disableWhenNoChanges", true);
+	return button;
+}
+
+function getStateButton(button) {
+	return button.shadowRoot?.querySelector("monster-state-button");
+}
+
+async function loadDatasource(datasource, data) {
+	datasource.datasource.read = () => {
+		datasource.data = data;
+		return Promise.resolve({ ok: true });
+	};
+	await datasource.read();
+	await waitForUpdates();
+}
+
+function clickSaveButton(button) {
+	const action = getStateButton(button)?.getOption("actions.click");
+	expect(action).to.be.a("function");
+	action();
+}
+
+function expectPendingChanges(button) {
+	expect(Number(button.getOption("changes"))).to.be.greaterThan(0);
+	expect(getStateButton(button)?.getOption("disabled")).to.equal(false);
+}
+
+function expectNoPendingChanges(button) {
+	expect(button.getOption("changes")).to.equal("");
+	expect(getStateButton(button)?.getOption("disabled")).to.equal(true);
+}
+
+describe("REST datasource lifecycle", function () {
+	before(async function () {
+		await initJSDOM();
+		globalThis.location = window.location;
+		await import("element-internals-polyfill").catch(() => {});
+		await import("../../../../source/components/datatable/datasource/rest.mjs");
+		await import("../../../../source/components/datatable/save-button.mjs");
+		({ DataFetchError } = await import(
+			"../../../../source/data/datasource/server/restapi/data-fetch-error.mjs"
+		));
+	});
+
+	beforeEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("identifies read and write lifecycle events without changing event names", async function () {
+		const datasource = createDatasource("lifecycle-datasource");
+		const events = listenForLifecycle(datasource);
+		document.getElementById("mocks").appendChild(datasource);
+
+		datasource.datasource.read = () => Promise.resolve({ ok: true });
+		await datasource.read();
+
+		datasource.datasource.write = () => Promise.resolve({ ok: true });
+		await datasource.write();
+
+		expect(
+			events.map(({ type, detail }) => [type, detail.operation]),
+		).to.deep.equal([
+			["monster-datasource-fetch", "read"],
+			["monster-datasource-fetched", "read"],
+			["monster-datasource-fetch", "write"],
+			["monster-datasource-fetched", "write"],
+		]);
+		events.forEach(({ detail }) => {
+			expect(detail.datasource).to.equal(datasource);
+		});
+	});
+
+	it("identifies write validation and error events", async function () {
+		const datasource = createDatasource("validation-datasource");
+		datasource.setOption(
+			"response.path.validationErrors",
+			"meta.validationErrors",
+		);
+		datasource.setOption("response.path.validationMessage", "meta.message");
+		const events = listenForLifecycle(datasource);
+		document.getElementById("mocks").appendChild(datasource);
+
+		const response = new Response(
+			JSON.stringify({
+				meta: {
+					message: "Input data is invalid",
+					validationErrors: {
+						parentId: { code: "VAL_INVALID", message: "Invalid parent" },
+					},
+				},
+			}),
+			{ status: 400, headers: { "content-type": "application/json" } },
+		);
+		datasource.datasource.write = () =>
+			Promise.reject(new DataFetchError("Input data is invalid", response));
+
+		await datasource.write().catch(() => {});
+		await waitForUpdates();
+
+		const validation = events.find(
+			({ type }) => type === "monster-datasource-validation",
+		);
+		const error = events.find(
+			({ type }) => type === "monster-datasource-error",
+		);
+		expect(validation?.detail.operation).to.equal("write");
+		expect(validation?.detail.datasource).to.equal(datasource);
+		expect(validation?.detail.errors.parentId).to.deep.equal({
+			code: "VAL_INVALID",
+			message: "Invalid parent",
+		});
+		expect(error?.detail.operation).to.equal("write");
+		expect(error?.detail.datasource).to.equal(datasource);
+	});
+
+	it("keeps every save button on the loaded baseline after a rejected write", async function () {
+		const datasource = createDatasource("rejected-write-datasource");
+		const loaded = {
+			data: [{ id: "area-1", name: "Inbound", parentAreaId: "" }],
+		};
+		const invalid = {
+			data: [{ id: "area-1", name: "Inbound changed", parentAreaId: "area-1" }],
+		};
+		const corrected = {
+			data: [{ id: "area-1", name: "Inbound changed", parentAreaId: "" }],
+		};
+		const first = createSaveButton("#rejected-write-datasource");
+		const second = createSaveButton("#rejected-write-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.data = invalid;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.datasource.write = () =>
+			Promise.reject(new Error("Rejected write"));
+		clickSaveButton(first);
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.data = corrected;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+	});
+
+	it("establishes the current data as every save button baseline after a successful write", async function () {
+		const datasource = createDatasource("successful-write-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const edited = { data: [{ id: "area-1", name: "Inbound changed" }] };
+		const first = createSaveButton("#successful-write-datasource");
+		const second = createSaveButton("#successful-write-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		datasource.data = edited;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.datasource.write = () => Promise.resolve({ ok: true });
+		clickSaveButton(first);
+		await waitForUpdates();
+
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+	});
+
+	it("replaces every save button baseline after a read", async function () {
+		const datasource = createDatasource("read-baseline-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const edited = { data: [{ id: "area-1", name: "Inbound changed" }] };
+		const refreshed = { data: [{ id: "area-1", name: "Inbound from server" }] };
+		const first = createSaveButton("#read-baseline-datasource");
+		const second = createSaveButton("#read-baseline-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		datasource.data = edited;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.datasource.read = () => {
+			datasource.data = refreshed;
+			return Promise.resolve({ ok: true });
+		};
+		await datasource.read();
+		await waitForUpdates();
+
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+	});
+
+	it("does not let write completion end an in-flight read", async function () {
+		const datasource = createDatasource("concurrent-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const firstReadValue = {
+			data: [{ id: "area-1", name: "Inbound from server" }],
+		};
+		const finalReadValue = {
+			data: [{ id: "area-1", name: "Inbound from server (final)" }],
+		};
+		const first = createSaveButton("#concurrent-datasource");
+		const second = createSaveButton("#concurrent-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		let resolveRead;
+		datasource.datasource.read = () =>
+			new Promise((resolve) => {
+				resolveRead = resolve;
+			});
+		const read = datasource.read();
+		await waitForUpdates();
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.datasource.write = () => Promise.resolve({ ok: true });
+		await datasource.write();
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.data = firstReadValue;
+		await waitForUpdates();
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.datasource.write = () =>
+			Promise.reject(new Error("Rejected concurrent write"));
+		await datasource.write().catch(() => {});
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.data = finalReadValue;
+		await waitForUpdates();
+
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		resolveRead({ ok: true });
+		await read;
+		await waitForUpdates();
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+	});
+});

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

@@ -97,6 +97,14 @@ function configureRemotePaginatedSelect(select) {
     select.setOption('mapping.objectsPerPage', 'pagination.perPage');
 }
 
+function configureLazySelect(select) {
+    select.setOption('url', 'https://example.com/lazy-options');
+    select.setOption('features.lazyLoad', true);
+    select.setOption('mapping.selector', 'items.*');
+    select.setOption('mapping.labelTemplate', '${name}');
+    select.setOption('mapping.valueTemplate', '${id}');
+}
+
 let Select,
     SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
@@ -643,6 +651,223 @@ describe('Select', function () {
 
     });
 
+    describe('Lazy load lifecycle', function () {
+        this.timeout(5000);
+
+        afterEach(() => {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            global['fetch'] = fetchReference;
+        });
+
+        it('should open from the first click after a delayed lazy response renders', async function () {
+            const deferredResponse = createDeferred();
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+
+            await waitForCondition(() => requestCount === 1);
+            container.click();
+            await new Promise(resolve => setTimeout(resolve, 250));
+            expect(requestCount).to.equal(1);
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                })
+            );
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll('[data-monster-role=option]').length === 1;
+            });
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(1);
+            expect(popper.style.display).to.equal('block');
+        });
+
+        it('should keep a failed lazy load in the error state', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({}, 500);
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return (select.getAttribute('data-monster-error') ?? '').includes('HTTP error! status: 500');
+            });
+            await new Promise(resolve => setTimeout(resolve, 350));
+
+            expect(select.getOption('classes.statusOrRemoveBadge')).to.equal('error');
+            expect(select.getAttribute('data-monster-error')).to.not.contain('No options available.');
+        });
+
+        it('should retry a failed lazy load on the next click', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                if (requestCount === 1) {
+                    return createJsonResponse({}, 500);
+                }
+
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return (select.getAttribute('data-monster-error') ?? '').includes('HTTP error! status: 500');
+            });
+
+            container.click();
+
+            await waitForCondition(() => requestCount === 2, {timeout: 1500});
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll('[data-monster-role=option]').length === 1;
+            });
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(2);
+            expect(select.getAttribute('data-monster-error') ?? '').to.not.contain('HTTP error! status: 500');
+        });
+
+        it('should retry lazy loading after disconnecting during the request', async function () {
+            const firstResponse = createDeferred();
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                if (requestCount === 1) {
+                    return firstResponse.promise;
+                }
+
+                return createJsonResponse({
+                    items: [{id: 'fresh', name: 'Fresh'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            container.click();
+            await waitForCondition(() => requestCount === 1);
+
+            select.remove();
+            mocks.appendChild(select);
+            firstResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'stale', name: 'Stale'}]
+                })
+            );
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            container.click();
+
+            await waitForCondition(() => requestCount === 2, {timeout: 1500});
+            await waitForCondition(() => {
+                return select.getOption('options').map(option => option.value).includes('fresh');
+            });
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['fresh']);
+        });
+
+        it('should not start a delayed lazy request after disconnecting', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({
+                    items: [{id: 'fresh', name: 'Fresh'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            container.click();
+            select.remove();
+
+            await new Promise(resolve => setTimeout(resolve, 300));
+            expect(requestCount).to.equal(0);
+
+            mocks.appendChild(select);
+            container.click();
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return select.getOption('options').map(option => option.value).includes('fresh');
+            });
+        });
+
+        it('should not reload a completed lazy select after reconnecting', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+            await waitForCondition(() => popper.style.display === 'block');
+
+            container.click();
+            await waitForCondition(() => popper.style.display === 'none');
+            select.remove();
+            mocks.appendChild(select);
+            container.click();
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(1);
+        });
+    });
+
     describe('Popper sizing', function () {
         this.timeout(5000);
 
@@ -1701,6 +1926,56 @@ describe('Select', function () {
         });
     });
 
+    describe('Remote open lifecycle', function () {
+        this.timeout(5000);
+
+        afterEach(() => {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            global['fetch'] = fetchReference;
+        });
+
+        it('should request an immediately entered remote filter only once', async function () {
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            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('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            container.click();
+            filterInput.value = 'alpha';
+            filterInput.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+
+            await waitForCondition(() => requests.length >= 1);
+            await new Promise(resolve => setTimeout(resolve, 350));
+
+            expect(requests).to.deep.equal([
+                'https://example.com/items?filter=alpha&page=1'
+            ]);
+        });
+    });
+
     describe('document.createElement()', function () {
 
         afterEach(() => {