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) {
...
}
}}
````
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 */
});
});
});
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.