CSVLink is not forwarding ref to the original element

[kirillku]

After switching from material-ui@4 to mui@5 CSVLink stopped working for me because it is not forwarding ref to the original element.

Example:

import { Button } from "@mui/material";
import { CSVLink } from "react-csv";

<Button component={CSVLink} data={csvData}>
  Download me
</Button>

Codesandbox: https://codesandbox.io/s/mui-5-and-react-csv-we3q8f

Error:

TypeError
Cannot read properties of undefined (reading 'addEventListener')

What do you think about about rewriting CSVLink component as a functional component with usage of React.forwardRef? (I can submit a pr)

[kirillku]

Workaround:

const LinkWithRef = React.forwardRef((props, ref) => (
  <CSVLink
    ref={(c) => {
      console.log("csvLink", c);
      console.log("ref", ref);
      ref(c?.link);
    }}
    {...props}
  />
));

<Button
  component={LinkWithRef}
  ref={(ref) => console.log(ref)}
  data={csvData}
>
  Download me
</Button>

Codesandbox: https://codesandbox.io/s/mui-5-and-react-csv-workaround-z33dbu

[leonbloy]

Same problem here after switching from material-ui@4 to mui@5

[JeomJeom]

@kirillku The workaround works well!!! Thank you