lucos_search_component 3.0.4 → 3.0.6

package/dist/index.js

@@ -5781,8 +5781,30 @@ class LucosSearchComponent extends HTMLSpanElement {
 				margin: 0 3px;
 				padding: 2px 6px;
 			}
+			/* Prevent dropdown overflowing into an adjacent column in multi-column layouts.
+			 * Consumers may embed lucos-search in a CSS column-count context (e.g. a 2-column
+			 * form). Because TomSelect's DOM lives inside this shadow root, page-level CSS
+			 * cannot fix column overflow from outside.
+			 *
+			 * The actual fix is applied in JavaScript (see fixDropdownContentPosition below):
+			 * Chromium has a bug where position:absolute on a shadow-DOM descendant inside a
+			 * multi-column container resolves the containing block to the column-box boundary
+			 * rather than the nearest positioned ancestor (.ts-dropdown). CSS-only approaches
+			 * (position:absolute with explicit top/left, contain:layout) do not override this.
+			 * The JS fix switches .ts-dropdown-content to position:fixed when the dropdown opens
+			 * inside a multi-column layout, bypassing the containing-block resolution entirely. */
 			.ts-dropdown {
-				margin: 0;
+				border: none;
+				margin: -3px 0 0 0;
+			}
+			.ts-dropdown-content {
+				background: #fff;
+				border: 1px solid #d0d0d0;
+				margin: 0.25rem 0 0;
+				border-top: 0 none;
+				box-sizing: border-box;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+				border-radius: 0 0 3px 3px;
 			}
 			.lozenge a {
 				color: inherit;
@@ -5998,6 +6020,64 @@ class LucosSearchComponent extends HTMLSpanElement {
 				},
 			},
 		});
+
+		// fixDropdownContentPosition: work around a Chromium bug where, inside a shadow
+		// DOM + CSS multi-column context, Chromium resolves position:absolute on
+		// .ts-dropdown-content to the column-box boundary rather than the .ts-dropdown
+		// containing block. We detect the multi-column context and switch to position:fixed
+		// with explicit viewport coordinates, bypassing containing-block resolution entirely.
+		const ts = selector.tomselect;
+		let dropdownScrollHandler = null;
+
+		function isInMultiColumnLayout() {
+			let el = component.parentElement;
+			while (el && el !== document.body) {
+				if (parseInt(window.getComputedStyle(el).columnCount) > 1) return true;
+				el = el.parentElement;
+			}
+			return false;
+		}
+
+		ts.on('dropdown_open', function (dropdown) {
+			if (!isInMultiColumnLayout()) return;
+			const content = ts.dropdown_content;
+			// Set position:fixed BEFORE reading the bounding rect. Chromium has a bug
+			// where, in shadow DOM + multi-column layouts, getBoundingClientRect() on
+			// .ts-dropdown returns the column-box dimensions rather than the true visual
+			// position while the content is in normal flow. Applying position:fixed first
+			// takes the content out of flow, which forces Chromium to recompute .ts-dropdown's
+			// layout correctly. Subsequent getBoundingClientRect() then returns accurate values.
+			content.style.position = 'fixed';
+			const rect = dropdown.getBoundingClientRect();
+			if (!rect.width) {
+				content.style.position = '';
+				return;
+			}
+			content.style.top = rect.top + 'px';
+			content.style.left = rect.left + 'px';
+			content.style.width = rect.width + 'px';
+			dropdownScrollHandler = function () {
+				const r = dropdown.getBoundingClientRect();
+				content.style.top = r.top + 'px';
+				content.style.left = r.left + 'px';
+				content.style.width = r.width + 'px';
+			};
+			window.addEventListener('scroll', dropdownScrollHandler, { passive: true, capture: true });
+			window.addEventListener('resize', dropdownScrollHandler, { passive: true });
+		});
+
+		ts.on('dropdown_close', function () {
+			if (!dropdownScrollHandler) return;
+			const content = ts.dropdown_content;
+			content.style.position = '';
+			content.style.top = '';
+			content.style.left = '';
+			content.style.width = '';
+			window.removeEventListener('scroll', dropdownScrollHandler, { capture: true });
+			window.removeEventListener('resize', dropdownScrollHandler);
+			dropdownScrollHandler = null;
+		});
+
 		if (selector.nextElementSibling) {
 			shadow.append(selector.nextElementSibling);
 		}

package/example/index.html

@@ -8,7 +8,7 @@
 		<label for="search2">No Tracks:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search2"></select></span>
 		<label for="search3">Only Cites and Rivers:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="City,River"><select id="search3"></select></span>
 		<label for="search4">Load with existing items:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="search4" multiple>
-			<option selected>https://contacts.l42.eu/people/2</option>
+			<option selected>https://eolas.l42.eu/metadata/person/2/</option>
 			<option selected>https://eolas.l42.eu/metadata/place/2/</option>
 			<option selected>https://media-metadata.l42.eu/tracks/13713</option>
 			<option selected>https://eolas.l42.eu/metadata/language/ain/</option>
@@ -35,6 +35,26 @@
 			<option selected>https://eolas.l42.eu/metadata/place/316/</option>
 			<option selected>https://eolas.l42.eu/metadata/place/317/</option>
 		</select></span>
+		<h1>Multi-column layout</h1>
+		<p>Dropdowns should open within the same column as their field, not overflow into the adjacent column.</p>
+		<div style="column-count: 2; column-gap: 2em; border: 1px solid #ccc; padding: 1em;">
+			<div style="break-inside: avoid;">
+				<label for="col-search1">Theme tune:</label>
+				<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="CreativeWork"><select id="col-search1"></select></span>
+			</div>
+			<div style="break-inside: avoid;">
+				<label for="col-search2">Soundtrack:</label>
+				<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="CreativeWork"><select id="col-search2"></select></span>
+			</div>
+			<div style="break-inside: avoid;">
+				<label for="col-search3">Language:</label>
+				<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language"><select id="col-search3"></select></span>
+			</div>
+			<div style="break-inside: avoid;">
+				<label for="col-search4">About:</label>
+				<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="col-search4"></select></span>
+			</div>
+		</div>
 		<h1>Form submission</h1>
 		<form id="test-form" onsubmit="handleSubmit(event)">
 			<label for="tags">Tags:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="tags" name="tags" multiple></select></span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucos_search_component",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",

package/web-components/lucos-search.js

@@ -68,8 +68,30 @@ class LucosSearchComponent extends HTMLSpanElement {
 				margin: 0 3px;
 				padding: 2px 6px;
 			}
+			/* Prevent dropdown overflowing into an adjacent column in multi-column layouts.
+			 * Consumers may embed lucos-search in a CSS column-count context (e.g. a 2-column
+			 * form). Because TomSelect's DOM lives inside this shadow root, page-level CSS
+			 * cannot fix column overflow from outside.
+			 *
+			 * The actual fix is applied in JavaScript (see fixDropdownContentPosition below):
+			 * Chromium has a bug where position:absolute on a shadow-DOM descendant inside a
+			 * multi-column container resolves the containing block to the column-box boundary
+			 * rather than the nearest positioned ancestor (.ts-dropdown). CSS-only approaches
+			 * (position:absolute with explicit top/left, contain:layout) do not override this.
+			 * The JS fix switches .ts-dropdown-content to position:fixed when the dropdown opens
+			 * inside a multi-column layout, bypassing the containing-block resolution entirely. */
 			.ts-dropdown {
-				margin: 0;
+				border: none;
+				margin: -3px 0 0 0;
+			}
+			.ts-dropdown-content {
+				background: #fff;
+				border: 1px solid #d0d0d0;
+				margin: 0.25rem 0 0;
+				border-top: 0 none;
+				box-sizing: border-box;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+				border-radius: 0 0 3px 3px;
 			}
 			.lozenge a {
 				color: inherit;
@@ -285,6 +307,64 @@ class LucosSearchComponent extends HTMLSpanElement {
 				},
 			},
 		});
+
+		// fixDropdownContentPosition: work around a Chromium bug where, inside a shadow
+		// DOM + CSS multi-column context, Chromium resolves position:absolute on
+		// .ts-dropdown-content to the column-box boundary rather than the .ts-dropdown
+		// containing block. We detect the multi-column context and switch to position:fixed
+		// with explicit viewport coordinates, bypassing containing-block resolution entirely.
+		const ts = selector.tomselect;
+		let dropdownScrollHandler = null;
+
+		function isInMultiColumnLayout() {
+			let el = component.parentElement;
+			while (el && el !== document.body) {
+				if (parseInt(window.getComputedStyle(el).columnCount) > 1) return true;
+				el = el.parentElement;
+			}
+			return false;
+		}
+
+		ts.on('dropdown_open', function (dropdown) {
+			if (!isInMultiColumnLayout()) return;
+			const content = ts.dropdown_content;
+			// Set position:fixed BEFORE reading the bounding rect. Chromium has a bug
+			// where, in shadow DOM + multi-column layouts, getBoundingClientRect() on
+			// .ts-dropdown returns the column-box dimensions rather than the true visual
+			// position while the content is in normal flow. Applying position:fixed first
+			// takes the content out of flow, which forces Chromium to recompute .ts-dropdown's
+			// layout correctly. Subsequent getBoundingClientRect() then returns accurate values.
+			content.style.position = 'fixed';
+			const rect = dropdown.getBoundingClientRect();
+			if (!rect.width) {
+				content.style.position = '';
+				return;
+			}
+			content.style.top = rect.top + 'px';
+			content.style.left = rect.left + 'px';
+			content.style.width = rect.width + 'px';
+			dropdownScrollHandler = function () {
+				const r = dropdown.getBoundingClientRect();
+				content.style.top = r.top + 'px';
+				content.style.left = r.left + 'px';
+				content.style.width = r.width + 'px';
+			};
+			window.addEventListener('scroll', dropdownScrollHandler, { passive: true, capture: true });
+			window.addEventListener('resize', dropdownScrollHandler, { passive: true });
+		});
+
+		ts.on('dropdown_close', function () {
+			if (!dropdownScrollHandler) return;
+			const content = ts.dropdown_content;
+			content.style.position = '';
+			content.style.top = '';
+			content.style.left = '';
+			content.style.width = '';
+			window.removeEventListener('scroll', dropdownScrollHandler, { capture: true });
+			window.removeEventListener('resize', dropdownScrollHandler);
+			dropdownScrollHandler = null;
+		});
+
 		if (selector.nextElementSibling) {
 			shadow.append(selector.nextElementSibling);
 		}