Skip to content
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.

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

Checkbox control does not update when using useArgs hook #18639

Closed
LogyLeo opened this issue Jul 6, 2022 · 1 comment
Closed

Checkbox control does not update when using useArgs hook #18639

LogyLeo opened this issue Jul 6, 2022 · 1 comment

Comments

@LogyLeo
Copy link

LogyLeo commented Jul 6, 2022

Describe the bug
I'm designing a component named Select featuring a list of options that the user can select/unselect. I'm basically using useArgs to sync its prop value (which contains the array of selected elements) with a check control.

export default {
  title: 'Components/Select',
  component: Select,
  argTypes: {
    value: { control: { type: 'check' }, options: ['option1', 'option2', 'option3', 'option4', 'option5'] }
  }
};

const Template = (args) => {
  const [_, updateArgs] = useArgs();
  return <Select {...args} onChange={v => updateArgs({ value: v })}/>;
}

export const Primary = Template.bind({});
Primary.args = { value: [] }

Changing the value by checking checkboxes in the control correctly affects the component, but not the other way around. Shouldn't selecting options in my component also check them in the control, if I'm not mistaken? The picture below sums up the issue.

image

To Reproduce
I feel like the problem is simple enough to reproduce with the template above. I'm using version 6.5.9, but I do not think it has been addressed in more recent versions of storybook.

System

System:
  OS: Windows 10 10.0.19044
  CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz  
Binaries:
  Node: 14.18.3 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD  
  npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Chrome: 103.0.5060.66
  Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.44)
npmPackages:
  @storybook/addon-actions: ^6.5.9 => 6.5.9 
  @storybook/addon-docs: ^6.5.9 => 6.5.9 
  @storybook/addon-essentials: ^6.5.9 => 6.5.9 
  @storybook/addon-links: ^6.5.9 => 6.5.9 
  @storybook/react: ^6.5.9 => 6.5.9 

Additional context
This looks VERY similar to issue n°15924 for Number controls, therefore I tried to implement a solution similar to commit n°17247 in controls/options/Checkbox.js, but unfortunately couldn't make it work: it looks like the Checkbox component properties aren't updated when the state of the component changes, as Checkbox does not even appear to be trying to rerender.

@shilman
Copy link
Member

shilman commented Nov 17, 2022

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.50 containing PR #19508 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Nov 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants