@schukai/monster 4.148.6 → 4.148.7

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

package/source/components/form/select.mjs

@@ -2110,6 +2110,7 @@ function finishTrackedFetch(token) {
 function fetchIt(url, controlOptions) {
 	const self = this;
 	const lifecycleVersion = getRemoteLifecycleVersion.call(this);
+	const lazyLoadRequest = controlOptions?.lazyLoad === true;
 
 	if (url instanceof URL) {
 		url = url.toString();
@@ -2144,6 +2145,11 @@ function fetchIt(url, controlOptions) {
 		}
 
 		new Processing(10, () => {
+			if (lazyLoadRequest && shouldLazyLoadOptions.call(this) !== true) {
+				resolve(false);
+				return;
+			}
+
 			fetchData
 				.call(this, url)
 				.then((map) => {
@@ -2190,7 +2196,7 @@ function fetchIt(url, controlOptions) {
 							updatePopper.call(this);
 							setStatusOrRemoveBadges.call(this, "closed");
 
-							resolve();
+							resolve(lazyLoadRequest ? true : undefined);
 						});
 
 						return;
@@ -4001,10 +4007,7 @@ function handleFilterKeyboardEvents(event) {
 			event.preventDefault();
 			break;
 		default:
-			if (
-				this.getOption("features.lazyLoad") === true &&
-				this[lazyLoadDoneSymbol] !== true
-			) {
+			if (shouldLazyLoadOptions.call(this)) {
 				this.click();
 			}
 	}
@@ -4322,6 +4325,14 @@ function getFilterMode() {
 	}
 }
 
+function shouldLazyLoadOptions() {
+	return (
+		getFilterMode.call(this) !== FILTER_MODE_REMOTE &&
+		this.getOption("features.lazyLoad") === true &&
+		this[lazyLoadDoneSymbol] !== true
+	);
+}
+
 function getCurrentFilterValue() {
 	if (this.getOption("filter.position") === FILTER_POSITION_INLINE) {
 		if (this[inlineFilterElementSymbol] instanceof HTMLInputElement) {
@@ -4652,8 +4663,7 @@ function areOptionsAvailableAndInitInternal() {
 			msg = this.getOption("labels.cannot-be-loaded");
 		} else if (
 			this.getOption("url") !== null &&
-			this.getOption("features.lazyLoad") === true &&
-			this[lazyLoadDoneSymbol] !== true
+			shouldLazyLoadOptions.call(this)
 		) {
 			msg = this.getOption("labels.click-to-load-options");
 		}
@@ -5122,10 +5132,7 @@ function show() {
 
 	focusFilter.call(this);
 
-	const lazyLoadFlag =
-		this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
-
-	if (lazyLoadFlag === true) {
+	if (shouldLazyLoadOptions.call(this)) {
 		if (this[lazyLoadRequestSymbol] instanceof Promise) {
 			return;
 		}
@@ -5141,17 +5148,20 @@ function show() {
 		const lazyLoadRequest = new Processing(200, () => {
 			if (
 				!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
-				this.isConnected !== true
+				this.isConnected !== true ||
+				shouldLazyLoadOptions.call(this) !== true
 			) {
-				return;
+				return false;
 			}
 
-			return this.fetch();
+			return fetchIt.call(this, undefined, {
+				lazyLoad: true,
+			});
 		}).run();
 		this[lazyLoadRequestSymbol] = lazyLoadRequest;
 
 		lazyLoadRequest
-			.then(() => {
+			.then((lazyLoadCompleted) => {
 				if (
 					this[lazyLoadRequestSymbol] !== lazyLoadRequest ||
 					!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
@@ -5161,6 +5171,19 @@ function show() {
 				}
 
 				delete this[lazyLoadRequestSymbol];
+				if (lazyLoadCompleted !== true) {
+					checkOptionState.call(this);
+					requestAnimationFrame(() => {
+						if (
+							isRemoteLifecycleCurrent.call(this, lifecycleVersion) &&
+							this.isConnected === true
+						) {
+							show.call(this);
+						}
+					});
+					return;
+				}
+
 				this[lazyLoadDoneSymbol] = true;
 				delete this[lazyLoadErrorSymbol];
 				checkOptionState.call(this);

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

@@ -97,6 +97,23 @@ function configureRemotePaginatedSelect(select) {
     select.setOption('mapping.objectsPerPage', 'pagination.perPage');
 }
 
+function configureInteractiveRemoteSelect(select) {
+    configureRemotePaginatedSelect(select);
+    select.setOption('filter.position', 'popper');
+    select.setOption('filter.defaultValue', '');
+}
+
+function createRemotePageResponse() {
+    return createJsonResponse({
+        items: [{id: 'alpha', name: 'Alpha'}],
+        pagination: {
+            total: 1,
+            page: 1,
+            perPage: 10
+        }
+    });
+}
+
 function configureLazySelect(select) {
     select.setOption('url', 'https://example.com/lazy-options');
     select.setOption('features.lazyLoad', true);
@@ -660,6 +677,128 @@ describe('Select', function () {
             global['fetch'] = fetchReference;
         });
 
+        it('should use the remote lifecycle when lazy loading is configured before connection', async function () {
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createRemotePageResponse();
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureInteractiveRemoteSelect(select);
+            select.setOption('features.lazyLoad', true);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            expect(select.getOption('features.lazyLoad')).to.equal(false);
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => requests.length === 1);
+            expect(requests).to.deep.equal([
+                'https://example.com/items?filter=&page=1'
+            ]);
+        });
+
+        it('should ignore lazy loading reapplied to a connected remote select', async function () {
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createRemotePageResponse();
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureInteractiveRemoteSelect(select);
+            select.setOption('features.lazyLoad', true);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.getOption('features.lazyLoad') === false &&
+                    select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            select.setOption('features', {
+                ...select.getOption('features'),
+                lazyLoad: true
+            });
+            select.setOption('filter', {
+                ...select.getOption('filter'),
+                mode: 'remote'
+            });
+
+            expect(select.getOption('features.lazyLoad')).to.equal(true);
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => requests.length === 1);
+            await new Promise(resolve => setTimeout(resolve, 300));
+            expect(requests).to.deep.equal([
+                'https://example.com/items?filter=&page=1'
+            ]);
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['alpha']);
+            expect(select.getAttribute('data-monster-error') ?? '').to.not.contain('No options available.');
+        });
+
+        it('should switch from lazy option loading to remote loading before interaction', async function () {
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createRemotePageResponse();
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureInteractiveRemoteSelect(select);
+            select.setOption('filter.mode', 'options');
+            select.setOption('features.lazyLoad', true);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            select.setOption('filter.mode', 'remote');
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => requests.length === 1);
+            expect(requests).to.deep.equal([
+                'https://example.com/items?filter=&page=1'
+            ]);
+        });
+
+        it('should cancel a delayed lazy branch after switching to remote mode', async function () {
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createRemotePageResponse();
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureInteractiveRemoteSelect(select);
+            select.setOption('filter.mode', 'options');
+            select.setOption('features.lazyLoad', true);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+            select.setOption('filter.mode', 'remote');
+
+            await waitForCondition(() => requests.length === 1);
+            await new Promise(resolve => setTimeout(resolve, 300));
+            expect(requests).to.deep.equal([
+                'https://example.com/items?filter=&page=1'
+            ]);
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['alpha']);
+            expect(select.getAttribute('data-monster-error') ?? '').to.not.contain('No options available.');
+        });
+
         it('should open from the first click after a delayed lazy response renders', async function () {
             const deferredResponse = createDeferred();
             let requestCount = 0;

package/test/cases/components/layout/tabs.mjs

@@ -476,7 +476,7 @@ describe("Tabs", function () {
 		});
 
 		it("should move overflowing tabs into the popper without losing them", function (done) {
-			this.timeout(5000);
+			this.timeout(15000);
 
 			let mocks = document.getElementById("mocks");
 			const OriginalResizeObserver = window.ResizeObserver;
@@ -624,7 +624,7 @@ describe("Tabs", function () {
 		});
 
 		it("should preserve the overflow split and recalculate widths while rebuilding tab buttons", async function () {
-			this.timeout(5000);
+			this.timeout(15000);
 
 			const mocks = document.getElementById("mocks");
 			restoreBoundingClientRect = installOverflowTabGeometryMock();