Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-09 18:04:33 +01:00
Code Issues Projects Releases Wiki Activity

Bottom Page-Count button causes scenes page to reset to top (#5241)

Browse source 
I think was was happening is the browser was trying to do too much at once (Rendering the popup and focusing the input simultaneously). I believe it was triggering a reflow and setting the site back to default aka: back to the top.

I set the timeout to 0 which  moves the execution to the next loop event. It gives the browser time to do one and then the other, not both at the same time.

I moved `onKeyPress` to `onKeyDown` due to the former being depreciated.
This commit is contained in:
Gykes 2024-09-09 21:52:12 -07:00 committed by GitHub
parent a44993bbf4
commit a2153ced52
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/v2.5/src/components/List/Pagination.tsx
View file

@ -19,16 +19,16 @@ const PageCount: React.FC<{
onChangePage: (page: number) => void;
}> = ({ totalPages, currentPage, onChangePage }) => {
const intl = useIntl();
const currentPageCtrl = useRef(null);
const [pageInput, pageFocus] = useFocus();
const [showSelectPage, setShowSelectPage] = useState(false);
useEffect(() => {
if (showSelectPage) {
pageFocus();
// delaying the focus to the next execution loop so that rendering takes place first and stops the page from resetting.
setTimeout(() => {
pageFocus();
}, 0);
}
}, [showSelectPage, pageFocus]);
@ -105,7 +105,7 @@ const PageCount: React.FC<{
className="text-input"
ref={pageInput}
defaultValue={currentPage}
onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
onCustomChangePage();
e.preventDefault();
@ -152,7 +152,6 @@ export const Pagination: React.FC<IPaginationProps> = ({
onChangePage,
}) => {
const intl = useIntl();
const totalPages = useMemo(
() => Math.ceil(totalItems / itemsPerPage),
[totalItems, itemsPerPage]