Add hidden textarea inside component for name and value attributes

libris · Nov 13, 2024 · 16f87d7 · 16f87d7
1 parent 84a43ae
commit 16f87d7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/lxl-web/src/lib/components/Search.svelte b/lxl-web/src/lib/components/Search.svelte
@@ -46,11 +46,11 @@
 <form class="relative w-full" action="find" on:submit={handleSubmit}>
 	{#if env?.PUBLIC_USE_SUPERSEARCH === 'true'}
 		<SuperSearch
+			name="_q"
 			bind:value={q}
 			language={lxlQueryLanguage}
 			placeholder={$page.data.t('search.search')}
 		/>
-		<textarea value={q} hidden readonly name="_q" maxlength={2048}></textarea>
 	{:else}
 		<!-- svelte-ignore a11y-autofocus -->
 		<input

diff --git a/packages/supersearch/src/lib/components/SuperSearch.svelte b/packages/supersearch/src/lib/components/SuperSearch.svelte
@@ -6,13 +6,14 @@
 	import submitFormOnEnterKey from '$lib/extensions/submitFormOnEnterKey.js';
 
 	interface Props {
+		name: string;
 		value?: string;
 		form?: string;
 		language?: LRLanguage;
 		placeholder?: string;
 	}
 
-	let { value = $bindable(''), form, language, placeholder = '' }: Props = $props();
+	let { name, value = $bindable(''), form, language, placeholder = '' }: Props = $props();
 
 	let editorView: EditorView | undefined = $state();
 
@@ -40,3 +41,4 @@
 </script>
 
 <CodeMirror {value} {extensions} onchange={handleChangeCodeMirror} bind:editorView />
+<textarea {value} {name} {form} hidden readonly></textarea>
diff --git a/packages/supersearch/src/routes/+page.svelte b/packages/supersearch/src/routes/+page.svelte
@@ -8,16 +8,17 @@
 <form action="test1">
 	<fieldset data-test-id="test1">
 		<legend>Supersearch inside <code>&lt;form&gt;</code> element</legend>
-		<SuperSearch bind:value {placeholder} />
-		<textarea {value} hidden readonly name="q" maxlength={2048}></textarea>
+		<SuperSearch name="q" bind:value {placeholder} />
 	</fieldset>
+</form>
+
+<form>
 	<fieldset data-test-id="test2">
 		<legend>Supersearch using <code>form</code> attribute</legend>
-		<SuperSearch bind:value {placeholder} form="form-outside" />
+		<SuperSearch name="q" bind:value {placeholder} form="form-outside" />
 	</fieldset>
-	<label>Placeholder:<input type="text" bind:value={placeholder} /></label>
 </form>
 
-<form action="test2" id="form-outside">
-	<textarea {value} hidden readonly name="q" maxlength={2048}></textarea>
-</form>
+<form action="test2" id="form-outside"></form>
+
+<label>Placeholder:<input type="text" bind:value={placeholder} /></label>