Merge pull request #22334 from oxcened/fix-select-double-spaces

Controls: Fix select / multiselect when value contains multiple spaces
storybookjs · Oct 9, 2023 · 77d2da2 · 77d2da2
2 parents 64e1ac9 + 05eb71f
commit 77d2da2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts
@@ -26,8 +26,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' },

diff --git 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.*/);
+  });
 });
diff --git 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>