From 73d796d9bba73500f6b0556d9d98ef4bb4bf2f78 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Mon, 15 May 2023 07:42:48 -0700
Subject: [PATCH 1/4] allow suppressing createOptionMsg is falsy console error
 by setting createOptionMsg=null

---
 src/lib/MultiSelect.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index 7f22795..3f91349 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -8,7 +8,7 @@
 
   export let activeIndex: number | null = null
   export let activeOption: Option | null = null
-  export let createOptionMsg: string = `Create this option...`
+  export let createOptionMsg: string | null = `Create this option...`
   export let allowUserOptions: boolean | 'append' = false
   export let allowEmpty: boolean = false // added for https://github.com/janosh/svelte-multiselect/issues/192
   export let autocomplete: string = `off`
@@ -128,9 +128,9 @@
         `user re-orderings of selected options will be undone by sortSelected on component re-renders.`
     )
   }
-  if (allowUserOptions && !createOptionMsg) {
+  if (allowUserOptions && !createOptionMsg && createOptionMsg !== null) {
     console.error(
-      `MultiSelect's allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
+      `MultiSelect has allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
         `This prevents the "Add option" <span> from showing up, resulting in a confusing user experience.`
     )
   }

From 1198d22f65c6f6d69e27d9c97d6d47f216799d7f Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Mon, 15 May 2023 07:42:58 -0700
Subject: [PATCH 2/4] readme document null option for createOptionMsg and
 expected developer intent

---
 readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/readme.md b/readme.md
index 5046ee2..6e8dc20 100644
--- a/readme.md
+++ b/readme.md
@@ -90,10 +90,10 @@ Full list of props/bindable variables for this component. The `Option` type you
    Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.
 
 1. ```ts
-   createOptionMsg: string = `Create this option...`
+   createOptionMsg: string | null = `Create this option...`
    ```
 
-   Message shown to users after entering text when no options match their query and `allowUserOptions` is truthy.
+   The message shown to users when `allowUserOptions` is truthy and they entered text that doesn't match any existing options to suggest creating a new option from the entered text. Emits `console.error` if `allowUserOptions` is `true` or `'append'` and `createOptionMsg=''` to since users might be unaware they can create new option. The error can be silenced by setting `createOptionMsg=null` indicating developer intent is to e.g. use MultiSelect as a tagging component where a user message might be unwanted.
 
 1. ```ts
    allowEmpty: boolean = false

From 8eb78925b7be8ff266180e43a87d026f604476fa Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Mon, 15 May 2023 07:43:26 -0700
Subject: [PATCH 3/4] silence console error on /allow-user-options demo page

---
 src/routes/(demos)/allow-user-options/+page.svx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(demos)/allow-user-options/+page.svx b/src/routes/(demos)/allow-user-options/+page.svx
index 9ad62a7..078396a 100644
--- a/src/routes/(demos)/allow-user-options/+page.svx
+++ b/src/routes/(demos)/allow-user-options/+page.svx
@@ -55,7 +55,7 @@
 
 ## Start empty
 
-You can start with no options and let users populate MultiSelect from scratch. In this case MultiSelect acts more like a tagging component.
+You can start with no options and let users populate MultiSelect from scratch. In this case, MultiSelect acts more like a tagging component.
 
 ```svelte example stackblitz id="no-default-options"
 <script>
@@ -72,6 +72,6 @@ You can start with no options and let users populate MultiSelect from scratch. I
   allowUserOptions="append"
   bind:selected
   noMatchingOptionsMsg=""
-  createOptionMsg=""
+  createOptionMsg={null}
 />
 ```

From 11e6af33d38e63a27127146472b603994b77179c Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Mon, 15 May 2023 07:43:48 -0700
Subject: [PATCH 4/4] add unit test checking no console error when
 createOptionMsg=null

---
 tests/unit/MultiSelect.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/unit/MultiSelect.test.ts b/tests/unit/MultiSelect.test.ts
index f33f9cf..c8be072 100644
--- a/tests/unit/MultiSelect.test.ts
+++ b/tests/unit/MultiSelect.test.ts
@@ -925,7 +925,7 @@ test.each([[true], [false]])(
 )
 
 describe.each([[true], [false]])(`allowUserOptions=%s`, (allowUserOptions) => {
-  test.each([[`create option`], [``]])(
+  test.each([[`create option`], [``], [null]])(
     `console.error when allowUserOptions is truthy but createOptionMsg is falsy`,
     async (createOptionMsg) => {
       console.error = vi.fn()
@@ -935,10 +935,10 @@ describe.each([[true], [false]])(`allowUserOptions=%s`, (allowUserOptions) => {
         props: { options: [1, 2, 3], createOptionMsg, allowUserOptions },
       })
 
-      if (allowUserOptions && !createOptionMsg) {
+      if (allowUserOptions && !createOptionMsg && createOptionMsg !== null) {
         expect(console.error).toHaveBeenCalledTimes(1)
         expect(console.error).toHaveBeenCalledWith(
-          `MultiSelect's allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
+          `MultiSelect has allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
             `This prevents the "Add option" <span> from showing up, resulting in a confusing user experience.`
         )
       } else {