Addon Actions is not handling React events properly #6471
Comments
vdh
changed the title
|
Im facing similar issue. |
|
Sounds like something weird is going on. Any chance you can provide a repro? |
|
@shilman I gave some example CLI commands to reproduce it, is there a better repro format or service to use? I tested it again just now and got the same issue (Chrome 73.0.3683.103, Storybook 5.0.10, Node v11.14.0) |
|
@vdh Sorry I missed that. I'll check it out! |
shilman
added
bug
good first issue
help wanted
and removed
needs reproduction
question / support
labels
|
Ok, I can reproduce. Marking this as a bug & will gratefully accept any PRs to fix! 🙇 |
|
Aside from the warning, what would be the desired behavior? |
|
@kohakukun Not causing warnings/errors, and consistent behaviour with what is described by the docs. So either update the behaviour to match the docs or vice versa. I assume the |
|
i'm actually hitting the |
|
I'm using I'm also getting the synthetic event is used for performance reasons error described above. I haven't updated react-dom. Source (
|
|
@alechp Can you open a separate issue? |
|
@shilman Roger. New issue created here: https://github.com/storybooks/storybook/issues/6827 |
|
I'm getting the following error when I listen to click even on a button and pass it to actions:- My code is as simple as Button component accepts the onClick and prop and sets on Versions are following:- |
|
i just wanted to pass this on. we have been having this issue for a while now (in JS, storybook-react) we fixed it with a small tweak to how we called actions. it seemed to be an issue of how the addon was serializing the date. maybe this just applies to us, but also maybe it'll help some folk fixed.
|
|
I'm also having this issue with the errors / warnings about reusing synthetic events. Any ideas to do a quick fix? There must be a way to wrap |
|
I'm having the same issue. Any workaround will be greatly appreciated. |
|
Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.39 containing PR #8690 that references this issue. Upgrade today to try it out! You can find this prerelease on the Closing this issue. Please re-open if you think there's still more to do. |
|
This shouldn't be closed. The PR explicitly states
You might consider modifying your release script to require the use of specific keywords to auto-close issues, like GitHub's native functionality. |
|
This is my solution to action logging concerning React synthetic events. The key is to set Use this facade for Storybook's import { action } from '@storybook/addon-actions';
/* Partial event logging, as full logging can be expensive/slow
* Invocation: partialLog('actionName')(eventObj, ...args)
*/
export const partialAction = (actionName) => {
const beacon = action(actionName);
return (eventObj, ...args) => {
beacon({ ...eventObj, view: undefined }, ...args);
};
};Literal example in a story: const Template: Story<AccordionProps> = (args) => <Accordion {...args} />;
export const Simple = Template.bind({});
Simple.args = {
header: 'Hello World',
body: 'This is my example accordion.',
onChange: partialAction('onChange'), // fires whenever my accordion expands or collapses
};This fix gets rid of React error message: It's a good compromise of logging nearly all the data (except the 'view' property), and keeping Storybook fast. |
|
Hey @shilman, how are you? Do you know by any chance if this is being taken care of in the next release (6.2.0)? Since it is kinda related with performance |
|
@luissmg nope! PRs welcome tho and I can try to squeeze it in |
|
Alright! Does the workaround on the top look "ok"? It might be something to be considered adding. I can try to handle that in the next couple days |
|
We want to address this in 6.3. If you want to contribute to Storybook, we'll prioritize PR review for any fixes here. And if you'd like any help getting started, please jump into the #support channel on our Discord: https://discord.gg/storybook |
|
Hey y'all, i noticed this issue, specifically, as it impacted performance since a structured clone of the window object is attempted on every action (as previously mentioned). I've drafted up a PR at #16514, and would like feedback on it! thanks! |
|
So far, I've been using the workaround of manually bypassing events for every use of import { action } from '@storybook/addon-actions';
import MyComponent, { MyComponentProps } from './MyComponent';
type OnChange = MyComponentProps['onChange'];
const changeAction = action('Change');
const mockOnChange: OnChange = event => {
const newValue = event.target.value;
changeAction(newValue);
}; |
|
Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.33 containing PR #16514 that references this issue. Upgrade today to the Closing this issue. Please re-open if you think there's still more to do. |
|
¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-rc.0 containing PR #16514 that references this issue. Upgrade today to the |
|
The RC didn't help me with the synthetic event error, I'm still getting it in my project for actions auto-generated via |
|
@michal-kurz do you have any reproduction case that i can take a look at? (even if it's not clean). I'm not sure what exactly you mean by "clean repo", and i don't know which exact library you're talking about (material-ui? which one? etc). Basically, i wrote this fix in a way to detect that the event is a synthetic event in a best-effort approach, which means that we can only detect that it's a synthetic event when using the development build of react and when function names arent mangled. At the time, i didnt really look at what react is doing in creating a synthetic event or if |
|
@forivall I did manage to make a reproduction scenario today! In my previous attempt I was on React version 17, but synthetic event pooling was removed in 17.0.0. I just remembered that today, went to my previous attempt, bumped down React version to 16 and sure enough the error is there, on I made the scenario as a separate branch on a repo I made earlier to demonstrate a different issue. Here it is. The reproduction scenario is described in the branch README. I think the example will answer all of your questions better than I could :). But if there's something I can add, let me know! Also, if you do find the time to look at it, would you mind answering the following question, please? Do you think the errors could be the reason for the extremely long delay before hovering the element and the tooltip actually showing up? Or is there something else you suspect? Finding out an answer to that would help me greatly :) Thank you very much! |
|
Sorry, i haven't had a chance to take a look yet. |
Describe the bug
Attempting to use
actionfrom@storybook/addon-actionscauses console errors and the output doesn't match the docs, possibly due to how the React Synthetic Events are being serialized.To Reproduce
Then the demo button in the "Button" "with Text" story is clicked. Google Chrome gives a deprecation warning:
The output in the Storybook Actions addon panel doesn't match the output shown in the docs, reading as
clicked: [Class]instead of theclicked: ["[SyntheticEvent]", null, "[SyntheticEvent]"]shown on https://storybook.js.org/docs/addons/introduction/Additionally, if
reactandreact-domis downgraded to16.3.2(the version I was using when I encountered the issue), there is also another console error:Expected behavior
No console errors or warnings, and for the Action panel to match the docs.
System:
react@^16.8.6
react-dom@^16.8.6
react-scripts@2.1.8
@storybook/react@^5.0.6
@storybook/addon-actions@^5.0.6
@storybook/addon-links@^5.0.6
@storybook/addons@^5.0.6
@babel/core@^7.4.3
babel-loader@^8.0.5
Additional context
I was unable to recreate this additional error, but in my own setup I also saw
telejson/JSON.stringifychoke on something (Date-related?) with an error ofUncaught TypeError: toISOString is not a functionThe text was updated successfully, but these errors were encountered: