search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.04k stars 1.24k forks source link

[DataGrid] Closing a preference panel causes a scroll to its DataGrid #3830

Open 7vga opened 2 years ago

7vga commented 2 years ago

Duplicates

Latest version

Current behavior 😯

A page contains several tables (DataGrids), each of them contains ability of columns toggling Click on 'columns selector' button displays pop-up with column list If, instead, ones scroll down to next (last) DataGrid at the bottom of page and then click on 'columns selector' button - it scrolls up to the previously open ones

Expected behavior 🤔

Assumed that new pop-up opens near DataGrid which it controls

Steps to reproduce 🕹

Steps:

  1. Find a page with two or more DataGrids with 'columns selector' controls
  2. Open 'columns selector' pop-up at upper DataGrid
  3. scroll down to bottom DataGrid and open 'columns selector' header button 4.look which DataGrid is displayed

Context 🔦

Sorry if some details missed, I'm not a frontend dev

Your environment 🌎

Chrome 97.0.4692.99 on Mac OS 11.6

flaviendelangle commented 2 years ago

Reproduction case: https://codesandbox.io/s/datagridpro-v5-quick-start-forked-cx5qk?file=/src/App.tsx

7vga commented 2 years ago

https://user-images.githubusercontent.com/13766512/152536811-4a121bec-be3e-4141-a324-a212c3f2193f.mp4

flaviendelangle commented 2 years ago

The problem seems to come from the TrapFocus in GridPanelWrapper.

oliviertassinari commented 2 years ago

It seems that we have two different issues on the reproduction provided:

  1. The scroll: it scrolls up and it shouldn't
  2. The focus: it doesn't focus on the second popup, but it should

I wonder if the TrapFocus is not missing the story of moving from one active to another active.