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.

Sign up for GitHub

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

Jump to bottom

[Bug]: Storybook action logs eventName:{name: eventName, args: false} for false value works with boolean true value #22163

Closed
tejas-ansys opened this issue Apr 19, 2023 · 10 comments · Fixed by #26917
Closed

[Bug]: Storybook action logs eventName:{name: eventName, args: false} for false value works with boolean true value #22163

tejas-ansys opened this issue Apr 19, 2023 · 10 comments · Fixed by #26917
Labels
addon: actions question / support

Comments

@tejas-ansys
Copy link

tejas-ansys commented Apr 19, 2023 •
edited by shilman

Describe the bug

Hello,
I am having button component which is emitting value as a boolean value.
Storybook shows the value in the action tab as eventName say click then
click:true if value emitted is true but if we are emitting a value false then it logs click:{name: "clicked", args: false}} which is not correct. I tried this with both angular and react project which is not working.
It should emit click:false rather than click:{name: "clicked", args: false}}.
Screenshot 2023-04-19 154308

To Reproduce

///component.tsx
import React from 'react';

const Buttons: React.FunctionComponent<any> = (props) => {
  let val = false;
  const onClickHandler = () => {
    val = !val;
    props.onClick(val);
  };

  return (
    <button className="button" onClick={onClickHandler}>Button</button>
  );
};

export default Buttons;


// stories.tsx

import { Meta, Story } from '@storybook/react/types-6-0';
import React from 'react';
import Buttons from '.';

export default {
  title: 'Misc/Action Bar',
  argTypes: { onClick: { action: 'clicked' } },
} as Meta;

const Template: Story<any> = (args) => {
  return <Buttons {...args} />;
};

export const BasicDemo = Template.bind({});

BasicDemo.args = {};

System

No response

Additional context

No response
@shilman
Copy link
Member

shilman commented Apr 20, 2023

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

@tejas-ansys
Copy link
Author

tejas-ansys commented Apr 20, 2023 •
edited

@shilman
please have a look at this:
https://stackblitz.com/edit/github-xyklgy?file=src%2Fstories%2FButton.tsx,src%2Fstories%2FButton.stories.ts&preset=node

Goto button stories and click on button. Then check actions tab.

@chloeaallison
Copy link

@shilman Is there any update on this issue?

@homj
Copy link

homj commented May 5, 2023

I have the same issue. Emitting true is being logged correctly, but false is logged as an object

Bildschirmfoto 2023-05-05 um 12 13 42

@loyaj
Copy link

loyaj commented May 5, 2023

This incongruence has bothered my team for a while as well. It would be good to at least know the rationale. A similar thing happens when calling an action handler function and passing no arguments. Sometimes I’ve resorted to wrapping the handler and passing an empty object to keep the log clean, but ideally in this situation the UI would just show the action name without any arguments.

@github-actions github-actions bot added the Stale label Jul 6, 2023
@storybookjs storybookjs deleted a comment from github-actions bot Jul 6, 2023
@chloeaallison
Copy link

@shilman Is there any update here?

@QuentinLeCaignec
Copy link

I'm encountering this bug as well, any updates?

@takumi-ricoh
Copy link

I'm also suffering from the same bug.

@Fatcat560
Copy link
Contributor

A colleague and me at work encountered this problem too. After digging around in the source code, we believe this line is the culprit here:

storybook/code/addons/actions/src/components/ActionLogger/index.tsx

Line 53 in c8f7090

data={action.data.args || action.data}

Any value we pass as argument that evaluates falsey would be replaced by the whole data object, which is exactly what is happening here.

Simply replacing the or (||) operator with the nullish coalescing (??) operator should fix the issue.

If I find the time this weekend I'll try to create a PR for this issue.

@Fatcat560
Copy link
Contributor

I had some time today to try this one out. In the test stories included, the old behaviour was easy to replicate by simply randomly flipping a boolean:
behaviour_prev_bool

This also happens with a counter once it would reach 0:
behaviour_prev_num

With the proposed change, the booleans and numbers would get printed as one would expect:
behaviour_new_bool
behaviour_new_num

@ndelangen @yannbf sorry for the pings but I saw your names as the code owners for the actions addon. Would such a change be welcome?

@Fatcat560 Fatcat560 mentioned this issue Apr 22, 2024
Merged
8 tasks
@Spielboerg Spielboerg mentioned this issue Apr 29, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
addon: actions question / support
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Addon-actions: Fix falsy args printing as object - 22163 Fatcat560/storybook_actionPrint
8 participants
@shilman @homj @QuentinLeCaignec @chloeaallison @Fatcat560 @takumi-ricoh @tejas-ansys @loyaj