Material-table: Search loses focus while typing

Created on 21 Jun 2019  路  2Comments  路  Source: mbrn/material-table

Describe the bug
When trying to type in the search box, the field loses focus after the debounceInterval.

To Reproduce
With remote data, type in the search box.

Expected behavior
Ability to keep typing in the field and having the search update.

Additional context
Remote api call:
````
data={async query => {
let queryString = '/api/' + this.props.endPoint + '?';
queryString += 'pageSize=' + query.pageSize;
queryString += '&page=' + query.page;
if (query.orderBy) queryString += '&orderby=' + query.orderBy.field + ' ' + query.orderDirection;
if (query.search) queryString += '&search=' + query.search;

try {
const response = await axios.get(queryString);
...
} catch (e) {
...
}
}}
````

bug

Most helpful comment

Turns out this was due to a setState in the try clause causing a rerender of another part of the page. It was also causing an issue with changing the pageSize. Once I fixed it, both issues went away.

All 2 comments

Turns out this was due to a setState in the try clause causing a rerender of another part of the page. It was also causing an issue with changing the pageSize. Once I fixed it, both issues went away.

I've encountered the same problem, after resolving Promise I was using setState for setting query properties, I've fixed by resolving query property instead use setState:

query =>
    new Promise((resolve, reject) => {
        fetch(
            `${api}?page=${query.page + 1}&limit=${query.pageSize}${
                query.search ? `&search=${query.search}` : ""
            }`
        )
            .then(response => response.json())
            .then(result => {
                resolve({
                    ...query,
                    /* other stuff */
                });
            });
    });

Was this page helpful?
0 / 5 - 0 ratings

Related issues

slevy85 picture slevy85  路  3Comments

revskill10 picture revskill10  路  3Comments

victorwvieira picture victorwvieira  路  3Comments

terapepo picture terapepo  路  3Comments

lazeebee picture lazeebee  路  3Comments