[data grid] GridToolbarColumnsButton does not open popover when onClick is defined

[marcelo-cardozo]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-3lpvhggp?file=Demo.tsx
2. Click on the columns button
3. Popover is not displayed

Current behavior

1. Open this link to live example: https://stackblitz.com/edit/react-3lpvhggp?file=Demo.tsx
2. Click on the columns button
3. Popover is not displayed

Expected behavior

1. Open this link to live example: https://stackblitz.com/edit/react-3lpvhggp?file=Demo.tsx
2. Click on the columns button
3. Popover should be displayed, else provide a way to open/close the columns popover to the consumer

Context

#15556 (comment)

Your environment

npx @mui/envinfo

System:
OS: macOS 13.2.1
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 131.0.6778.265
Edge: Not Found
Safari: 16.3
npmPackages:
@mui/x-data-grid-premium: 7.24.1

Search keywords: GridToolbarColumnsButton

[marcelo-cardozo]

duplicate of #16354

[KenanYusuf]

Thanks for opening the issue @marcelo-cardozo, I'll keep this one open because you have added more context.

[jyash97]

@KenanYusuf

Was just checking the code, should we destructure onClick from buttonProps spread ? And create a function called handleClick which triggers showColumns and the user passed onClick as well ?

Code reference: https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx#L79

happy to raise a PR, if this sounds good!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@marcelo-cardozo How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[KenanYusuf]

Thanks for the suggestion and offer to fix @jyash97—we were already calling buttonProps.onClick in the showColumns function so the fix was a bit simpler, just needed to move the onClick to after the {...buttonProps} spread https://github.com/mui/mui-x/pull/16356/files.

[jyash97]

Yes just checked the PR, makes sense 💯