diff --git a/code/addons/docs/src/blocks/controls/options/Select.tsx b/code/addons/docs/src/blocks/controls/options/Select.tsx index 725a7f28a9ad..334c12e6cf4c 100644 --- a/code/addons/docs/src/blocks/controls/options/Select.tsx +++ b/code/addons/docs/src/blocks/controls/options/Select.tsx @@ -120,7 +120,7 @@ const SingleSelect: FC = ({ name, value, options, onChange, argType {name} - {Object.keys(options).map((key) => ( diff --git a/code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx b/code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx index 71e28da394d4..01fea240177c 100644 --- a/code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx +++ b/code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; -import { fn } from 'storybook/test'; +import { expect, fn, userEvent } from 'storybook/test'; import { OptionsControl } from './Options'; @@ -70,6 +70,28 @@ export const ArrayUndefined: Story = { }, }; +export const ArrayResettable: Story = { + args: { + value: undefined, + }, + play: async ({ canvas, args }) => { + const select = canvas.getByRole('combobox'); + expect(select).toHaveValue('Choose option...'); + + await userEvent.click(select); + await userEvent.selectOptions(select, arrayOptions[2]); + + expect(args.onChange).toHaveBeenCalledWith(arrayOptions[2]); + expect(select).toHaveValue(arrayOptions[2]); + + await userEvent.click(select); + await userEvent.selectOptions(select, 'Choose option...'); + + expect(args.onChange).toHaveBeenCalledWith(undefined); + expect(select).toHaveValue('Choose option...'); + }, +}; + export const ArrayMultiUndefined: Story = { args: { type: 'multi-select',