[DataGrid] Fix column menu scroll close

[alisasanib]

• [X] I have followed (at least) the PR section of the contributing guide.

Fixes #17821

I understand that we normally avoid using stopPropagation(), but here the event is generated inside the column menu popup, and I don't think it has useful purposes higher in the tree, as letting it bubble triggers the grid’s global virtualScrollerWheel or TouchMove listeners, which closes the menu while the user is scrolling the menu itself. This local handler will stop only wheel/touch events that originate in the menu, and will leave every other event path untouched. That said, I’m happy to hear your thoughts on this approach, or other solutions you’d prefer, I’d be glad to update the fix accordingly.

As mentioned in the ticket, this is a regression that started in version 7. In versions 5 and 6, scrolling inside the column menu did not close it, while scrolling on other elements (such as the grid) would correctly dismiss the menu. Prior to version 5, the menu did not close on scroll at all, regardless of whether the scroll occurred inside the menu or elsewhere.

But I also spent some time on the expected behaviour here and checked similar functionalities on the competitors. I checked ag-grid and material-react-table and noticed that neither closes the column menu when scrolling inside the menu, or even when scrolling the grid, table, or the surrounding document. As this closing on scroll functionality has been here for a long time, I assume it was introduced intentionally and may have some historical context behind it. I just wanted to share these observations and ask for the team’s thoughts on whether the current behavior is still the preferred one or if it’s worth reconsidering.

[github-actions[bot]]

Please add one type label to categorize the purpose of this PR appropriately:

bug, regression, enhancement, new feature, release or dependencies

[mui-bot]

Deploy preview: https://deploy-preview-18065--material-ui-x.netlify.app/

Bundle size report

Total Size Change: 🔺+618B^(0.00%) - Total Gzip Change: 🔺+178B^(0.00%) Files: 122 total (0 added, 0 removed, 6 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-data-grid parsed: 🔺+103B^(+0.03%) gzip: 🔺+32B^(+0.03%) @mui/x-data-grid-premium parsed: 🔺+103B^(+0.02%) gzip: 🔺+36B^(+0.02%) @mui/x-data-grid-premium/DataGridPremium parsed: 🔺+103B^(+0.02%) gzip: 🔺+32B^(+0.02%) @mui/x-data-grid-pro parsed: 🔺+103B^(+0.02%) gzip: 🔺+15B^(+0.01%) @mui/x-data-grid-pro/DataGridPro parsed: 🔺+103B^(+0.02%) gzip: 🔺+31B^(+0.02%) @mui/x-data-grid/DataGrid parsed: 🔺+103B^(+0.03%) gzip: 🔺+32B^(+0.03%) @mui/x-charts parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/BarChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartContainerPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartDataProviderPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartsToolbarPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartZoomSlider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/FunnelChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/Heatmap parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/LineChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/PieChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/RadarChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ScatterChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/BarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartContainer parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartDataProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxisHighlight parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsClipPath parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLegend parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsOverlay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsReferenceLine parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsSurface parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsText parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsTooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsXAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsYAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Gauge parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/LineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/PieChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/RadarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ScatterChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/SparkLineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/StaticDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/TimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsBase parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DayCalendarSkeleton parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MonthCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersActionBar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 4562756c0776905e339d25d64dadeba759bf91e8