My buttons lose focus when my `isLoading` state changes
I'm doing a little dummy project, and using
react-query for the first time. Perhaps this isn't an issue of react-query at all, but I can't imagine what else it might be either. I have this component:
https://github.com/cssinate/sortable-table/blob/main/src/components/SortableTable/SortableTable.tsx
You can see from https://github.com/cssinate/sortable-table/blob/main/src/App.tsx that isSearching is just isLoading coming from react-query.
If I navigate the Pagination buttons using a keyboard, they lose focus. If I delete the code for the conditional isSearching render, that doesn't happen. I have no idea what's going on. Any ideas?GitHub
sortable-table/src/components/SortableTable/SortableTable.tsx at ma...
Contribute to cssinate/sortable-table development by creating an account on GitHub.
GitHub
sortable-table/src/App.tsx at main · cssinate/sortable-table
Contribute to cssinate/sortable-table development by creating an account on GitHub.
1 Reply
correct-apricotOP•2y ago
I have new information! This only happens when new data is loaded for the first time. If I go to previous pages that have already been retrieved in this session, I don't get this issue.
I figured it out. While the data was loading, there were 0 results, and we were on page 1 of 1, which means
isLastPage was true, and the button was moving to a disabled state.