Fix/17063/avoid undefined args

[evont]

Issue: #17063

What I did

fix args values not present in url are casted to !undefined for controls of type select and radio issue

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 471fb5c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[kylegach]

Thank for fixing this important issue, @evont! And with your very first contribution. 👏

@shilman @tmeasday — This change seems sound to me, but the args code in general is likely quite nuanced and I think it would benefit from you taking a look as well. Also, is it OK that this PR is against main instead of next?

[kylegach]

@evont — I'd do this myself, but I cannot push to your fork's branch. Can you please add this story, to the examples/official-storybook/stories/core/args.stories.js file?

export const TestUndefinedArgs = Template.bind({});
TestUndefinedArgs.args = {
  first: 'Bob',
  last: 'Miller',
  foo: 'bar',
};
TestUndefinedArgs.argTypes = {
  first: {
    options: ['Bob', 'Alice'],
  },
  last: {
    options: ['Miller', 'Meyer'],
  },
  foo: {
    control: { type: 'text' },
  },
};

That will allow maintainers to easily test your change (use the same repro steps as the linked issue) in the deployed Storybook. Thanks!

[shilman]

Hi @evont @kylegach -- thanks for the fix! Indeed all PRs should go against next not main unless it's a special case, which AFAICT this is not. Please rebase & retarget the PR. 🙏

[tmeasday]

Thanks for the contribution @evont. Can you please add test case(s) that demonstrate the original problem?

[tmeasday]

This check for args[key] === undefined seems a little pointless if we later do if (key in args). Do we understand why the code was there in the first place? We should get rid of it, and perhaps figure that out.

[tmeasday]

Or does it remain here to avoid the warning lower down?

[evont]

key in args is not the same as the check for args[key] === undefined, caused if the key is existed in args, but is set as undefined, it shall pass the if condition. In the other hand, if the key is not existed in args, the value will still be undefined, then it will pollute the acc and turn out the param will become undefined

[evont]

@evont — I'd do this myself, but I cannot push to your fork's branch. Can you please add this story, to the examples/official-storybook/stories/core/args.stories.js file?

export const TestUndefinedArgs = Template.bind({});
TestUndefinedArgs.args = {
  first: 'Bob',
  last: 'Miller',
  foo: 'bar',
};
TestUndefinedArgs.argTypes = {
  first: {
    options: ['Bob', 'Alice'],
  },
  last: {
    options: ['Miller', 'Meyer'],
  },
  foo: {
    control: { type: 'text' },
  },
};

That will allow maintainers to easily test your change (use the same repro steps as the linked issue) in the deployed Storybook. Thanks!

Sure, with pleasure, I have added it and push it to the branch, except I added control: { type: 'select' } because it is odd that if I don't do that, the options will not transform into select but text

[evont]

Sorry for my mistake, fork from main branch and rebase to next will be that tough, so I decided to fork form next and make a new PR, please check in this new PR
@tmeasday @kylegach @shilman

[shilman]

Thanks @evont! Closing this in favor of #18135