gregnb / gregnb/mui-datatables
Table With Search Open Will Scroll Down To The Table Because Of Autofocus
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
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)
1. Create a component with two or more datatables in it
2. Set `searchOpen` to true on all of these tables
3. View the page
4.
## Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 4.10.1 |
| MUI-datatables | 3.7.5 |
| React | 16.10.2 |
| browser | Chrome |
| etc | |
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with TableSearch.js and DebounceSearchRender.js, where the issue identifies autoFocus as enabled. Reproduce the behavior with multiple tables whose searchOpen prop is true, then verify that the page no longer scrolls to each search input during rendering and that an autoFocus opt-out is available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100