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

BPernes commented 2 years ago

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.

grid-example

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.

redline-example

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

A gif showing the bug

bug-example

To Reproduce

Create a DataGrid
Implement a HeaderRenderer who implements a "Menu" component from material ui v4
Set the column propertie "resizable" to true
Set the Menu component to be next to the column resize line
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

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

scottostler commented 2 years ago

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

adazzle / react-data-grid