[DataGrid] Don't close column menu when updating rows

[m4theushw]

Fixes #4139

Preview: https://deploy-preview-4498--material-ui-x.netlify.app/x/react-data-grid/

CodeSandbox: https://codesandbox.io/s/fullfeatureddemo-material-demo-forked-98j7cp?file=/demo.tsx

I implemented the solution from #4139 (comment). I chose this one because it also unlocks the possibility to have filters inside the column menu. Previously, we couldn't because the column menu closes when filtering: #3571 (comment)

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	248.6	517.4	362.2	358.86	101.663
Sort 100k rows	ms	431.6	958.8	791.2	738.14	180.308
Select 100k rows	ms	96.6	210.1	205.3	161.52	43.812
Deselect 100k rows	ms	103.6	177.8	115	125.56	26.869

Generated by 🚫 dangerJS against f76f2bd

[alexfauquette]

I'm not sure this solution fix the following scenario when we will try to implement column menu filtering #3571 (comment)

• scroll along the grid
• open the menu and start filtering

If there are fewer rows passing the filter than where you currently are, the grid will scroll up and the close the column menu

[m4theushw]

If there are fewer rows passing the filter than where you currently are, the grid will scroll up and the close the column menu

@alexfauquette I was considering this an edge case. We could check how much was scrolled since the last event. Anyway, I changed to listen to the wheel event.

[alexfauquette]

Looks good. Notice that onWheel will not be triggered when using the scroll bar

wheelScroll.mp4

[flaviendelangle]

onWheel is not called when scrolling on a tactile device.

[m4theushw]

onWheel is not called when scrolling on a tactile device.

@flaviendelangle Which tactile device do you refer to? Scrolling in a touchpad is like using the mouse wheel, so it emits wheel. https://stackoverflow.com/a/60242837

[flaviendelangle]

I am not talking about a Touchpad, but directly scrolling by swiping on a touch screen.
I tested the demo link on my phone, scrolling the rows by swiping does not close the column menu.
We would need to listen to onTouchMove for instance.

[m4theushw]

Looks good. Notice that onWheel will not be triggered when using the scroll bar

@alexfauquette This is caused by ClickAwayListener. In the past, it would consider a click in the scrollbar as a click outside, but this was changed in mui/material-ui#15724 I changed here to restore the old behavior, by listening to onMouseDown.

We would need to listen to onTouchMove for instance.

@flaviendelangle I added a listener to touchmove. It seems to work now. It's a shame that we can't detect who caused the scroll event.

[flaviendelangle]

I now work on my phone 👍