From 21916797bc44249f940710b9f4d0de48e414ad4d Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen.ajam@live.com>
Date: Mon, 1 May 2023 18:57:43 +0200
Subject: [PATCH 1/3] fix(Select.tsx): added value prop to select and
 multiselect

---
 code/ui/blocks/src/controls/options/Select.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx
index f033c131bd7..b05d58a4a3a 100644
--- a/code/ui/blocks/src/controls/options/Select.tsx
+++ b/code/ui/blocks/src/controls/options/Select.tsx
@@ -110,7 +110,9 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
           {NO_SELECTION}
         </option>
         {Object.keys(options).map((key) => (
-          <option key={key}>{key}</option>
+          <option key={key} value={key}>
+            {key}
+          </option>
         ))}
       </OptionsSelect>
     </SelectWrapper>
@@ -131,7 +133,9 @@ const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
     <SelectWrapper>
       <OptionsSelect id={controlId} multiple value={selection} onChange={handleChange}>
         {Object.keys(options).map((key) => (
-          <option key={key}>{key}</option>
+          <option key={key} value={key}>
+            {key}
+          </option>
         ))}
       </OptionsSelect>
     </SelectWrapper>

From 41dd534a5f777ec7babe8e4cdbda19cb5e30f9db Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen.ajam@live.com>
Date: Mon, 1 May 2023 19:03:08 +0200
Subject: [PATCH 2/3] fix(basics.stories.ts): fixed select and multiselect
 controls, added double space option

---
 code/addons/controls/template/stories/basics.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts
index 51acda9c1f2..6d2224d8012 100644
--- a/code/addons/controls/template/stories/basics.stories.ts
+++ b/code/addons/controls/template/stories/basics.stories.ts
@@ -25,8 +25,8 @@ export default {
       control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
     },
     inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
-    select: { control: { type: 'select', options: ['a', 'b', 'c'] } },
-    multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } },
+    select: { control: 'select', options: ['a', 'b', 'c', 'double  space'] },
+    multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double  space'] },
     range: { control: 'range' },
     rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
     text: { control: 'text' },

From afd96e736acc58b2d6fe1abecac4b68fec887b5c Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen.ajam@live.com>
Date: Mon, 1 May 2023 19:07:21 +0200
Subject: [PATCH 3/3] test(addon-controls.spec.ts): check that options which
 value contain double spaces work

---
 code/e2e-tests/addon-controls.spec.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts
index bcbf9601994..df376782aae 100644
--- a/code/e2e-tests/addon-controls.spec.ts
+++ b/code/e2e-tests/addon-controls.spec.ts
@@ -70,4 +70,31 @@ test.describe('addon-controls', () => {
     const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue();
     await expect(label).toEqual('Hello world');
   });
+
+  test('should set select option when value contains double spaces', async ({ page }) => {
+    await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
+
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+    await sbPage.viewAddonPanel('Controls');
+    await sbPage.panelContent().locator('#control-select').selectOption('double  space');
+
+    await expect(sbPage.panelContent().locator('#control-select')).toHaveValue('double  space');
+    await expect(page).toHaveURL(/.*select:double\+\+space.*/);
+  });
+
+  test('should set multiselect option when value contains double spaces', async ({ page }) => {
+    await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
+
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+    await sbPage.viewAddonPanel('Controls');
+    await sbPage.panelContent().locator('#control-multiSelect').selectOption('double  space');
+
+    await expect(sbPage.panelContent().locator('#control-multiSelect')).toHaveValue(
+      'double  space'
+    );
+
+    await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/);
+  });
 });