Merge pull request #33289 from storybookjs/sidnioulz/issue-12641

Controls: Allow resetting the Select control

Author: valentinpalkovic

code/addons/docs/src/blocks/controls/options/Select.tsx

@@ -120,7 +120,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange, argType
         {name}
       </label>
       <OptionsSelect disabled={readonly} id={controlId} value={selection} onChange={handleChange}>
-        <option key="no-selection" disabled>
+        <option disabled={selection === NO_SELECTION} key="no-selection">
           {NO_SELECTION}
         </option>
         {Object.keys(options).map((key) => (

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',