material-ui: [transitions] "Cannot read property `scrollTop` of null"

Also facing the same problem… so are you saying that if the child is a styled-component and does not have a forwardRef it would not work…? Shouldn’t the Fade (or all transitions) work with or without a ref?

We have many components that are just plain styled-components without a ref (because there were simply no need to use a ref) but now we have to add it everywhere just to get transition to work??

Perhaps all transitions should wraps the child with a plain div instead?

The workaround I had to do, was to manually wrap the children with another div… 👎

      <Fade in={visible} timeout={1000}>
        <div>{children}</div>
      </Fade>

Thanks - this saved me some debugging. I had this construct:

<Zoom in timeout={200}>
  <React.Fragment>

Fixed by adding the actual components as the only child, e.g.,

<Zoom in timeout={200}>
  <Fab>

This issue is still existing and was not available with MUI 4. This can cause the a project with hundreds of components to crash after the upgrade to MUI 5 and it’s difficult to fix because the stack trace or the logged error message is not helpful at all as it doesn’t mention where or which MUI component is causing the issue.

yeah so … how to use transitions on mounting / rerendering components with MUI5 then ? any solution? any workaround ? or is this only affecting Fade ?

@codingedgar I think the problem is in the PasswordInput. You have to forward the ref to the Input.

export const PasswordInput = styled(
  React.forwardRef(({ showPassword, onToggleShowPassword, ...props }: PasswordInputProps, ref) => (
    <Input
      ref={ref}
      placeholder="Link Password"
      type={showPassword ? "test" : "password"}
      endAdornment={
        // eslint-disable-next-line react/jsx-wrap-multilines
        <InputAdornment position="end">
          <IconButton
            aria-label="toggle password visibility"
            edge="end"
            onMouseDown={(e) => {
              e.preventDefault();
            }}
            onClick={onToggleShowPassword}
          >
            {showPassword ? (
              <VisibilityOff fontSize="small" />
            ) : (
              <Visibility fontSize="small" />
            )}
          </IconButton>
        </InputAdornment>
      }
      {...props}
    />
  ))
)

@totszwai Can confirm this solution of wrapping in a div works. Can you please look into this MUI team? We shouldn’t have to resort to this workaround.