question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`react-transition-group` callbacks called with undefined argument

See original GitHub issue
  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Some callbacks (e.g. onExited) are called with undefined argument.

props.onExited(node, undefined)

Expected Behavior 🤔

Callbacks to be called with the right arguments accordingly

props.onExited(node)
props.onEntered(node, isAppearing)

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-ghrv2

Steps:

  1. Toggle the “show” switch twice
  2. check the console. Callback is called with node and undefined arguments.

Context 🔦

It may not be as important if people are using the callbacks as is, but in notistack I need to call the callbacks with an additional argument (snackbar’s unique id). And having an undefined agument creates a gap.

This caused a bug in latest release of notistack. Where I was expecting to receive snackbar’s unique key as the second argument, but I was receiving it as the third argument. The fix was released as a temporary solution.

Issue is introduced in https://github.com/mui-org/material-ui/pull/20952/. More specifically, any instances in the following form should be fixed: example. Alternatively normalizedTransitionCallback can be modified.

- const handleExited = normalizedTransitionCallback(onExited);
+ const handleExited = normalizedTransitionCallback((node) => {
    onExited(node)
});

The reason being normalizedTransitionCallback always calls the callback with 2 arguments. This is the case for some callbacks which have isApearing as the second argument. But don’t apply to others (e.g. onExited) where it’s called with one argument (that being node).

Happy to create a PR once the bug is confirmed.

Your Environment 🌎

Tech Version
Material-UI v4.9.14
React v16.12.0
Browser Chrome
TypeScript v3.8.3

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
iamhosseindhvcommented, May 18, 2020

Sounds fair 👍🏼I’ll open a PR in the upcoming days

0reactions
eps1loncommented, May 18, 2020

If you want to spend time on the issue then go ahead. It’s open source after all. But we won’t spend time on it since it looks like this is a dev only warning about a possible extraneous parameter that can be fixed in userland.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-transition-group callbacks called with undefined ... - GitHub
Some callbacks (e.g. onExited ) are called with undefined argument. props.onExited(node, undefined) ...
Read more >
React Transition Group
Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Timeouts are still used as...
Read more >
React 'this' undefined when calling a callback function in a ...
Closed 2 years ago. I have a class component as a parent and a functional component as a child of the class component....
Read more >
Animation Add-Ons - React
The ReactTransitionGroup add-on component is a low-level API for animation, ... It will block other animations from occurring until callback is called.
Read more >
react-addons-css-transition-group | Yarn - Package Manager
We recommend you to use CSSTransitionGroup from react-transition-group instead. ... Provide a component stack as a second argument to onRecoverableError .
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found