mirror of
https://github.com/stashapp/stash.git
synced 2025-12-18 12:54:38 +03:00
Bottom Page-Count button causes scenes page to reset to top (#5241)
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:
@@ -19,16 +19,16 @@ const PageCount: React.FC<{
|
|||||||
onChangePage: (page: number) => void;
|
onChangePage: (page: number) => void;
|
||||||
}> = ({ totalPages, currentPage, onChangePage }) => {
|
}> = ({ totalPages, currentPage, onChangePage }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
const currentPageCtrl = useRef(null);
|
const currentPageCtrl = useRef(null);
|
||||||
|
|
||||||
const [pageInput, pageFocus] = useFocus();
|
const [pageInput, pageFocus] = useFocus();
|
||||||
|
|
||||||
const [showSelectPage, setShowSelectPage] = useState(false);
|
const [showSelectPage, setShowSelectPage] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (showSelectPage) {
|
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]);
|
}, [showSelectPage, pageFocus]);
|
||||||
|
|
||||||
@@ -105,7 +105,7 @@ const PageCount: React.FC<{
|
|||||||
className="text-input"
|
className="text-input"
|
||||||
ref={pageInput}
|
ref={pageInput}
|
||||||
defaultValue={currentPage}
|
defaultValue={currentPage}
|
||||||
onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
|
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
if (e.key === "Enter") {
|
if (e.key === "Enter") {
|
||||||
onCustomChangePage();
|
onCustomChangePage();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -152,7 +152,6 @@ export const Pagination: React.FC<IPaginationProps> = ({
|
|||||||
onChangePage,
|
onChangePage,
|
||||||
}) => {
|
}) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
const totalPages = useMemo(
|
const totalPages = useMemo(
|
||||||
() => Math.ceil(totalItems / itemsPerPage),
|
() => Math.ceil(totalItems / itemsPerPage),
|
||||||
[totalItems, itemsPerPage]
|
[totalItems, itemsPerPage]
|
||||||
|
|||||||
Reference in New Issue
Block a user