Controls: Fix undefined args handling in the URL

examples/official-storybook/stories/core/args.stories.js

@@ -64,3 +64,23 @@ DifferentSet.args = {
   foo: 'bar',
   bar: 2,
 };
+
+export const TestUndefinedArgs = Template.bind({});
+TestUndefinedArgs.args = {
+  first: 'Bob',
+  last: 'Miller',
+  foo: 'bar',
+};
+TestUndefinedArgs.argTypes = {
+  first: {
+    control: { type: 'select' },
+    options: ['Bob', 'Alice'],
+  },
+  last: {
+    control: { type: 'select' },
+    options: ['Miller', 'Meyer'],
+  },
+  foo: {
+    control: { type: 'text' },
+  },
+};

lib/store/src/args.test.ts

@@ -226,6 +226,11 @@ describe('validateOptions', () => {
     expect(validateOptions({ a: 1 }, { a: { options: [1, 2] } })).toStrictEqual({ a: 1 });
   });
 
+  // https://github.com/storybookjs/storybook/issues/17063
+  it('does not set args to `undefined` if they are unset and there are options', () => {
+    expect(validateOptions({}, { a: { options: [2, 3] } })).toStrictEqual({});
+  });
+
   it('includes arg if value is undefined', () => {
     expect(validateOptions({ a: undefined }, { a: { options: [1, 2] } })).toStrictEqual({
       a: undefined,

lib/store/src/args.ts

@@ -73,21 +73,25 @@ export const combineArgs = (value: any, update: any): Args => {
 
 export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
   return Object.entries(argTypes).reduce((acc, [key, { options }]) => {
-    if (!options) {
+    // Don't set args that are not defined in `args` (they can be undefined in there)
+    // see https://github.com/storybookjs/storybook/issues/15630 and
+    //   https://github.com/storybookjs/storybook/issues/17063
+    function allowArg() {
       if (key in args) {
         acc[key] = args[key];
       }
       return acc;
     }
 
+    if (!options) return allowArg();
+
     if (!Array.isArray(options)) {
       once.error(dedent`
         Invalid argType: '${key}.options' should be an array.
 
         More info: https://storybook.js.org/docs/react/api/argtypes
       `);
-      acc[key] = args[key];
-      return acc;
+      return allowArg();
     }
 
     if (options.some((opt) => opt && ['object', 'function'].includes(typeof opt))) {
@@ -96,17 +100,15 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
 
         More info: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
       `);
-      acc[key] = args[key];
-      return acc;
+      return allowArg();
     }
 
     const isArray = Array.isArray(args[key]);
     const invalidIndex = isArray && args[key].findIndex((val: any) => !options.includes(val));
     const isValidArray = isArray && invalidIndex === -1;
 
     if (args[key] === undefined || options.includes(args[key]) || isValidArray) {
-      acc[key] = args[key];
-      return acc;
+      return allowArg();
     }
 
     const field = isArray ? `${key}[${invalidIndex}]` : key;