From f8812c394a82d9e623b083f6853476b5007996fd Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Mon, 21 Feb 2022 18:34:13 +0000
Subject: [PATCH] add prop required to prevent form submission if no options
 selected (closes #42)

---
 readme.md                     |  1 +
 src/components/Example.svelte | 36 ++++++++++++++++++++---------------
 src/lib/MultiSelect.svelte    | 16 ++++++++++++++++
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/readme.md b/readme.md
index b6d5a9c..190aaf5 100644
--- a/readme.md
+++ b/readme.md
@@ -107,6 +107,7 @@ Full list of props/bindable variables for this component:
 | `input`            | `undefined`             | Handle to the `<input>` DOM node.                                                                                                                                                                                                          |
 | `id`               | `undefined`             | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component.                                       |
 | `name`             | `id`                    | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
+| `required`         | `false`                 | Whether forms can be submitted without selecting any options. Aborts submission, is scrolled into view and shows help "Please fill out" message when true and user tries to submit with no options selected.                               |
 | `autoScroll`       | `true`                  | `false` disables keeping the active dropdown items in view when going up/down the list of options with arrow keys.                                                                                                                         |
 | `allowUserOptions` | `false`                 | Whether users are allowed to enter values not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected.                                                    |
 | `loading`          | `false`                 | Whether the component should display a spinner to indicate it's in loading state. Use `<slot name='spinner'>` to specify a custom spinner.                                                                                                 |
diff --git a/src/components/Example.svelte b/src/components/Example.svelte
index 0ccd471..28b2106 100644
--- a/src/components/Example.svelte
+++ b/src/components/Example.svelte
@@ -93,21 +93,27 @@
 
   <label for="fruit-select">Custom renderers for options and/or selected items</label>
 
-  <MultiSelect
-    id="fruit-select"
-    options={[`Banana`, `Watermelon`, `Apple`, `Dates`, `Mango`]}
-    {placeholder}
-    allowUserOptions="append"
-  >
-    <span let:idx let:option slot="option">
-      {idx + 1}. {option.label}
-      {option.label === `Mango` ? `🎉` : ``}
-    </span>
-    <span let:idx let:option slot="selected">
-      #{idx + 1}
-      {option.label}
-    </span>
-  </MultiSelect>
+  <form>
+    <MultiSelect
+      id="fruit-select"
+      options={[`Banana`, `Watermelon`, `Apple`, `Dates`, `Mango`]}
+      {placeholder}
+      allowUserOptions="append"
+      required
+    >
+      <span let:idx let:option slot="option">
+        {idx + 1}. {option.label}
+        {option.label === `Mango` ? `🎉` : ``}
+      </span>
+      <span let:idx let:option slot="selected">
+        #{idx + 1}
+        {option.label}
+      </span>
+    </MultiSelect>
+    <button style="border: none; border-radius: 2pt; margin: 5pt 5pt 8pt 0;"
+      >submit</button
+    > (form submission will abort if Multiselect is empty)
+  </form>
 </section>
 
 <style>
diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index 770deb7..3580ede 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -41,6 +41,7 @@
   export let allowUserOptions: boolean | 'append' = false
   export let autoScroll = true
   export let loading = false
+  export let required = false
 
   if (maxSelect !== null && maxSelect < 0) {
     console.error(`maxSelect must be null or positive integer, got ${maxSelect}`)
@@ -53,6 +54,10 @@
   })
 
   let wiggle = false
+  // formValue binds to input.form-control to prevent form submission if required
+  // prop is true and no options are selected
+  $: formValue = selectedValues.join(`,`)
+
   const dispatch = createEventDispatcher<DispatchEvents>()
 
   function isObject(item: unknown) {
@@ -225,6 +230,8 @@ display above those of another following shortly after it -->
   use:onClickOutside={() => setOptionsVisible(false)}
   use:onClickOutside={() => dispatch(`blur`)}
 >
+  <!-- invisible input, used only to prevent form submission if required=true and no options selected -->
+  <input {required} bind:value={formValue} tabindex="-1" class="form-control" />
   <ExpandIcon style="min-width: 1em; padding: 0 1pt;" />
   <ul class="selected {ulSelectedClass}">
     {#each selected as option, idx}
@@ -395,6 +402,15 @@ display above those of another following shortly after it -->
     font-size: calc(16px + 0.1vw);
     color: var(--sms-text-color, inherit);
   }
+  :where(div.multiselect > input.form-control) {
+    width: 2em;
+    position: absolute;
+    background: transparent;
+    border: none;
+    outline: none;
+    z-index: -1;
+    opacity: 0;
+  }
 
   :where(div.multiselect > ul.options) {
     list-style: none;