gregnb / gregnb/mui-datatables

Table With Search Open Will Scroll Down To The Table Because Of Autofocus

Open
#1,723 1 comment 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.