mui-datatables
mui-datatables copied to clipboard
Table With Search Open Will Scroll Down To The Table Because Of Autofocus
I have a component that has multiple mui-datatable with searchOpen set to true.
When the page is loaded, it automatically scrolls to the tables as they are rendering, so the user sees the page jump around as it renders and ends up somewhere in the middle of the page.
Expected Behavior
I expect the page to not scroll while rendering the page. I think this boils down to a feature request of being able to set autoFocus to false on TableSearch.js and DebounceSearchRender.js
Current Behavior
autoFocus is set to true, so the page will scroll to the latest search input that's rendered so it appears like the page is randomly scrolling around.
Steps to Reproduce (for bugs)
- Create a component with two or more datatables in it
- Set
searchOpento true on all of these tables - View the page
Your Environment
| Tech | Version |
|---|---|
| Material-UI | 4.10.1 |
| MUI-datatables | 3.7.5 |
| React | 16.10.2 |
| browser | Chrome |
| etc |
It is unfortunate that this has not been addressed in over a year.
I just ran into this issue today. My solution was to add this to the component mounting hook:
document.querySelector('.root').scrollTop = 0;
This resets the scrollTop of my application container to 0. Since my table component mounts at the start of my application, there is no visual jumps when the application loads.