Resizable feature doesn't work alongside the "Menu" component from Material UI

[BPernes]

Describe the bug

• So i have a data grid with a component HeaderRenderer who implements the "Menu" from material ui. While creating the columns, the first column with the name of "Indicadores" has the properties "resizable" and "frozen" setted to true. When the "Menu" button is clicked, it opens 2 options, the first option expand all the rows by its level and the second one retracts them all.

• The problem is, when the resizable option is setted to true, if i try to click the button in the area that is after the column resize line, the button won't work. It will only work if i click on the area that is before the column resize line.

This problem will not happen if the resizable option in setted to "false"

• A gif showing the bug

To Reproduce

1. Create a DataGrid
2. Implement a HeaderRenderer who implements a "Menu" component from material ui v4
3. Set the column propertie "resizable" to true
4. Set the Menu component to be next to the column resize line
5. Try to click the button after the column resize line

Expected behavior

• The button should fire an event when clicked on any of his clickable area, without being affected by the resizable feature

Environment

• react-data-grid version: 7.0.0-canary.46
• react/react-dom version: 16.8.6
• material-ui/core version: 4.9.5
• material-ui/icons version: 4.4.1

[ivan-palatov]

Can you give a codesandbox with the issue you are having? Since the hover effect is working, I'd assume that e.stopPropagation() on click event would resolve the issue. Try creating a component like this

interface IProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {}

const stopPropagation = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
  e.stopPropagation();

const StopPropagation = observer<IProps>(({ children, ...props }) => {
  return (
    <div {...props} onClick={stopPropagation}>
      {children}
    </div>
  );
});

And wrapping it around your menu/menu items.

[rsmaan4u8]

I have noticed the same problem. Below is the link to code sandbox.

https://codesandbox.io/embed/material-demo-forked-9yu2en?fontsize=14&hidenavigation=1&theme=dark @ivan-palatov tried your suggestion but it does not work. I think it is something to do with portal. Please note that grid is in Dialog.

[izmy]

Well, I resolved this problem by condition in file ResizableHeaderCell:

if (event.target.className !== "rdg-header-cell-resizer") return;

[scottostler]

I'm also seeing this issue with @szhsin/react-menu. I was able to work around this by adding onPointerDown={e => e.stopPropagation()} in my column header's menu component