Skip to content

Controls: Fix select / multiselect when value contains multiple spaces #22334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ndelangen merged 7 commits into from
Oct 9, 2023
Merged

Controls: Fix select / multiselect when value contains multiple spaces #22334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2191679
fix(Select.tsx): added value prop to select and multiselect
oxcened May 1, 2023
41dd534
fix(basics.stories.ts): fixed select and multiselect controls, added …
oxcened May 1, 2023
afd96e7
test(addon-controls.spec.ts): check that options which value contain …
oxcened May 1, 2023
1490497
Merge branch 'next' into fix-select-double-spaces
JReinhold Aug 29, 2023
68465b0
Merge branch 'next' into fix-select-double-spaces
ndelangen Sep 19, 2023
8dc11d5
Merge branch 'next' into fix-select-double-spaces
yannbf Oct 3, 2023
05eb71f
Merge branch 'next' into fix-select-double-spaces
ndelangen Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions code/addons/controls/template/stories/basics.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down
27 changes: 27 additions & 0 deletions code/e2e-tests/addon-controls.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.*/);
});
});
8 changes: 6 additions & 2 deletions code/ui/blocks/src/controls/options/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down