lucos_search_component 1.0.53 → 1.0.54

package/dist/index.js

@@ -5946,6 +5946,37 @@ class LucosSearchComponent extends HTMLSpanElement {
 			shadow.append(selector.nextElementSibling);
 		}
 	}
+	connectedCallback() {
+		const form = this.closest('form');
+		if (!form) return;
+		this._form = form;
+		this._formdataHandler = (event) => {
+			const selector = this.querySelector('select');
+			if (!selector || !selector.name) return;
+			const ts = selector.tomselect;
+			if (!ts) return;
+			const name = selector.name;
+			const values = ts.getValue();
+			const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
+			// Remove the native select values so consumers only receive the structured pairs
+			event.formData.delete(name);
+			valueArray.forEach((id, idx) => {
+				const option = ts.options[id];
+				if (option) {
+					event.formData.append(`${name}[${idx}][uri]`, id);
+					event.formData.append(`${name}[${idx}][name]`, option.pref_label);
+				}
+			});
+		};
+		form.addEventListener('formdata', this._formdataHandler);
+	}
+	disconnectedCallback() {
+		if (this._form && this._formdataHandler) {
+			this._form.removeEventListener('formdata', this._formdataHandler);
+			this._form = null;
+			this._formdataHandler = null;
+		}
+	}
 	get noLangOption() {
 		const label = this.getAttribute("data-no-lang");
 		if (!label) return null;

package/example/index.html

@@ -46,6 +46,24 @@
 		<label for="lang3">Common languages option</label><span is="lucos-lang" data-api-key="${KEY_LUCOS_ARACHNE}" data-no-lang="No Language" data-common="en,ga,zxx">
 			<select id="lang3"></select>
 		</span>
+		<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>
+			<button type="submit">Submit</button>
+		</form>
+		<pre id="form-output"></pre>
+		<script>
+			function handleSubmit(event) {
+				event.preventDefault();
+				const data = new FormData(event.target);
+				const output = {};
+				for (const [key, value] of data.entries()) {
+					if (!output[key]) output[key] = [];
+					output[key].push(value);
+				}
+				document.getElementById('form-output').textContent = JSON.stringify(output, null, 2);
+			}
+		</script>
 		<script src="./built.js"></script>
 	</body>
 </html>

package/package.json

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

package/web-components/lucos-search.js

@@ -303,6 +303,37 @@ class LucosSearchComponent extends HTMLSpanElement {
 			shadow.append(selector.nextElementSibling);
 		}
 	}
+	connectedCallback() {
+		const form = this.closest('form');
+		if (!form) return;
+		this._form = form;
+		this._formdataHandler = (event) => {
+			const selector = this.querySelector('select');
+			if (!selector || !selector.name) return;
+			const ts = selector.tomselect;
+			if (!ts) return;
+			const name = selector.name;
+			const values = ts.getValue();
+			const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
+			// Remove the native select values so consumers only receive the structured pairs
+			event.formData.delete(name);
+			valueArray.forEach((id, idx) => {
+				const option = ts.options[id];
+				if (option) {
+					event.formData.append(`${name}[${idx}][uri]`, id);
+					event.formData.append(`${name}[${idx}][name]`, option.pref_label);
+				}
+			});
+		};
+		form.addEventListener('formdata', this._formdataHandler);
+	}
+	disconnectedCallback() {
+		if (this._form && this._formdataHandler) {
+			this._form.removeEventListener('formdata', this._formdataHandler);
+			this._form = null;
+			this._formdataHandler = null;
+		}
+	}
 	get noLangOption() {
 		const label = this.getAttribute("data-no-lang");
 		if (!label) return null;