From 3f3be148a59ebbcc63917d2e581fe430c981837a Mon Sep 17 00:00:00 2001
From: John Huang <john.huang@clever.com>
Date: Fri, 21 May 2021 22:27:31 -0700
Subject: [PATCH 1/2] render spaces as nbsp

---
 src/MultiSelect/MultiSelect.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/MultiSelect/MultiSelect.tsx b/src/MultiSelect/MultiSelect.tsx
index 0f2b4737f..068bf70a3 100644
--- a/src/MultiSelect/MultiSelect.tsx
+++ b/src/MultiSelect/MultiSelect.tsx
@@ -170,7 +170,10 @@ const MultiSelect: React.FC<Props> = ({
             setInputValue("");
             let newOption = selectedItem;
             if (selectedItem.value === ADD_NEW_ITEM_KEY) {
-              newOption = { value: inputValue, label: inputValue };
+              newOption = {
+                value: inputValue,
+                label: inputValue.replace(/ /g, "\u00a0"),
+              };
               setOptions([...options, newOption]);
             }
             onChange([...selectedItems, newOption].map((o) => o.value));
@@ -283,7 +286,9 @@ const MultiSelect: React.FC<Props> = ({
                   key={`${o.value}${i}`}
                   {...getItemProps({ item: o, index: i })}
                 >
-                  {isAddNewItemOption ? `Add "${inputValue}"` : o.customLabel || o.label}
+                  {isAddNewItemOption
+                    ? `Add "${inputValue.replace(/ /g, "\u00a0")}"`
+                    : o.customLabel || o.label}
                 </li>
               );
             })

From d0a969d8a38d8e31582511e8e8d69944201ef436 Mon Sep 17 00:00:00 2001
From: John Huang <john.huang@clever.com>
Date: Fri, 21 May 2021 23:09:30 -0700
Subject: [PATCH 2/2] show labels with nbsp too

---
 src/MultiSelect/MultiSelect.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/MultiSelect/MultiSelect.tsx b/src/MultiSelect/MultiSelect.tsx
index 068bf70a3..4119451ec 100644
--- a/src/MultiSelect/MultiSelect.tsx
+++ b/src/MultiSelect/MultiSelect.tsx
@@ -223,7 +223,7 @@ const MultiSelect: React.FC<Props> = ({
               {...getSelectedItemProps({ selectedItem: item, index: i })}
             >
               <Label className={cssClass.SELECTED_ITEM_CONTAINER}>
-                {item.customLabel || item.label}
+                {item.customLabel || item.label.replace(/ /g, "\u00a0")}
                 <span
                   className={cssClass.SELECTED_ITEM_BUTTON}
                   onClick={(e) => {
@@ -288,7 +288,7 @@ const MultiSelect: React.FC<Props> = ({
                 >
                   {isAddNewItemOption
                     ? `Add "${inputValue.replace(/ /g, "\u00a0")}"`
-                    : o.customLabel || o.label}
+                    : o.customLabel || o.label.replace(/ /g, "\u00a0")}
                 </li>
               );
             })