Skip to content

Commit 7cfe02f

Browse files
author
Ibrahim Haizel
committed
feat: add submit button functionality example for MultiSelectSearchAutocomplete with form integration
1 parent 1f50366 commit 7cfe02f

File tree

3 files changed

+174
-1
lines changed

3 files changed

+174
-1
lines changed

‎src/lib/components/ui/MultiSelectSearchAutocomplete.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1789,7 +1789,7 @@
17891789
>
17901790
{#snippet rightIcon()}
17911791
<button
1792-
type="button"
1792+
type="submit"
17931793
class="search-addon-btn"
17941794
aria-label="Search"
17951795
title="Search"

‎src/wrappers/components/ui/multi-select-search-autocomplete/Examples.svelte‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
let globalNextIndex = 0;
1414
let globalSelectedValues = []; // Shared selected values between components
1515
16+
// State variable for submit button demo
17+
let selectedValuesForSubmit = [];
18+
1619
// GOV.UK color palette for the example
1720
const selectedItemCircleColorPalette = [
1821
"#1d70b8", // Blue (primary)
@@ -71,6 +74,11 @@
7174
heading: "7. Custom Source Selector Logic",
7275
content: Example7,
7376
},
77+
{
78+
id: "8",
79+
heading: "8. Submit Button Functionality",
80+
content: Example8,
81+
},
7482
];
7583
</script>
7684

@@ -566,3 +574,87 @@
566574
</div>
567575
<CodeBlock code={codeBlocks.codeBlock7} language="svelte"></CodeBlock>
568576
{/snippet}
577+
578+
<!-- Example 8: Submit Button Functionality -->
579+
{#snippet Example8()}
580+
<div class="p-5 bg-white space-y-6">
581+
<div>
582+
<h6 class="govuk-heading-s">Submit Button Demo:</h6>
583+
<p class="govuk-body">
584+
This example demonstrates how the submit button (search icon) works when
585+
the component is placed inside a form. Click the search icon to see the
586+
currently selected values.
587+
</p>
588+
</div>
589+
590+
<form
591+
onsubmit={(e) => {
592+
e.preventDefault();
593+
alert(
594+
`Form submitted with selected values: ${JSON.stringify(selectedValuesForSubmit, null, 2)}`,
595+
);
596+
}}
597+
class="govuk-form-group"
598+
>
599+
<MultiSelectSearchAutocomplete
600+
id="submit-demo-select"
601+
name="submit-demo"
602+
label="Select multiple options"
603+
hint="Select some options, then click the search icon to submit the form"
604+
items={[
605+
{ value: "option1", text: "Option 1" },
606+
{ value: "option2", text: "Option 2" },
607+
{ value: "option3", text: "Option 3" },
608+
{ value: "option4", text: "Option 4" },
609+
{ value: "option5", text: "Option 5" },
610+
]}
611+
multiple={true}
612+
bind:value={selectedValuesForSubmit}
613+
/>
614+
615+
<div class="govuk-!-margin-top-4">
616+
<Button
617+
buttonType="default"
618+
textContent="Submit Form (Regular Button)"
619+
noPadding={true}
620+
onClickFunction={() => {
621+
// This will be handled by the form's onsubmit
622+
}}
623+
/>
624+
625+
<div class="govuk-body govuk-! govuk-!-margin-top-2">
626+
<span class="govuk-!-margin-right-2"
627+
>Or click the search icon above to submit</span
628+
>
629+
<span class="govuk-!-font-weight-bold">→</span>
630+
</div>
631+
</div>
632+
</form>
633+
634+
<div class="govuk-inset-text">
635+
<h6 class="govuk-heading-s govuk-!-margin-top-0">How it works:</h6>
636+
<div class="govuk-body">
637+
<p>
638+
The search icon button inside <code
639+
>MultiSelectSearchAutocomplete</code
640+
>
641+
has <code>type="submit"</code>, making it functional when placed
642+
inside a form.
643+
</p>
644+
<p>
645+
<strong>Current selected values:</strong>
646+
{selectedValuesForSubmit.length > 0
647+
? selectedValuesForSubmit.join(", ")
648+
: "None selected"}
649+
</p>
650+
<p
651+
class="govuk-!-margin-top-4 govuk-! govuk-body govuk-!-font-weight-bold"
652+
>
653+
<strong>Try it:</strong> Select some options above, then click the search
654+
icon to submit the form and see the selected values.
655+
</p>
656+
</div>
657+
</div>
658+
</div>
659+
<CodeBlock code={codeBlocks.codeBlock8} language="svelte"></CodeBlock>
660+
{/snippet}

‎src/wrappers/components/ui/multi-select-search-autocomplete/codeBlocks.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,3 +404,84 @@ export const codeBlock7 = `
404404
return "options";
405405
}}
406406
/>`;
407+
408+
export const codeBlock8 = `
409+
<script>
410+
import MultiSelectSearchAutocomplete from "$lib/components/ui/MultiSelectSearchAutocomplete.svelte";
411+
import Button from "$lib/components/ui/Button.svelte";
412+
413+
// State variable for submit button demo
414+
let selectedValuesForSubmit = [];
415+
</script>
416+
417+
<div class="p-5 bg-white space-y-6">
418+
<div>
419+
<h6 class="govuk-heading-s">Submit Button Demo:</h6>
420+
<p class="govuk-body">
421+
This example demonstrates how the submit button (search icon) works when
422+
the component is placed inside a form. Click the search icon to see the
423+
currently selected values.
424+
</p>
425+
</div>
426+
427+
<form
428+
onsubmit={(e) => {
429+
e.preventDefault();
430+
alert(\`Form submitted with selected values: \${JSON.stringify(selectedValuesForSubmit, null, 2)}\`);
431+
}}
432+
class="govuk-form-group"
433+
>
434+
<MultiSelectSearchAutocomplete
435+
id="submit-demo-select"
436+
name="submit-demo"
437+
label="Select multiple options"
438+
hint="Select some options, then click the search icon to submit the form"
439+
items={[
440+
{ value: "option1", text: "Option 1" },
441+
{ value: "option2", text: "Option 2" },
442+
{ value: "option3", text: "Option 3" },
443+
{ value: "option4", text: "Option 4" },
444+
{ value: "option5", text: "Option 5" }
445+
]}
446+
multiple={true}
447+
bind:value={selectedValuesForSubmit}
448+
/>
449+
450+
<div class="govuk-button-group">
451+
<Button
452+
buttonType="default"
453+
textContent="Submit Form (Regular Button)"
454+
noPadding={true}
455+
onClickFunction={() => {
456+
// This will be handled by the form's onsubmit
457+
}}
458+
/>
459+
460+
<div class="govuk-body govuk-! govuk-!-margin-top-2">
461+
<span class="govuk-!-margin-right-2">Or click the search icon above to submit</span>
462+
<span class="govuk-!-font-weight-bold">→</span>
463+
</div>
464+
</div>
465+
</form>
466+
467+
<div class="govuk-inset-text">
468+
<h6 class="govuk-heading-s govuk-!-margin-top-0">How it works:</h6>
469+
<div class="govuk-body">
470+
<p>
471+
The search icon button inside <code>MultiSelectSearchAutocomplete</code>
472+
has <code>type="submit"</code>, making it functional when placed
473+
inside a form.
474+
</p>
475+
<p>
476+
<strong>Current selected values:</strong>
477+
{selectedValuesForSubmit.length > 0
478+
? selectedValuesForSubmit.join(", ")
479+
: "None selected"}
480+
</p>
481+
<p class="govuk-!-margin-top-4 govuk-! govuk-body govuk-!-font-weight-bold">
482+
<strong>Try it:</strong> Select some options above, then click the search
483+
icon to submit the form and see the selected values.
484+
</p>
485+
</div>
486+
</div>
487+
</div>`;

0 commit comments

Comments
 (0)